/* Final teacher-materials design. Images are deliberately not styled here. */
body.sp-design-system-page .sp-teacher-library {
    --sp-tm-black: #151515;
    --sp-tm-white: #ffffff;
    --sp-tm-emerald: #123b37;
    --sp-tm-cream: #fff6e7;
    --sp-tm-mint: #b8dcd8;
    --sp-tm-lilac: #e8e0f2;
    --sp-tm-yellow: #f1da89;
    --sp-tm-line: rgba(21, 21, 21, .18);
    width: min(1220px, calc(100vw - 32px)) !important;
    margin: 0 auto !important;
    padding: clamp(18px, 3vw, 42px) !important;
    color: var(--sp-tm-black) !important;
    font-family: "Google Sans", sans-serif !important;
}

body.sp-design-system-page .sp-teacher-library :where(h1, h2, h3, h4, h5, h6, p, span, small, strong, b, em, label, legend, summary, li, dt, dd, a) {
    color: var(--sp-tm-black) !important;
    -webkit-text-fill-color: var(--sp-tm-black) !important;
}

body.sp-design-system-page .sp-teacher-library :where(h1, h2, h3, h4) {
    font-weight: 600 !important;
    letter-spacing: -.025em !important;
}

body.sp-design-system-page .sp-teacher-library .sp-teacher-hero {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
    margin: 0 0 24px !important;
    padding: clamp(24px, 4vw, 42px) !important;
    border: 0 !important;
    border-radius: 25px !important;
    background: var(--sp-tm-lilac) !important;
    box-shadow: none !important;
}

body.sp-design-system-page .sp-teacher-library .sp-teacher-hero h1 {
    margin: 7px 0 8px !important;
    font-size: clamp(34px, 5vw, 56px) !important;
    line-height: 1.02 !important;
}

body.sp-design-system-page .sp-teacher-library .sp-teacher-hero p { margin: 0 !important; font-size: 17px !important; }

body.sp-design-system-page .sp-teacher-library .sp-teacher-eyebrow {
    display: inline-flex !important;
    padding: 7px 12px !important;
    border-radius: 999px !important;
    background: var(--sp-tm-yellow) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
}

body.sp-design-system-page .sp-teacher-library :where(.sp-teacher-books, .sp-teacher-book-form, .sp-teacher-book-open, .sp-book-screen-v2) {
    padding: clamp(22px, 3vw, 34px) !important;
    border: 0 !important;
    border-radius: 25px !important;
    background: var(--sp-tm-cream) !important;
    box-shadow: none !important;
}

body.sp-design-system-page .sp-teacher-library .sp-teacher-section-title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
    margin-bottom: 22px !important;
}

body.sp-design-system-page .sp-teacher-library .sp-teacher-section-title > :where(span, div > span) {
    font-size: clamp(23px, 2.6vw, 32px) !important;
    font-weight: 600 !important;
}

body.sp-design-system-page .sp-teacher-library :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), textarea, select) {
    min-height: 48px !important;
    padding: 12px 15px !important;
    border: 1px solid var(--sp-tm-line) !important;
    border-radius: 14px !important;
    outline: 0 !important;
    background: var(--sp-tm-white) !important;
    box-shadow: none !important;
    color: var(--sp-tm-black) !important;
    -webkit-text-fill-color: var(--sp-tm-black) !important;
}

body.sp-design-system-page .sp-teacher-library textarea { min-height: 120px !important; resize: vertical !important; }
body.sp-design-system-page .sp-teacher-library :where(input, textarea, select):focus { border-color: var(--sp-tm-emerald) !important; box-shadow: 0 0 0 3px rgba(18, 59, 55, .1) !important; }

body.sp-design-system-page .sp-teacher-library :where(.sp-teacher-books-grid, .sp-material-book-grid) {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
}

body.sp-design-system-page .sp-teacher-library :where(.sp-book-card-wrap, .sp-teacher-books-grid > a, .sp-teacher-library-grid > section) {
    border: 0 !important;
    border-radius: 25px !important;
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
}

body.sp-design-system-page .sp-teacher-library :where(.sp-book-card-wrap, .sp-teacher-books-grid > a, .sp-teacher-library-grid > section):nth-child(4n+1) { background: var(--sp-tm-mint) !important; }
body.sp-design-system-page .sp-teacher-library :where(.sp-book-card-wrap, .sp-teacher-books-grid > a, .sp-teacher-library-grid > section):nth-child(4n+2) { background: var(--sp-tm-yellow) !important; }
body.sp-design-system-page .sp-teacher-library :where(.sp-book-card-wrap, .sp-teacher-books-grid > a, .sp-teacher-library-grid > section):nth-child(4n+3) { background: var(--sp-tm-lilac) !important; }
body.sp-design-system-page .sp-teacher-library :where(.sp-book-card-wrap, .sp-teacher-books-grid > a, .sp-teacher-library-grid > section):nth-child(4n+4) { background: var(--sp-tm-white) !important; }

body.sp-design-system-page .sp-teacher-library :where(.sp-book-pocket, .sp-book-section, .sp-lesson-exercise-card, .sp-section-lessons > a, .sp-book-lesson-row) {
    border: 1px solid var(--sp-tm-line) !important;
    border-radius: 18px !important;
    background: var(--sp-tm-white) !important;
    box-shadow: none !important;
}

body.sp-design-system-page .sp-teacher-library .sp-book-pocket { margin-bottom: 12px !important; overflow: hidden !important; }
body.sp-design-system-page .sp-teacher-library .sp-book-pocket > summary { padding: 18px 20px !important; background: var(--sp-tm-mint) !important; }
body.sp-design-system-page .sp-teacher-library .sp-pocket-content { padding: 18px !important; background: var(--sp-tm-white) !important; }

/* Every regular action button is permanently white. */
body.sp-design-system-page .sp-teacher-library :where(
    button:not(.sp-open-annotated-image):not([data-article-color]),
    .sp-teacher-primary, .sp-neutral-action, .sp-add-pocket-button,
    .sp-add-carousel-image, .sp-pretty-upload, .sp-start-lesson-button
) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    padding: 11px 18px !important;
    border: 1.5px solid var(--sp-tm-black) !important;
    border-radius: 999px !important;
    background: var(--sp-tm-white) !important;
    background-color: var(--sp-tm-white) !important;
    background-image: none !important;
    box-shadow: none !important;
    color: var(--sp-tm-black) !important;
    -webkit-text-fill-color: var(--sp-tm-black) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    translate: none !important;
    animation: none !important;
    transition: none !important;
}

body.sp-design-system-page .sp-teacher-library :where(
    button:not(.sp-open-annotated-image):not([data-article-color]),
    .sp-teacher-primary, .sp-neutral-action, .sp-add-pocket-button,
    .sp-add-carousel-image, .sp-pretty-upload, .sp-start-lesson-button
):where(:hover, :focus, :active),
body.sp-design-system-page .sp-teacher-library :where(
    button:not(.sp-open-annotated-image):not([data-article-color]),
    .sp-teacher-primary, .sp-neutral-action, .sp-add-pocket-button,
    .sp-add-carousel-image, .sp-pretty-upload, .sp-start-lesson-button
):where(.is-active, .active, [aria-expanded="true"], [aria-pressed="true"]) {
    border-color: var(--sp-tm-black) !important;
    background: var(--sp-tm-white) !important;
    background-color: var(--sp-tm-white) !important;
    background-image: none !important;
    box-shadow: none !important;
    color: var(--sp-tm-black) !important;
    -webkit-text-fill-color: var(--sp-tm-black) !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    translate: none !important;
}

body.sp-design-system-page .sp-teacher-library :where(
    button:not(.sp-open-annotated-image):not([data-article-color]),
    .sp-teacher-primary, .sp-neutral-action, .sp-add-pocket-button,
    .sp-add-carousel-image, .sp-pretty-upload, .sp-start-lesson-button
) * {
    color: var(--sp-tm-black) !important;
    -webkit-text-fill-color: var(--sp-tm-black) !important;
}

/* Every icon-only control: white circle, black outline, black icon. */
body.sp-design-system-page .sp-teacher-library :where(
    .sp-icon-edit, .sp-delete-cross, .sp-exercise-modal-close, .sp-class-picker-close,
    .sp-modal-close, .sp-image-viewer-close, .sp-image-words-crop-close,
    .sp-universal-crop-close, .sp-remove-carousel-image, .sp-image-word-remove,
    .sp-article-note-button, .sp-transcript-eye, .sp-note-corner-actions button,
    .sp-image-tools button, .sp-image-zoom button, .sp-inline-image-tools > button,
    .sp-audio-settings > button, .sp-audio-volume > button,
    .sp-custom-audio > button:not([data-audio-play]), .sp-viewer-arrow,
    button[aria-label*="Изменить"], button[aria-label*="Удалить"],
    button[aria-label*="Закрыть"], [data-close-modal], [data-close-editor],
    [data-close-exercise-modal]
) {
    display: inline-grid !important;
    place-items: center !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1.5px solid var(--sp-tm-black) !important;
    border-radius: 50% !important;
    outline: 0 !important;
    background: var(--sp-tm-white) !important;
    background-color: var(--sp-tm-white) !important;
    background-image: none !important;
    box-shadow: none !important;
    color: var(--sp-tm-black) !important;
    -webkit-text-fill-color: var(--sp-tm-black) !important;
    font-family: Arial, sans-serif !important;
    font-size: 21px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    translate: none !important;
    animation: none !important;
    transition: none !important;
}

body.sp-design-system-page .sp-teacher-library :where(
    .sp-icon-edit, .sp-delete-cross, .sp-exercise-modal-close, .sp-class-picker-close,
    .sp-modal-close, .sp-image-viewer-close, .sp-image-words-crop-close,
    .sp-universal-crop-close, .sp-remove-carousel-image, .sp-image-word-remove,
    .sp-article-note-button, .sp-transcript-eye, .sp-note-corner-actions button,
    .sp-image-tools button, .sp-image-zoom button, .sp-inline-image-tools > button,
    .sp-audio-settings > button, .sp-audio-volume > button,
    .sp-custom-audio > button:not([data-audio-play]), .sp-viewer-arrow,
    button[aria-label*="Изменить"], button[aria-label*="Удалить"],
    button[aria-label*="Закрыть"], [data-close-modal], [data-close-editor],
    [data-close-exercise-modal]
):where(:hover, :focus, :active) {
    border-color: var(--sp-tm-black) !important;
    background: var(--sp-tm-white) !important;
    background-color: var(--sp-tm-white) !important;
    background-image: none !important;
    box-shadow: none !important;
    color: var(--sp-tm-black) !important;
    -webkit-text-fill-color: var(--sp-tm-black) !important;
    filter: none !important;
    transform: none !important;
}

/* Open/selected icon controls stay white too. */
body.sp-design-system-page .sp-teacher-library :where(
    .sp-icon-edit, .sp-delete-cross, .sp-exercise-modal-close, .sp-class-picker-close,
    .sp-modal-close, .sp-image-viewer-close, .sp-image-words-crop-close,
    .sp-universal-crop-close, .sp-remove-carousel-image, .sp-image-word-remove,
    .sp-article-note-button, .sp-transcript-eye, .sp-note-corner-actions button,
    .sp-image-tools button, .sp-image-zoom button, .sp-inline-image-tools > button,
    .sp-audio-settings > button, .sp-audio-volume > button,
    .sp-custom-audio > button:not([data-audio-play]), .sp-viewer-arrow,
    button[aria-label*="Изменить"], button[aria-label*="Удалить"],
    button[aria-label*="Закрыть"], [data-close-modal], [data-close-editor],
    [data-close-exercise-modal]
):where(.is-active, .active, [aria-expanded="true"], [aria-pressed="true"], [data-state="open"]) {
    border-color: var(--sp-tm-black) !important;
    background: var(--sp-tm-white) !important;
    background-color: var(--sp-tm-white) !important;
    background-image: none !important;
    box-shadow: none !important;
    color: var(--sp-tm-black) !important;
    -webkit-text-fill-color: var(--sp-tm-black) !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
}

body.sp-design-system-page .sp-teacher-library :where(.sp-book-modal > div, .sp-exercise-modal-dialog, .sp-class-picker) {
    border: 0 !important;
    border-radius: 25px !important;
    background: var(--sp-tm-cream) !important;
    box-shadow: 0 22px 60px rgba(18, 59, 55, .18) !important;
}

/* Covers breathe inside cards instead of touching their edges. */
body.sp-design-system-page .sp-teacher-library .sp-book-card-cover {
    width: calc(100% - 32px) !important;
    max-width: calc(100% - 32px) !important;
    margin: 16px 16px 0 !important;
    border-radius: 14px !important;
}

body.sp-design-system-page .sp-teacher-library .sp-book-screen-cover {
    margin: 4px 2px 4px 4px !important;
    border-radius: 14px !important;
}

/* Image editors and image exercises keep their original rectangular presentation. */
body.sp-design-system-page .sp-teacher-library .sp-open-annotated-image {
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

body.sp-design-system-page .sp-teacher-library .sp-open-annotated-image {
    display: block !important;
    width: 100% !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.sp-design-system-page .sp-teacher-library .sp-article-image-editor {
    border-radius: 14px !important;
    background: var(--sp-tm-white) !important;
}

/* Exercise symbols follow the whiteboard's centered monochrome icon language. */
body.sp-design-system-page .sp-teacher-library :where(.sp-exercise-template-grid > button > span, .sp-exercise-editor-heading > span, .sp-exercise-placeholder > span) {
    display: grid !important;
    place-items: center !important;
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 !important;
    border: 1.5px solid var(--sp-tm-black) !important;
    border-radius: 50% !important;
    background: var(--sp-tm-white) !important;
    color: var(--sp-tm-black) !important;
    -webkit-text-fill-color: var(--sp-tm-black) !important;
    font-family: "Google Sans", Arial, sans-serif !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
}

body.sp-design-system-page .sp-teacher-library .sp-exercise-template-grid > button {
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    justify-items: start !important;
    gap: 4px 13px !important;
    min-height: 96px !important;
    text-align: left !important;
}

body.sp-design-system-page .sp-teacher-library .sp-exercise-template-grid > button > span { grid-row: 1 / 3 !important; }
body.sp-design-system-page .sp-teacher-library .sp-exercise-template-grid > button > strong { align-self: end !important; }
body.sp-design-system-page .sp-teacher-library .sp-exercise-template-grid > button > small { align-self: start !important; }

/* The bottom add-exercise plus is centered in a branded circle. */
body.sp-design-system-page .sp-teacher-library .sp-lesson-add-tile > span {
    display: grid !important;
    place-items: center !important;
    width: 52px !important;
    min-width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    margin: 0 auto 10px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--sp-tm-mint) !important;
    color: var(--sp-tm-black) !important;
    -webkit-text-fill-color: var(--sp-tm-black) !important;
    font-family: Arial, sans-serif !important;
    font-size: 32px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    text-align: center !important;
}

body.sp-design-system-page .sp-teacher-library .sp-lesson-add-tile {
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    border: 1.5px solid var(--sp-tm-black) !important;
    background: var(--sp-tm-white) !important;
    text-align: center !important;
}

/* Live collaboration remains active, but never prints status copy over exercises. */
body.sp-design-system-page .sp-teacher-library .sp-exercise-live-status { display: none !important; }

@media (max-width: 900px) {
    body.sp-design-system-page .sp-teacher-library :where(.sp-teacher-books-grid, .sp-material-book-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 650px) {
    body.sp-design-system-page .sp-teacher-library { width: calc(100vw - 20px) !important; padding: 14px !important; }
    body.sp-design-system-page .sp-teacher-library :where(.sp-teacher-hero, .sp-teacher-section-title) { align-items: stretch !important; flex-direction: column !important; }
    body.sp-design-system-page .sp-teacher-library :where(.sp-teacher-books-grid, .sp-material-book-grid) { grid-template-columns: minmax(0, 1fr) !important; }
}

/* 3.3.25 — authoritative teacher-materials controls.
   This intentionally does not depend on a page body class: Elementor and cached
   WordPress templates do not always expose the same body classes. */
body .sp-teacher-library button:not(.sp-open-annotated-image):not([data-article-color]):not([data-essay-color]):not([data-essay-highlight]),
body .sp-teacher-library input[type="button"],
body .sp-teacher-library input[type="submit"],
body .sp-teacher-library .sp-button,
body .sp-teacher-library .sp-btn,
body .sp-teacher-library .sp-teacher-primary,
body .sp-teacher-library .sp-teacher-secondary,
body .sp-teacher-library .sp-neutral-action {
    background: #fff !important;
    background-color: #fff !important;
    background-image: none !important;
    border-color: #151515 !important;
    box-shadow: none !important;
    color: #151515 !important;
    -webkit-text-fill-color: #151515 !important;
    filter: none !important;
    opacity: 1 !important;
    outline-color: #151515 !important;
    text-shadow: none !important;
    transform: none !important;
    translate: none !important;
    animation: none !important;
    transition: none !important;
}

body .sp-teacher-library button:not(.sp-open-annotated-image):not([data-article-color]):not([data-essay-color]):not([data-essay-highlight]):hover,
body .sp-teacher-library button:not(.sp-open-annotated-image):not([data-article-color]):not([data-essay-color]):not([data-essay-highlight]):focus,
body .sp-teacher-library button:not(.sp-open-annotated-image):not([data-article-color]):not([data-essay-color]):not([data-essay-highlight]):active,
body .sp-teacher-library input[type="button"]:hover,
body .sp-teacher-library input[type="submit"]:hover,
body .sp-teacher-library .sp-button:hover,
body .sp-teacher-library .sp-btn:hover,
body .sp-teacher-library .sp-teacher-primary:hover,
body .sp-teacher-library .sp-teacher-secondary:hover,
body .sp-teacher-library .sp-neutral-action:hover {
    background: #fff !important;
    background-color: #fff !important;
    background-image: none !important;
    border-color: #151515 !important;
    box-shadow: none !important;
    color: #151515 !important;
    -webkit-text-fill-color: #151515 !important;
    filter: none !important;
    opacity: 1 !important;
    text-shadow: none !important;
    transform: none !important;
    translate: none !important;
}

body .sp-teacher-library button:not(.sp-open-annotated-image):not([data-article-color]):not([data-essay-color]):not([data-essay-highlight]) *,
body .sp-teacher-library .sp-button *,
body .sp-teacher-library .sp-btn * {
    color: #151515 !important;
    -webkit-text-fill-color: #151515 !important;
}

/* Colour pickers keep their colour because colour is their function. */
body .sp-teacher-library :is([data-article-color], [data-essay-color], [data-essay-highlight]) {
    box-shadow: none !important;
    transform: none !important;
    translate: none !important;
    animation: none !important;
    transition: none !important;
}

/* Covers have an explicit inset on every card, independent of legacy rules. */
body .sp-teacher-library .sp-book-card-wrap > a {
    padding: 16px !important;
}
body .sp-teacher-library .sp-book-card-wrap .sp-book-card-cover {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 150px !important;
    margin: 0 0 18px !important;
    border-radius: 14px !important;
    object-fit: cover !important;
}

/* Exercise catalogue uses the same clean, centred line-symbol language as the board. */
body .sp-teacher-library .sp-exercise-template-grid > button > span,
body .sp-teacher-library .sp-exercise-editor-heading > span,
body .sp-teacher-library .sp-exercise-placeholder > span {
    display: grid !important;
    place-items: center !important;
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 !important;
    border: 1.5px solid #151515 !important;
    border-radius: 16px !important;
    background: #fff !important;
    color: #151515 !important;
    -webkit-text-fill-color: #151515 !important;
    font-family: Arial, sans-serif !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
}

/* Image itself remains an image, not a round button. */
body .sp-teacher-library button.sp-open-annotated-image,
body .sp-teacher-library button.sp-open-annotated-image:hover,
body .sp-teacher-library button.sp-open-annotated-image:focus,
body .sp-teacher-library button.sp-open-annotated-image:active {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
    translate: none !important;
}
body .sp-teacher-library .sp-open-annotated-image > img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    border-radius: 14px !important;
}

/* No technical synchronization copy is shown around image workspaces. */
body .sp-teacher-library .sp-exercise-live-status,
body .sp-teacher-library .sp-image-live-status,
body .sp-teacher-library .sp-image-sync-status,
body .sp-teacher-library [data-image-sync-status] {
    display: none !important;
}

/* Bottom add tile: a mathematically centred plus in a brand mint circle. */
body .sp-teacher-library button.sp-lesson-add-tile > span {
    display: grid !important;
    place-items: center !important;
    width: 54px !important;
    min-width: 54px !important;
    height: 54px !important;
    min-height: 54px !important;
    margin: 0 auto 10px !important;
    padding: 0 0 3px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #b8dcd8 !important;
    color: #151515 !important;
    -webkit-text-fill-color: #151515 !important;
    font-family: Arial, sans-serif !important;
    font-size: 34px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    text-align: center !important;
}

/* 3.3.26 — restore readable tool sizes in the material/class workspaces. */
body .sp-class-sidebar > a,
body .sp-class-sidebar > button,
body .sp-template-tools > a,
body .sp-template-tools > button {
    display: grid !important;
    place-items: center !important;
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    padding: 0 !important;
    border-radius: 15px !important;
    font-size: 23px !important;
    line-height: 1 !important;
    overflow: visible !important;
}
body .sp-class-sidebar > :is(a, button) > svg,
body .sp-template-tools > :is(a, button) > svg {
    display: block !important;
    width: 25px !important;
    min-width: 25px !important;
    height: 25px !important;
    min-height: 25px !important;
    margin: 0 !important;
    padding: 0 !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
}
body .sp-class-sidebar .sp-timer-tool [data-timer-mini] {
    width: auto !important;
    min-width: 50px !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 4px 7px !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
}

/* Carousel navigation: true circles, centred arrow glyphs and centred group. */
body .sp-teacher-library .sp-image-carousel > div:last-child {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: max-content !important;
    max-width: calc(100% - 24px) !important;
    margin-right: auto !important;
    margin-left: auto !important;
}
body .sp-teacher-library .sp-image-carousel > div:last-child > button[data-prev],
body .sp-teacher-library .sp-image-carousel > div:last-child > button[data-next] {
    position: static !important;
    display: grid !important;
    place-items: center !important;
    flex: 0 0 40px !important;
    box-sizing: border-box !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 !important;
    padding: 0 0 3px !important;
    border: 1.5px solid #151515 !important;
    border-radius: 50% !important;
    background: #fff !important;
    color: #151515 !important;
    -webkit-text-fill-color: #151515 !important;
    font: 500 28px/1 Arial, sans-serif !important;
    text-align: center !important;
}
body .sp-teacher-library .sp-image-carousel > div:last-child > button[data-prev]:hover,
body .sp-teacher-library .sp-image-carousel > div:last-child > button[data-next]:hover,
body .sp-teacher-library .sp-image-carousel > div:last-child > button[data-prev]:focus,
body .sp-teacher-library .sp-image-carousel > div:last-child > button[data-next]:focus,
body .sp-teacher-library .sp-image-carousel > div:last-child > button[data-prev]:active,
body .sp-teacher-library .sp-image-carousel > div:last-child > button[data-next]:active {
    width: 40px !important;
    height: 40px !important;
    padding: 0 0 3px !important;
    border-radius: 50% !important;
    background: #fff !important;
    color: #151515 !important;
    transform: none !important;
}

@media (max-width: 480px) {
    body .sp-class-sidebar > a,
    body .sp-class-sidebar > button,
    body .sp-template-tools > a,
    body .sp-template-tools > button {
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
    }
}

/* 3.3.27 — lesson editor is a stable, centred application screen.
   The document itself never drifts or scrolls; only useful content areas scroll. */
html:has(body.sp-library-lesson-mode),
body.sp-library-lesson-mode {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
}
body.sp-library-lesson-mode .sp-teacher-library {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 1480px !important;
    height: 100dvh !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: hidden !important;
}
body.sp-library-lesson-mode .sp-library-lesson-studio {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 1480px !important;
    height: 100dvh !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    transform: none !important;
    translate: none !important;
}
body.sp-library-lesson-mode .sp-library-lesson-studio > header {
    position: relative !important;
    z-index: 5 !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
body.sp-library-lesson-mode .sp-library-lesson-studio > .sp-lesson-workspace {
    flex: 1 1 auto !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}
body.sp-library-lesson-mode .sp-template-classroom > main {
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    padding-right: 8px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable !important;
}
body.sp-library-lesson-mode .sp-template-classroom > .sp-template-tools {
    align-self: start !important;
    max-height: 100% !important;
}
body.sp-library-lesson-mode .sp-template-classroom > .sp-template-right-column {
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
}
body.sp-library-lesson-mode .sp-lesson-canvas {
    width: 100% !important;
    max-width: 950px !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

@media (max-width: 850px) {
    body.sp-library-lesson-mode .sp-library-lesson-studio > .sp-lesson-workspace {
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
    }
    body.sp-library-lesson-mode .sp-template-classroom > main,
    body.sp-library-lesson-mode .sp-template-classroom > .sp-template-right-column {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
}

/* 3.3.28 — enlarge the glyphs themselves, not only their button boxes. */
body .sp-class-workspace {
    grid-template-columns: 72px minmax(0, 1fr) !important;
}
body .sp-class-sidebar {
    padding-right: 9px !important;
    padding-left: 9px !important;
}
body .sp-class-sidebar > a,
body .sp-class-sidebar > button {
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    font-size: 31px !important;
}
body .sp-class-sidebar > :is(a, button) > svg {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    stroke-width: 1.75 !important;
}
body .sp-template-classroom {
    grid-template-columns: 64px minmax(0, 1fr) 280px !important;
}
body .sp-template-tools > a,
body .sp-template-tools > button {
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    font-size: 30px !important;
    line-height: 1 !important;
}
body .sp-template-tools > :is(a, button) > svg {
    width: 31px !important;
    min-width: 31px !important;
    max-width: 31px !important;
    height: 31px !important;
    min-height: 31px !important;
    max-height: 31px !important;
}

@media (max-width: 850px) {
    body .sp-template-classroom {
        grid-template-columns: 60px minmax(0, 1fr) !important;
    }
}

@media (max-width: 480px) {
    body .sp-class-workspace {
        grid-template-columns: 62px minmax(0, 1fr) !important;
    }
    body .sp-class-sidebar > a,
    body .sp-class-sidebar > button {
        width: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
    }
    body .sp-class-sidebar > :is(a, button) > svg {
        width: 29px !important;
        min-width: 29px !important;
        height: 29px !important;
        min-height: 29px !important;
    }
}