/* Easy Padhai Magical Whiteboard — shared progressive enhancement. */

.ep-magic-page-nav {
    position: sticky;
    top: 0;
    z-index: 14;
    display: grid;
    grid-template-columns: 34px auto 34px minmax(130px, 1fr) auto;
    align-items: center;
    gap: 6px;
    margin: 0 0 9px;
    padding: 6px;
    border: 1px solid #c9dcf4;
    border-radius: 12px;
    background: rgba(248, 252, 255, .97);
    box-shadow: 0 5px 14px rgba(26, 72, 122, .07);
    font-family: Inter, system-ui, sans-serif;
}

.ep-magic-page-nav[hidden] {
    display: none !important;
}

.ep-magic-page-nav button,
.ep-magic-page-nav select {
    min-width: 0;
    min-height: 32px;
    border: 1px solid #b9d1ee;
    border-radius: 9px;
    background: #fff;
    color: #174675;
    font: 800 10px/1.2 Inter, system-ui, sans-serif;
}

.ep-magic-page-nav button {
    padding: 5px 8px;
    cursor: pointer;
}

.ep-magic-page-nav button:disabled {
    opacity: .42;
    cursor: not-allowed;
}

.ep-magic-page-nav select {
    width: 100%;
    padding: 5px 27px 5px 8px;
}

.ep-magic-page-nav > span {
    color: #173c69;
    font: 900 10px/1.2 Inter, system-ui, sans-serif;
    white-space: nowrap;
}

.ep-magic-teacher-dock {
    position: relative;
    display: grid;
    min-width: 158px;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    margin-left: auto;
    padding: 5px 9px 5px 5px;
    border: 1px solid #c3dcf7;
    border-radius: 999px;
    background: linear-gradient(135deg, #fff, #eef7ff);
    overflow: hidden;
    font-family: Inter, system-ui, sans-serif;
}

.ep-magic-teacher-avatar {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #2ba7f3, #7851f2);
    font-size: 19px;
    box-shadow: 0 5px 12px rgba(42, 100, 200, .22);
}

.ep-magic-teacher-dock strong,
.ep-magic-teacher-dock small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ep-magic-teacher-dock strong {
    color: #173c69;
    font-size: 10px;
}

.ep-magic-teacher-dock small {
    margin-top: 2px;
    color: #58728f;
    font-size: 8px;
}

.ep-magic-teacher-beam {
    position: absolute;
    right: -38px;
    bottom: 7px;
    width: 50px;
    height: 2px;
    background: linear-gradient(90deg, rgba(33, 108, 221, 0), #216cdd);
    opacity: 0;
    transform: rotate(8deg);
    transform-origin: right center;
}

.ep-magic-teacher-dock.is-speaking {
    border-color: #8058f1;
    box-shadow: 0 0 0 3px rgba(119, 80, 240, .1);
}

.ep-magic-teacher-dock.is-speaking .ep-magic-teacher-avatar {
    animation: epMagicTeacherTalk .52s ease-in-out infinite alternate;
}

.ep-magic-teacher-dock.is-speaking .ep-magic-teacher-beam {
    opacity: 1;
    animation: epMagicBeam 1s ease-in-out infinite alternate;
}

.ep-magic-teacher-dock.is-listening {
    border-color: #27a66c;
    background: #effff7;
}

@keyframes epMagicTeacherTalk {
    to { transform: translateY(-2px) rotate(2deg); }
}

@keyframes epMagicBeam {
    to { transform: rotate(-7deg); }
}

.ep-magic-board-pointer {
    position: absolute;
    z-index: 18;
    display: block;
    width: 46px;
    height: 24px;
    opacity: 0;
    pointer-events: none;
    transition: top .22s ease, left .22s ease, opacity .15s ease;
}

.ep-magic-board-pointer.is-active {
    opacity: 1;
}

.ep-magic-board-pointer i {
    position: absolute;
    right: 0;
    bottom: 5px;
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, #195db7 0 72%, #f4c34e 72% 92%, #28374b 92%);
    box-shadow: 0 2px 3px rgba(17, 45, 78, .22);
    transform: rotate(-25deg);
}

.ep-magic-board-pointer b {
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 15px;
    border-radius: 55% 48% 50% 60%;
    background: linear-gradient(145deg, #f5c6a2, #dc966d);
    transform: rotate(12deg);
}

.ep-board-spoken-word {
    display: inline;
    border-radius: 4px;
    transition: color .16s ease, background .16s ease, box-shadow .16s ease;
}

.ep-board-spoken-word.is-current-word,
.ep-board-step-arrive.is-writing {
    background: linear-gradient(transparent 62%, rgba(255, 221, 79, .7) 62%);
    color: #0d57ad;
}

.ep-magic-live-subtitle {
    position: sticky;
    top: 48px;
    z-index: 12;
    margin: 0 0 8px;
    padding: 7px 10px;
    border: 1px solid #c9def7;
    border-radius: 10px;
    background: rgba(239, 247, 255, .97);
    color: #173f70;
    font: 800 10px/1.4 Inter, system-ui, sans-serif;
}

/* The lined accordion is the teacher board. The old plain canvas is optional. */
.ep-magic-modal[data-board-subject="maths"] .ep-whiteboard-workspace,
.ep-magic-modal[data-board-subject="english"] .ep-whiteboard-workspace {
    grid-template-columns: minmax(0, 1fr) !important;
}

.ep-magic-modal[data-board-subject="maths"] .ep-traditional-maths-board {
    width: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    height: 100% !important;
}

.ep-board-scratch {
    min-width: 0;
    border: 1px solid #cbdcf2;
    border-radius: 14px;
    background: #f8fbff;
    overflow: hidden;
}

.ep-magic-modal__dialog {
    position: relative;
}

.ep-board-scratch:not([open]) {
    display: none !important;
}

.ep-board-scratch[open] {
    position: absolute;
    z-index: 60;
    inset: 82px 18px 54px;
    display: flex;
    flex-direction: column;
    background: #fff;
    box-shadow: 0 22px 65px rgba(14, 35, 67, .3);
}

.ep-board-scratch > summary {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 9px 12px;
    color: #174675;
    font: 900 11px/1.35 Inter, system-ui, sans-serif;
    cursor: pointer;
}

.ep-board-scratch .ep-whiteboard-tools {
    padding: 7px 8px;
    border-top: 1px solid #dce8f6;
    background: #fff;
}

.ep-board-scratch .ep-drawing-board {
    flex: 1 1 auto;
    min-height: 46vh !important;
    border: 0 !important;
    border-top: 1px solid #dce8f6 !important;
    border-radius: 0 !important;
}

.ep-board-scratch .ep-drawing-board canvas {
    min-height: 46vh !important;
}

.ep-magic-modal[data-board-subject="english"] .ep-board-scratch {
    display: none !important;
}

.ep-magic-tools-drawer {
    flex: 0 0 auto;
    min-width: 0;
    border: 1px solid #cbdcf2;
    border-radius: 13px;
    background: #f7fbff;
    font-family: Inter, system-ui, sans-serif;
}

.ep-magic-tools-drawer > summary {
    min-height: 38px;
    padding: 9px 12px;
    color: #174675;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
}

.ep-magic-tools-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    padding: 0 9px 9px;
}

.ep-magic-shared-controls {
    display: flex;
    gap: 6px;
    padding: 0 9px 7px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.ep-magic-shared-controls button {
    flex: 0 0 auto;
    min-height: 32px;
    border: 1px solid #bad2ee;
    border-radius: 10px;
    background: #fff;
    color: #174675;
    padding: 5px 9px;
    font: 800 10px/1.2 Inter, system-ui, sans-serif;
    cursor: pointer;
}

.ep-magic-shared-controls button.is-active {
    border-color: #276de1;
    background: #e8f2ff;
    color: #1557ad;
}

.ep-magic-tools-grid button,
.ep-magic-tool-output button {
    min-width: 0;
    min-height: 34px;
    border: 1px solid #bad2ee;
    border-radius: 10px;
    background: #fff;
    color: #174675;
    padding: 6px 8px;
    font: 800 10px/1.25 Inter, system-ui, sans-serif;
    cursor: pointer;
    overflow-wrap: anywhere;
}

.ep-magic-modal[data-board-subject="english"] .ep-magic-tools-grid--maths,
.ep-magic-modal[data-board-subject="maths"] .ep-magic-tools-grid--english {
    display: none !important;
}

.ep-magic-tool-output {
    margin: 0 9px 9px;
    padding: 11px;
    border: 1px solid #d5e4f6;
    border-radius: 12px;
    background: #fff;
    color: #173c69;
    font: 12px/1.55 Inter, system-ui, sans-serif;
}

.ep-magic-tool-output:empty {
    display: none;
}

.ep-magic-tool-output h4 {
    margin: 0 0 8px;
    color: #123d72;
    font-size: 14px;
}

.ep-magic-tool-output p {
    margin: 7px 0;
}

.ep-magic-bottom-bar {
    display: grid;
    flex: 0 0 auto;
    grid-template-columns: .7fr .7fr 1.35fr;
    gap: 7px;
}

.ep-magic-bottom-bar button {
    min-width: 0;
    min-height: 38px;
    border: 1px solid #bad2ee;
    border-radius: 11px;
    background: #fff;
    color: #174675;
    padding: 7px 9px;
    font: 900 10px/1.25 Inter, system-ui, sans-serif;
    cursor: pointer;
}

.ep-magic-bottom-bar button:first-child {
    border-color: #276de1;
    background: linear-gradient(135deg, #279fea, #704ef3);
    color: #fff;
}

.ep-magic-practice-host {
    margin-top: 9px;
    font-family: Inter, system-ui, sans-serif;
}

.ep-magic-practice {
    position: relative;
    padding: 10px;
    border: 1px solid #c7ddf5;
    border-radius: 12px;
    background: linear-gradient(135deg, #f5fbff, #fffaf0);
    overflow: hidden;
}

.ep-magic-practice > div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.ep-magic-practice span {
    color: #6c49d9;
    font-size: 10px;
    font-weight: 900;
}

.ep-magic-practice strong {
    color: #173c69;
    font-size: 11px;
}

.ep-magic-practice p {
    margin: 7px 0;
    color: #415c78;
    font-size: 11px;
}

.ep-magic-practice > div:nth-of-type(2) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
}

.ep-magic-practice input {
    min-width: 0;
    width: 100%;
    min-height: 36px;
    border: 1px solid #bad2ee;
    border-radius: 9px;
    background: #fff;
    color: #173c69;
    padding: 7px 9px;
}

.ep-magic-practice button {
    min-height: 36px;
    border: 0;
    border-radius: 9px;
    background: #1768dc;
    color: #fff;
    padding: 6px 12px;
    font-weight: 900;
    cursor: pointer;
}

.ep-magic-practice small {
    display: block;
    min-height: 18px;
    margin-top: 6px;
    color: #5d7188;
    font-weight: 800;
}

.ep-magic-practice small.is-correct {
    color: #12834c;
}

.ep-magic-practice small.is-hint {
    color: #9a5b00;
}

.ep-magic-practice-host.is-rewarding::after {
    content: "★  ✨  ★";
    position: absolute;
    z-index: 5;
    left: 50%;
    top: 50%;
    color: #f4b400;
    font-size: 25px;
    pointer-events: none;
    animation: epMagicReward 1.35s ease-out both;
}

@keyframes epMagicReward {
    from { opacity: 0; transform: translate(-50%, 20px) scale(.6); }
    35% { opacity: 1; }
    to { opacity: 0; transform: translate(-50%, -42px) scale(1.2); }
}

.ep-magic-auto-visual {
    margin: 9px 0 2px;
    padding: 9px;
    border: 1px dashed #bfd5ef;
    border-radius: 11px;
    background: rgba(245, 250, 255, .86);
    font-family: Inter, system-ui, sans-serif !important;
}

.ep-magic-auto-visual h4 {
    margin: 0 0 6px;
    color: #174675;
    font-size: 12px;
}

.ep-grammar-colour-line {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    padding: 9px;
    border-radius: 10px;
    background: #f8fbff;
    font-size: 14px;
    font-weight: 900;
}

.ep-grammar-colour-line span {
    padding: 3px 6px;
    border-radius: 6px;
}

.ep-grammar-colour-line .is-subject {
    background: #dceaff;
    color: #125bb4;
}

.ep-grammar-colour-line .is-verb {
    background: #dcf8e9;
    color: #087343;
}

.ep-grammar-colour-line .is-object {
    background: #eee4ff;
    color: #6330a5;
}

.ep-grammar-colour-line .is-punctuation {
    padding-inline: 1px;
    background: transparent;
    color: #42556c;
}

.ep-grammar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

.ep-grammar-legend span {
    color: #506983;
    font-size: 9px;
    font-weight: 800;
}

.ep-grammar-legend span::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 4px;
    border-radius: 50%;
    background: #3b82d5;
}

.ep-grammar-legend span:nth-child(2)::before { background: #16a064; }
.ep-grammar-legend span:nth-child(3)::before { background: #8754c2; }

.ep-live-correction {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.ep-live-correction del {
    border-radius: 7px;
    background: #ffe4e4;
    color: #b3222b;
    padding: 5px 8px;
    text-decoration-thickness: 2px;
}

.ep-live-correction ins {
    border-radius: 7px;
    background: #e1f9e9;
    color: #087343;
    padding: 5px 8px;
    text-decoration: none;
    animation: epCorrectWord .65s ease both;
}

@keyframes epCorrectWord {
    from { opacity: 0; transform: translateX(-12px); }
}

.ep-pronunciation-word {
    color: #4b34aa;
    font-size: clamp(20px, 4vw, 30px);
    font-weight: 900;
    letter-spacing: .06em;
}

.ep-sentence-built {
    display: flex;
    min-height: 46px;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 8px;
    padding: 7px;
    border: 1px dashed #9bbfe9;
    border-radius: 9px;
    background: #f7fbff;
}

.ep-sentence-pieces,
.ep-picture-words {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 7px 0;
}

.ep-picture-meaning {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: center;
    gap: 6px 10px;
    margin-top: 8px;
    padding: 9px;
    border-radius: 10px;
    background: #f4f9ff;
}

.ep-picture-meaning span {
    grid-row: 1 / 3;
    font-size: 38px;
}

.ep-picture-meaning p {
    margin: 0;
}

.ep-magic-tool-output textarea {
    display: block;
    width: 100%;
    min-height: 62px;
    margin: 7px 0;
    border: 1px solid #bad2ee;
    border-radius: 9px;
    padding: 8px;
}

.ep-conversation-subtitles {
    max-height: 180px;
    overflow: auto;
}

.ep-conversation-subtitles p {
    width: fit-content;
    max-width: 90%;
    padding: 6px 9px;
    border-radius: 9px;
}

.ep-conversation-subtitles .is-student {
    margin-left: auto;
    background: #e5f1ff;
}

.ep-conversation-subtitles .is-teacher {
    background: #f0eaff;
}

.ep-magic-column-math {
    display: grid;
    width: min(190px, 100%);
    grid-template-columns: 1fr;
    margin: 8px auto;
    color: #173c69;
    font: 800 22px/1.35 "Cambria Math", serif;
    text-align: right;
}

.ep-magic-column-math small {
    color: #d97706;
    font: 800 10px/1.2 Inter, system-ui, sans-serif;
}

.ep-magic-column-math i {
    height: 2px;
    background: #173c69;
}

.ep-magic-column-math strong {
    color: #087343;
}

.ep-magic-long-division {
    position: relative;
    width: min(260px, 100%);
    min-height: 110px;
    margin: 12px auto;
    color: #173c69;
    font: 800 26px/1.2 "Cambria Math", serif;
}

.ep-magic-long-division span {
    position: absolute;
    left: 15px;
    top: 45px;
}

.ep-magic-long-division b {
    position: absolute;
    left: 65px;
    top: 42px;
    padding: 5px 20px 5px 10px;
    border-top: 3px solid #173c69;
    border-left: 3px solid #173c69;
    border-radius: 14px 0 0;
}

.ep-magic-long-division strong {
    position: absolute;
    left: 82px;
    top: 3px;
    color: #6f42c1;
}

.ep-magic-long-division i {
    position: absolute;
    left: 65px;
    bottom: 0;
    color: #60758d;
    font: 800 11px/1.2 Inter, system-ui, sans-serif;
}

.ep-magic-factor-ladder {
    display: grid;
    width: min(210px, 100%);
    margin: 8px auto;
}

.ep-magic-factor-ladder span {
    display: grid;
    grid-template-columns: 55px 1fr;
}

.ep-magic-factor-ladder b,
.ep-magic-factor-ladder i {
    padding: 5px 9px;
    color: #173c69;
    font-style: normal;
    text-align: right;
}

.ep-magic-factor-ladder b {
    border-right: 2px solid #173c69;
}

.ep-magic-factor-ladder i {
    text-align: left;
}

.ep-magic-fraction-pizza {
    display: grid;
    width: 82px;
    height: 82px;
    margin: 8px auto;
    place-items: center;
    border: 4px solid #d27c23;
    border-radius: 50%;
    background: conic-gradient(#f6a73b var(--ep-fill), #fff1d5 0);
}

.ep-magic-fraction-pizza span {
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .14));
    font-size: 46px;
}

.ep-magic-number-line {
    position: relative;
    display: grid;
    grid-template-columns: repeat(11, 1fr);
    margin: 38px 8px 30px;
    border-top: 3px solid #173c69;
}

.ep-magic-number-line span {
    position: relative;
}

.ep-magic-number-line i {
    position: absolute;
    left: 50%;
    top: -8px;
    width: 2px;
    height: 15px;
    background: #173c69;
}

.ep-magic-number-line b {
    position: absolute;
    left: 50%;
    top: 11px;
    color: #173c69;
    font-size: 9px;
    transform: translateX(-50%);
}

.ep-magic-number-line em {
    position: absolute;
    top: -26px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ee5c4d;
    box-shadow: 0 0 0 5px rgba(238, 92, 77, .13);
    transform: translateX(-50%);
    animation: epNumberPoint .8s ease both;
}

@keyframes epNumberPoint {
    from { left: 50%; opacity: .2; }
}

.ep-magic-geometry,
.ep-magic-graph {
    display: block;
    width: min(420px, 100%);
    max-height: 190px;
    margin: 6px auto;
    border-radius: 10px;
    background: #fff;
}

.ep-magic-geometry line,
.ep-magic-geometry path,
.ep-magic-graph path {
    fill: none;
    stroke: #6f42c1;
    stroke-width: 4;
}

.ep-magic-geometry path {
    stroke-width: 3;
}

.ep-magic-geometry text,
.ep-magic-graph text {
    fill: #5a328f;
    font: 800 14px Inter, system-ui, sans-serif;
}

.ep-magic-graph path:first-child {
    stroke: #8ca2bb;
    stroke-width: 2;
}

.ep-magic-graph .plot {
    stroke: #1768dc;
}

.ep-magic-graph circle {
    fill: #ee5c4d;
}

.ep-magic-mistake-line {
    border-left: 4px solid #ef9e24;
    background: #fff7df;
    padding: 8px 10px;
    animation: epMistakeGlow .85s ease-in-out 2 alternate;
}

@keyframes epMistakeGlow {
    to { box-shadow: 0 0 0 5px rgba(239, 158, 36, .13); }
}

.is-magic-replaying .ep-board-step-arrive,
.is-magic-replaying .ep-board-question,
.is-magic-replaying .ep-math-step {
    animation: epMagicReplay 1s ease both;
}

@keyframes epMagicReplay {
    from { opacity: .2; clip-path: inset(0 100% 0 0); }
    to { opacity: 1; clip-path: inset(0 0 0 0); }
}

/* Standalone Maths teacher integration. */
.ep-math-whiteboard--classroom {
    position: relative !important;
}

.ep-math-whiteboard--classroom > .ep-magic-page-nav {
    top: 0;
}

.ep-math-classroom-board > .ep-magic-tools-drawer {
    margin-top: 8px;
}

.ep-math-writing-pen {
    position: absolute !important;
    z-index: 20 !important;
    left: 14px !important;
    right: auto !important;
    width: 48px !important;
    height: 28px !important;
    opacity: 0;
    font-size: 0 !important;
    pointer-events: none;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .18));
    transition: top .28s ease !important;
}

.ep-math-writing-pen::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 15px;
    width: 43px;
    height: 5px;
    border-radius: 999px;
    background: linear-gradient(90deg, #195db7 0 72%, #e5edf7 72% 88%, #26374b 88%);
    transform: rotate(-24deg);
    transform-origin: right center;
}

.ep-math-writing-pen::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 25px;
    height: 18px;
    border-radius: 55% 45% 58% 42%;
    background: linear-gradient(145deg, #f5c6a2, #dc966d);
    box-shadow: inset -3px -2px 0 rgba(119, 68, 40, .11);
    transform: rotate(18deg);
}

.ep-math-writing-pen.is-writing {
    opacity: 1 !important;
    animation: epHumanWritingTravel var(--ep-pen-duration, 900ms) linear 1 !important;
}

@keyframes epHumanWritingTravel {
    0% { transform: translateX(0) translateY(0); }
    20% { transform: translateX(var(--ep-pen-travel-20, 48px)) translateY(2px) rotate(1deg); }
    45% { transform: translateX(var(--ep-pen-travel-45, 108px)) translateY(-1px) rotate(-1deg); }
    70% { transform: translateX(var(--ep-pen-travel-70, 168px)) translateY(2px) rotate(1deg); }
    100% { transform: translateX(var(--ep-pen-travel, 240px)) translateY(0); }
}

/* Kids story tools: four compact controls; expanded tools become a popup drawer. */
@media (max-width: 760px) {
    .ep-kids-player__shell {
        overflow: visible !important;
    }

    .ep-kids-player__tools {
        position: relative !important;
        z-index: 30 !important;
        display: grid !important;
        width: 100% !important;
        max-width: 100% !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 5px !important;
        padding: 6px max(7px, env(safe-area-inset-right)) 6px max(7px, env(safe-area-inset-left)) !important;
        overflow: visible !important;
    }

    .ep-kids-player__tools > button,
    .ep-kids-player__more {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 42px !important;
        margin: 0 !important;
    }

    .ep-kids-player__tools > button {
        display: grid !important;
        place-items: center !important;
        padding: 5px 3px !important;
        font-size: 9px !important;
        line-height: 1.15 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    .ep-kids-player__more {
        position: static !important;
        border-radius: 11px !important;
        background: #f8faff !important;
    }

    .ep-kids-player__more > summary {
        display: grid !important;
        min-height: 42px !important;
        place-items: center !important;
        padding: 5px 3px !important;
        color: #17386f !important;
        font-size: 9px !important;
        line-height: 1.15 !important;
        text-align: center !important;
        overflow-wrap: anywhere !important;
        list-style: none !important;
    }

    .ep-kids-player__more > summary::-webkit-details-marker {
        display: none;
    }

    .ep-kids-player__more > div {
        position: absolute !important;
        z-index: 100 !important;
        left: max(7px, env(safe-area-inset-left)) !important;
        right: max(7px, env(safe-area-inset-right)) !important;
        bottom: calc(100% + 7px) !important;
        display: grid !important;
        max-height: min(48vh, 340px) !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
        padding: 10px !important;
        border: 1px solid #cbdcf4 !important;
        border-radius: 15px !important;
        background: rgba(255, 255, 255, .98) !important;
        box-shadow: 0 18px 50px rgba(24, 49, 89, .25) !important;
        overflow: auto !important;
    }

    .ep-kids-player__more:not([open]) > div {
        display: none !important;
    }

    .ep-kids-player__more > div button {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 44px !important;
        padding: 6px !important;
        font-size: 10px !important;
        line-height: 1.2 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }
}

@media (max-width: 900px) {
    .ep-magic-modal__dialog {
        gap: 6px !important;
    }

    .ep-magic-modal[data-board-subject="maths"] .ep-board-mobile-panel--question:not([open]),
    .ep-magic-modal[data-board-subject="maths"] .ep-board-mobile-panel--teacher:not([open]) {
        flex: 0 0 auto !important;
    }

    .ep-magic-modal .ep-whiteboard-workspace {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .ep-magic-modal .ep-traditional-maths-board {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 7px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .ep-magic-modal[data-board-subject="maths"] .ep-board-scratch {
        position: absolute;
        z-index: 50;
        inset: 62px 7px 50px;
        max-height: none;
        box-shadow: 0 18px 48px rgba(14, 35, 67, .25);
        overflow: auto;
    }

    .ep-magic-tools-drawer {
        position: relative;
        z-index: 35;
    }

    .ep-magic-tools-drawer > summary {
        min-height: 35px;
        padding: 7px 10px;
    }

    .ep-magic-tools-grid {
        display: flex;
        gap: 6px;
        padding: 0 7px 7px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .ep-magic-tools-grid button {
        flex: 0 0 122px;
    }

    .ep-magic-tool-output {
        max-height: 37vh;
        margin: 0 7px 7px;
        overflow: auto;
    }

    .ep-magic-bottom-bar {
        position: sticky;
        z-index: 34;
        bottom: 0;
    }

    .ep-magic-page-nav {
        grid-template-columns: 32px auto 32px minmax(0, 1fr);
        gap: 4px;
        padding: 4px;
    }

    .ep-magic-page-nav [data-ep-magic-download] {
        grid-column: 1 / -1;
        min-height: 28px;
    }

    .ep-magic-teacher-dock {
        min-width: 0;
        grid-template-columns: 29px minmax(0, 1fr);
        padding: 3px 7px 3px 3px;
    }

    .ep-magic-teacher-avatar {
        width: 29px;
        height: 29px;
        font-size: 16px;
    }

    .ep-board-live-teacher .ep-magic-teacher-dock {
        grid-column: 1 / -1;
        width: 100%;
        margin-top: 4px;
    }

    .ep-math-classroom-board__head .ep-magic-teacher-dock {
        width: auto;
        max-width: 170px;
    }

    .ep-math-whiteboard--classroom {
        min-height: 60vh !important;
        max-height: 70vh !important;
    }

    .ep-math-board-toolbar,
    .ep-math-board-footer {
        width: 100%;
        max-width: 100%;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }

    .ep-math-board-toolbar button,
    .ep-math-board-footer button {
        flex: 0 0 auto !important;
        min-height: 34px !important;
        padding: 6px 9px !important;
        font-size: 9px !important;
    }
}

@media (max-width: 480px) {
    .ep-magic-page-nav {
        top: -1px;
    }

    .ep-magic-page-nav select,
    .ep-magic-page-nav button,
    .ep-magic-page-nav > span {
        font-size: 9px;
    }

    .ep-magic-bottom-bar button {
        min-height: 36px;
        padding: 5px;
        font-size: 9px;
    }

    .ep-magic-practice > div:first-child {
        align-items: flex-start;
        flex-direction: column;
    }

    .ep-magic-practice > div:nth-of-type(2) {
        grid-template-columns: minmax(0, 1fr) 65px;
    }

    .ep-math-classroom-board {
        padding: 6px !important;
    }

    .ep-math-whiteboard--classroom {
        min-height: 62vh !important;
        max-height: 72vh !important;
        padding: 9px 7px 58px !important;
    }

    .ep-kids-player__tools > button,
    .ep-kids-player__more > summary {
        font-size: 8px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ep-magic-board-pointer,
    .ep-math-writing-pen,
    .ep-magic-teacher-avatar,
    .ep-magic-teacher-beam,
    .ep-magic-auto-visual * {
        animation: none !important;
        transition: none !important;
    }
}


/* v1.72.28 dedicated action routing feedback */
.ep-magic-modal .ep-smart-focus-target{
    outline:3px solid rgba(35,111,219,.28)!important;
    outline-offset:3px!important;
    border-radius:10px!important;
}

/* v1.72.29 — clean question-first flow for Live Maths and English boards */
.ep-magic-modal[data-ep-whiteboard-modal] .ep-magic-modal__dialog{
    min-width:0!important;
}
.ep-magic-modal[data-ep-whiteboard-modal] .ep-board-intake{
    display:flex;
    flex:1 1 auto;
    min-width:0;
    min-height:0;
    flex-direction:column;
    justify-content:center;
    gap:14px;
    width:min(860px,100%);
    margin:auto;
    padding:clamp(16px,3vw,34px);
    border:1px solid #d6e4f5;
    border-radius:22px;
    background:#fff;
    box-shadow:0 14px 36px rgba(20,53,91,.10);
    overflow:auto;
}
.ep-magic-modal[data-board-stage="lesson"] .ep-board-intake{
    display:none!important;
}
.ep-magic-modal[data-board-stage="intake"] .ep-board-lesson-shell{
    display:none!important;
}
.ep-magic-modal[data-board-stage="lesson"] .ep-board-lesson-shell{
    display:flex!important;
}
.ep-board-intake__hero{
    display:flex;
    align-items:center;
    gap:14px;
}
.ep-board-intake__icon{
    display:grid;
    flex:0 0 58px;
    width:58px;
    height:58px;
    place-items:center;
    border-radius:18px;
    background:#edf5ff;
    font-size:28px;
}
.ep-board-intake__hero strong{
    display:block;
    color:#142f53;
    font-size:clamp(20px,3vw,30px);
    line-height:1.2;
}
.ep-board-intake__hero p{
    margin:5px 0 0;
    color:#5c728c;
    font-size:14px;
    line-height:1.5;
}
.ep-board-intake__label{
    color:#244d78;
    font-size:13px;
    font-weight:900;
}
.ep-board-intake textarea[data-ep-board-question]{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    min-height:150px!important;
    resize:vertical!important;
    padding:16px!important;
    border:2px solid #bfd3ee!important;
    border-radius:16px!important;
    background:#fbfdff!important;
    color:#142f53!important;
    font:700 17px/1.55 Inter,system-ui,sans-serif!important;
    box-shadow:none!important;
    outline:none!important;
}
.ep-board-intake textarea[data-ep-board-question]:focus{
    border-color:#2b73df!important;
    box-shadow:0 0 0 4px rgba(43,115,223,.12)!important;
}
.ep-board-intake textarea[data-ep-board-question].is-input-needed{
    border-color:#dc3e50!important;
    box-shadow:0 0 0 4px rgba(220,62,80,.12)!important;
}
.ep-board-intake__actions{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:9px;
}
.ep-board-intake__actions button{
    min-width:0!important;
    min-height:48px!important;
    padding:10px 8px!important;
    border:1px solid #bdd2ed!important;
    border-radius:13px!important;
    background:#fff!important;
    color:#174675!important;
    font-size:13px!important;
    font-weight:900!important;
    cursor:pointer;
}
.ep-board-intake__actions button.is-primary{
    border-color:#276fe0!important;
    background:linear-gradient(135deg,#279fea,#704ef3)!important;
    color:#fff!important;
}
.ep-board-intake__note{
    color:#62778e;
    font-size:12px;
    line-height:1.45;
    text-align:center;
}
.ep-board-lesson-shell{
    flex:1 1 auto;
    min-width:0;
    min-height:0;
    flex-direction:column;
    gap:8px;
    overflow:hidden;
}
.ep-board-lesson-toolbar{
    display:flex!important;
    flex:0 0 auto;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    min-width:0;
    padding:7px 9px;
    border:1px solid #d2e1f3;
    border-radius:14px;
    background:#fff;
}
.ep-board-lesson-status{
    display:grid;
    min-width:180px;
    grid-template-columns:12px minmax(0,1fr);
    align-items:center;
    gap:7px;
}
.ep-board-lesson-status strong,.ep-board-lesson-status small{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.ep-board-lesson-status strong{color:#183f68;font-size:12px}
.ep-board-lesson-status small{margin-top:2px;color:#657a91;font-size:10px}
.ep-board-lesson-actions{
    display:flex;
    min-width:0;
    gap:6px;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:thin;
    -webkit-overflow-scrolling:touch;
}
.ep-board-lesson-actions button{
    flex:0 0 auto!important;
    min-height:34px!important;
    padding:6px 10px!important;
    border:1px solid #c5d7ed!important;
    border-radius:10px!important;
    background:#fff!important;
    color:#174675!important;
    font-size:10px!important;
    font-weight:900!important;
    white-space:nowrap!important;
    cursor:pointer;
}
.ep-board-lesson-actions button.is-primary{
    border-color:#286fdc!important;
    background:#1768dc!important;
    color:#fff!important;
}
.ep-board-lesson-actions .ep-board-end-session{
    border-color:#f0c5ca!important;
    color:#a62a3a!important;
    background:#fff8f9!important;
}
.ep-magic-modal[data-ep-whiteboard-modal] .ep-whiteboard-workspace{
    position:relative!important;
    display:block!important;
    flex:1 1 auto!important;
    min-width:0!important;
    min-height:0!important;
    overflow:hidden!important;
}
.ep-magic-modal[data-ep-whiteboard-modal] .ep-traditional-maths-board{
    width:100%!important;
    height:100%!important;
    min-width:0!important;
    min-height:0!important;
    max-height:none!important;
    padding:14px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch;
}
.ep-magic-modal[data-ep-whiteboard-modal] .ep-board-scratch{
    position:absolute!important;
    z-index:70!important;
    inset:8px!important;
    display:none!important;
    margin:0!important;
    max-height:none!important;
    overflow:auto!important;
    background:#fff!important;
    box-shadow:0 18px 48px rgba(14,35,67,.25)!important;
}
.ep-magic-modal[data-ep-whiteboard-modal] .ep-board-scratch[open]{
    display:block!important;
}
.ep-magic-modal[data-ep-whiteboard-modal] .ep-board-history-head,
.ep-magic-modal[data-ep-whiteboard-modal] .ep-magic-page-nav,
.ep-magic-modal[data-ep-whiteboard-modal] .ep-magic-live-subtitle{
    position:relative!important;
    top:auto!important;
    z-index:2!important;
}
.ep-magic-modal[data-ep-whiteboard-modal] .ep-magic-page-nav{
    margin:0 0 10px!important;
}
.ep-magic-modal[data-ep-whiteboard-modal] [data-ep-whiteboard-steps]{
    position:relative!important;
    z-index:1!important;
    margin-top:0!important;
    padding-bottom:30px!important;
    overflow:visible!important;
}
.ep-magic-modal[data-ep-whiteboard-modal] .ep-board-turn,
.ep-magic-modal[data-ep-whiteboard-modal] .ep-board-turn details,
.ep-magic-modal[data-ep-whiteboard-modal] .ep-board-turn summary,
.ep-magic-modal[data-ep-whiteboard-modal] .ep-board-turn__answer{
    position:relative!important;
    max-width:100%!important;
    min-width:0!important;
}
.ep-magic-modal[data-ep-whiteboard-modal] .ep-board-turn__steps{
    padding-left:24px!important;
    font-size:clamp(16px,2.1vw,20px)!important;
    line-height:1.58!important;
}
.ep-magic-modal[data-ep-whiteboard-modal] .ep-magic-tools-drawer,
.ep-magic-modal[data-ep-whiteboard-modal] .ep-magic-bottom-bar{
    flex:0 0 auto!important;
}

@media(max-width:900px){
    .ep-magic-modal[data-ep-whiteboard-modal] .ep-magic-modal__dialog{
        height:100dvh!important;
        max-height:none!important;
        gap:6px!important;
        overflow:hidden!important;
    }
    .ep-magic-modal[data-ep-whiteboard-modal] .ep-board-intake{
        width:100%!important;
        justify-content:flex-start!important;
        margin:0!important;
        padding:16px 12px!important;
        border-radius:16px!important;
        overflow-y:auto!important;
    }
    .ep-board-intake__hero{
        align-items:flex-start;
        gap:10px;
    }
    .ep-board-intake__icon{
        flex-basis:46px;
        width:46px;
        height:46px;
        border-radius:14px;
        font-size:23px;
    }
    .ep-board-intake__hero strong{font-size:20px}
    .ep-board-intake__hero p{font-size:12px}
    .ep-board-intake textarea[data-ep-board-question]{
        min-height:30vh!important;
        max-height:42vh!important;
        font-size:16px!important;
    }
    .ep-board-intake__actions{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:8px;
    }
    .ep-board-intake__actions button{
        min-height:50px!important;
        font-size:12px!important;
    }
    .ep-board-lesson-toolbar{
        display:block!important;
        padding:6px!important;
        border-radius:12px!important;
    }
    .ep-board-lesson-status{
        width:100%;
        min-width:0;
        margin-bottom:5px;
    }
    .ep-board-lesson-actions{
        width:100%;
        gap:5px;
    }
    .ep-board-lesson-actions button{
        min-height:32px!important;
        padding:5px 8px!important;
        font-size:9px!important;
    }
    .ep-magic-modal[data-ep-whiteboard-modal] .ep-whiteboard-workspace{
        flex:1 1 auto!important;
        min-height:0!important;
        overflow:hidden!important;
    }
    .ep-magic-modal[data-ep-whiteboard-modal] .ep-traditional-maths-board{
        height:100%!important;
        min-height:0!important;
        max-height:none!important;
        padding:8px!important;
    }
    .ep-magic-modal[data-ep-whiteboard-modal] .ep-board-history-head{
        margin-bottom:6px!important;
    }
    .ep-magic-modal[data-ep-whiteboard-modal] .ep-board-history-head h3{
        font-size:14px!important;
    }
    .ep-magic-modal[data-ep-whiteboard-modal] .ep-magic-page-nav{
        position:relative!important;
        top:auto!important;
        grid-template-columns:30px auto 30px minmax(0,1fr)!important;
        margin-bottom:8px!important;
        padding:4px!important;
        box-shadow:none!important;
    }
    .ep-magic-modal[data-ep-whiteboard-modal] .ep-magic-live-subtitle{
        position:relative!important;
        top:auto!important;
        margin-bottom:6px!important;
    }
    .ep-magic-modal[data-ep-whiteboard-modal] .ep-board-turn__steps{
        padding-left:20px!important;
        font-size:clamp(15px,4.3vw,18px)!important;
        line-height:1.52!important;
    }
    .ep-magic-modal[data-ep-whiteboard-modal] .ep-magic-tools-drawer>summary{
        min-height:34px!important;
        padding:6px 9px!important;
        font-size:11px!important;
    }
    .ep-magic-modal[data-ep-whiteboard-modal] .ep-magic-bottom-bar{
        display:grid!important;
        grid-template-columns:repeat(3,minmax(0,1fr))!important;
        gap:6px!important;
        padding-top:0!important;
    }
    .ep-magic-modal[data-ep-whiteboard-modal] .ep-magic-bottom-bar button{
        min-width:0!important;
        min-height:38px!important;
        padding:6px 4px!important;
        font-size:9px!important;
        white-space:normal!important;
    }
}

@media(max-width:420px){
    .ep-magic-modal[data-ep-whiteboard-modal] .ep-magic-modal__head small{
        display:none!important;
    }
    .ep-board-intake textarea[data-ep-board-question]{
        min-height:27vh!important;
    }
    .ep-board-lesson-status small{
        max-width:78vw;
    }
    .ep-magic-modal[data-ep-whiteboard-modal] .ep-magic-page-nav [data-ep-magic-download]{
        grid-column:1/-1!important;
    }
}


/* v1.72.30 — true full-height lesson board and reusable full-answer viewer */
.ep-magic-modal[data-ep-whiteboard-modal][data-board-stage="lesson"] .ep-magic-modal__dialog{
    display:flex!important;
    flex-direction:column!important;
    min-height:0!important;
}
.ep-magic-modal[data-ep-whiteboard-modal][data-board-stage="lesson"] .ep-magic-modal__head,
.ep-magic-modal[data-ep-whiteboard-modal][data-board-stage="lesson"] .ep-board-lesson-toolbar,
.ep-magic-modal[data-ep-whiteboard-modal][data-board-stage="lesson"] .ep-magic-tools-drawer,
.ep-magic-modal[data-ep-whiteboard-modal][data-board-stage="lesson"] .ep-magic-bottom-bar{
    flex:0 0 auto!important;
}
.ep-magic-modal[data-ep-whiteboard-modal][data-board-stage="lesson"] .ep-board-lesson-shell{
    display:flex!important;
    flex:1 1 0!important;
    width:100%!important;
    height:auto!important;
    min-width:0!important;
    min-height:0!important;
    max-height:none!important;
    overflow:hidden!important;
}
.ep-magic-modal[data-ep-whiteboard-modal][data-board-stage="lesson"] .ep-whiteboard-workspace{
    position:relative!important;
    display:block!important;
    flex:1 1 0!important;
    width:100%!important;
    height:auto!important;
    min-width:0!important;
    min-height:0!important;
    max-height:none!important;
    overflow:hidden!important;
}
.ep-magic-modal[data-ep-whiteboard-modal][data-board-stage="lesson"] .ep-traditional-maths-board{
    position:absolute!important;
    inset:0!important;
    width:auto!important;
    height:auto!important;
    min-width:0!important;
    min-height:100%!important;
    max-width:none!important;
    max-height:none!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
}
.ep-magic-modal [data-ep-view-full-answer][hidden],
.ep-math-teacher [data-ep-view-full-answer][hidden]{
    display:none!important;
}

.ep-full-answer-viewer{
    position:fixed;
    inset:0;
    z-index:1000005;
    display:grid;
    place-items:center;
    padding:12px;
    background:rgba(4,14,30,.84);
}
.ep-full-answer-viewer[hidden]{display:none!important}
.ep-full-answer-viewer__dialog{
    display:flex;
    width:min(1180px,100%);
    height:min(94dvh,940px);
    min-width:0;
    min-height:0;
    flex-direction:column;
    overflow:hidden;
    border:1px solid #d3e1f1;
    border-radius:22px;
    background:#f8fbff;
    box-shadow:0 30px 90px rgba(0,0,0,.42);
}
.ep-full-answer-viewer__head{
    display:flex;
    flex:0 0 auto;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    padding:12px 14px;
    border-bottom:1px solid #dbe7f5;
    background:#fff;
}
.ep-full-answer-viewer__head>div{min-width:0}
.ep-full-answer-viewer__head strong{
    display:block;
    overflow:hidden;
    color:#153b66;
    font:900 18px/1.3 Inter,system-ui,sans-serif;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.ep-full-answer-viewer__head small{
    display:block;
    margin-top:3px;
    color:#637990;
    font:600 11px/1.4 Inter,system-ui,sans-serif;
}
.ep-full-answer-viewer__head button{
    display:grid;
    flex:0 0 44px;
    width:44px;
    height:44px;
    place-items:center;
    padding:0;
    border:0;
    border-radius:50%;
    background:#102033;
    color:#fff;
    font:700 28px/1 Arial,sans-serif;
    cursor:pointer;
}
.ep-full-answer-viewer__content{
    flex:1 1 auto;
    min-width:0;
    min-height:0;
    padding:clamp(16px,3vw,34px);
    overflow:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    background:#fff;
}
.ep-full-answer-viewer__answer{
    width:min(920px,100%);
    margin:0 auto;
    color:#142f53;
    font-size:clamp(16px,2.2vw,21px)!important;
    line-height:1.65!important;
}
.ep-full-answer-viewer[data-subject="maths"] .ep-full-answer-viewer__answer{
    background-image:linear-gradient(#e6eef8 1px,transparent 1px);
    background-size:100% 38px;
    font-family:Arial,"Noto Sans Devanagari",sans-serif!important;
}
.ep-full-answer-viewer__answer :is(p,li,div,span,code){
    max-width:100%!important;
    overflow-wrap:anywhere!important;
}
.ep-full-answer-viewer__answer code{
    white-space:pre-wrap!important;
    font-size:1.02em!important;
}
.ep-full-answer-viewer__answer button,
.ep-full-answer-viewer__answer input,
.ep-full-answer-viewer__answer textarea,
.ep-full-answer-viewer__answer select{display:none!important}
body.ep-full-answer-open{overflow:hidden!important}

@media(max-width:900px){
    .ep-magic-modal[data-ep-whiteboard-modal][data-board-stage="lesson"] .ep-magic-modal__dialog{
        height:100dvh!important;
        max-height:none!important;
    }
    .ep-magic-modal[data-ep-whiteboard-modal][data-board-stage="lesson"] .ep-board-lesson-shell{
        min-height:0!important;
    }
    .ep-magic-modal[data-ep-whiteboard-modal][data-board-stage="lesson"] .ep-whiteboard-workspace{
        min-height:0!important;
        height:auto!important;
    }
    .ep-magic-modal[data-ep-whiteboard-modal][data-board-stage="lesson"] .ep-traditional-maths-board,
    .ep-magic-modal[data-ep-whiteboard-modal][data-board-stage="lesson"][data-board-subject="maths"] .ep-traditional-maths-board,
    .ep-magic-modal[data-ep-whiteboard-modal][data-board-stage="lesson"][data-board-subject="english"] .ep-traditional-maths-board{
        inset:0!important;
        width:auto!important;
        height:auto!important;
        min-height:100%!important;
        max-height:none!important;
        padding:10px 9px 34px!important;
    }
    .ep-full-answer-viewer{padding:0;background:#f8fbff}
    .ep-full-answer-viewer__dialog{
        width:100vw;
        height:100dvh;
        max-height:none;
        border:0;
        border-radius:0;
    }
    .ep-full-answer-viewer__head{padding:calc(9px + env(safe-area-inset-top)) 10px 9px}
    .ep-full-answer-viewer__head strong{font-size:15px}
    .ep-full-answer-viewer__head small{font-size:10px}
    .ep-full-answer-viewer__content{padding:16px 12px calc(24px + env(safe-area-inset-bottom))}
    .ep-full-answer-viewer__answer{font-size:17px!important;line-height:1.6!important}
}

@media(max-width:420px){
    .ep-magic-modal[data-ep-whiteboard-modal][data-board-stage="lesson"] .ep-board-lesson-actions button{
        min-height:34px!important;
    }
    .ep-full-answer-viewer__head small{display:none}
}


/* v1.72.31 — compact answer toggle and readable mobile summary layout */
.ep-magic-modal[data-ep-whiteboard-modal] .ep-board-turn summary{
    display:grid!important;
    grid-template-columns:16px minmax(0,1fr) max-content!important;
    grid-template-areas:
        "arrow badge toggle"
        "arrow question toggle"!important;
    column-gap:7px!important;
    row-gap:4px!important;
    align-items:center!important;
}
.ep-magic-modal[data-ep-whiteboard-modal] .ep-board-turn summary::before{
    grid-area:arrow!important;
    align-self:center!important;
}
.ep-magic-modal[data-ep-whiteboard-modal] .ep-board-turn summary>span{
    grid-area:badge!important;
    justify-self:start!important;
}
.ep-magic-modal[data-ep-whiteboard-modal] .ep-board-turn summary>strong{
    grid-area:question!important;
    min-width:0!important;
}
.ep-magic-modal[data-ep-whiteboard-modal] .ep-board-turn summary>small{
    grid-area:toggle!important;
    display:inline-flex!important;
    width:max-content!important;
    max-width:68px!important;
    min-height:24px!important;
    align-items:center!important;
    justify-content:center!important;
    align-self:center!important;
    padding:3px 7px!important;
    border:1px solid #c9dbee!important;
    border-radius:999px!important;
    background:#fff!important;
    color:#55718e!important;
    font:800 8px/1 Inter,system-ui,sans-serif!important;
    white-space:nowrap!important;
    writing-mode:horizontal-tb!important;
    text-orientation:mixed!important;
    overflow:hidden!important;
}
@media(max-width:520px){
    .ep-magic-modal[data-ep-whiteboard-modal] .ep-board-turn summary{
        grid-template-columns:14px minmax(0,1fr) 42px!important;
        padding:8px!important;
    }
    .ep-magic-modal[data-ep-whiteboard-modal] .ep-board-turn summary>small{
        width:42px!important;
        max-width:42px!important;
        padding:3px 4px!important;
        font-size:0!important;
    }
    .ep-magic-modal[data-ep-whiteboard-modal] .ep-board-turn details[open]>summary>small::after{
        content:"Hide";
        font:800 8px/1 Inter,system-ui,sans-serif;
    }
    .ep-magic-modal[data-ep-whiteboard-modal] .ep-board-turn details:not([open])>summary>small::after{
        content:"Open";
        font:800 8px/1 Inter,system-ui,sans-serif;
    }
}


/* v1.72.60 — Astra sticky-header isolation for full-screen Easy Padhai boards. */
html.ep-whiteboard-is-open,
body.ep-whiteboard-is-open{
    overflow:hidden!important;
}
body.ep-whiteboard-is-open .ep-magic-modal[data-ep-whiteboard-modal]{
    position:fixed!important;
    inset:0!important;
    top:0!important;
    right:0!important;
    bottom:0!important;
    left:0!important;
    width:100vw!important;
    height:100dvh!important;
    max-width:none!important;
    max-height:none!important;
    margin:0!important;
    z-index:2147483600!important;
}
body.ep-whiteboard-is-open .ep-magic-modal[data-ep-whiteboard-modal] .ep-magic-modal__dialog{
    position:fixed!important;
    inset:0!important;
    top:0!important;
    width:100vw!important;
    height:100dvh!important;
    max-width:none!important;
    max-height:none!important;
    margin:0!important;
    border-radius:0!important;
    z-index:2147483601!important;
}
/* Astra creates desktop/mobile/sticky header wrappers with independent z-index values.
   Hide only while the full-screen board is open; all headers return automatically on close. */
body.ep-whiteboard-is-open #masthead,
body.ep-whiteboard-is-open #ast-desktop-header,
body.ep-whiteboard-is-open #ast-mobile-header,
body.ep-whiteboard-is-open .ast-mobile-header-wrap,
body.ep-whiteboard-is-open .main-header-bar-wrap,
body.ep-whiteboard-is-open .ast-primary-header-bar,
body.ep-whiteboard-is-open .ast-above-header-wrap,
body.ep-whiteboard-is-open .ast-below-header-wrap,
body.ep-whiteboard-is-open .ast-sticky-active,
body.ep-whiteboard-is-open .ast-sticky-shrunk,
body.ep-whiteboard-is-open .ast-header-sticked,
body.ep-whiteboard-is-open .site-header{
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translateY(-110%)!important;
}
@supports not (height:100dvh){
    body.ep-whiteboard-is-open .ep-magic-modal[data-ep-whiteboard-modal],
    body.ep-whiteboard-is-open .ep-magic-modal[data-ep-whiteboard-modal] .ep-magic-modal__dialog{height:100vh!important}
}