/* ==========================================================
   BELAJAREDUTECH
   BILANGAN DAN OPERASI - MATEMATIKA KELAS 3
========================================================== */

.number-operation-grade-three-page {
    --number-accent: #0f766e;
    --number-accent-dark: #115e59;
    --number-accent-soft: #f0fdfa;
    --number-secondary: #2563eb;
    --number-purple: #7c3aed;
}



/* ==========================================================
   HERO
========================================================== */

.number-operation-hero {
    background:
        radial-gradient(
            circle at 86% 18%,
            rgba(15, 118, 110, 0.12),
            transparent 31%
        ),
        radial-gradient(
            circle at 12% 88%,
            rgba(37, 99, 235, 0.08),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #f7fffd,
            #ffffff
        );
}


.number-operation-hero-card {
    min-height: 420px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    padding: 38px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--number-accent),
            var(--number-secondary)
        );

    border-radius:
        var(--radius-extra-large, 28px);

    box-shadow:
        var(
            --shadow-large,
            0 30px 80px rgba(15, 23, 42, 0.18)
        );

    text-align: center;
}


.number-operation-hero-label {
    margin-bottom: 20px;

    color:
        rgba(255, 255, 255, 0.7);

    font-size: 0.68rem;

    font-weight: 850;

    text-transform: uppercase;

    letter-spacing: 0.08em;
}


.hero-number {
    margin-bottom: 22px;

    font-size:
        clamp(
            3.5rem,
            8vw,
            5.5rem
        );

    font-weight: 900;

    line-height: 1;

    letter-spacing: 0.08em;
}


.hero-place-grid {
    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 8px;

    margin-bottom: 18px;
}


.hero-place-grid > div {
    padding: 14px;

    background:
        rgba(255, 255, 255, 0.09);

    border:
        1px solid
        rgba(255, 255, 255, 0.12);

    border-radius: 12px;
}


.hero-place-grid span,
.hero-place-grid strong {
    display: block;
}


.hero-place-grid span {
    margin-bottom: 4px;

    color:
        rgba(255, 255, 255, 0.65);

    font-size: 0.58rem;
}


.hero-place-grid strong {
    font-size: 0.9rem;
}


.hero-expanded {
    padding: 13px 18px;

    color:
        var(--number-accent-dark);

    background: #ffffff;

    border-radius:
        var(--radius-medium, 14px);

    font-size: 0.82rem;

    font-weight: 900;
}



/* ==========================================================
   INTRO
========================================================== */

.number-intro-visual {
    min-height: 350px;

    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items: center;

    gap: 16px;

    padding: 35px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #0f766e,
            #0891b2
        );
}


.number-intro-visual > div:not(
    .number-intro-compare
) {
    min-height: 170px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    padding: 20px;

    background:
        rgba(255, 255, 255, 0.09);

    border:
        1px solid
        rgba(255, 255, 255, 0.12);

    border-radius:
        var(--radius-medium, 14px);
}


.number-intro-visual strong {
    margin-bottom: 8px;

    font-size: 2rem;
}


.number-intro-visual span {
    color:
        rgba(255, 255, 255, 0.7);

    font-size: 0.65rem;
}


.number-intro-compare {
    font-size: 1.5rem;

    font-weight: 900;
}



/* ==========================================================
   PLACE VALUE
========================================================== */

.number-place-section {
    background:
        var(--color-background, #ffffff);
}


.number-place-table {
    max-width: 800px;

    overflow: hidden;

    margin:
        0 auto 20px;

    background: #ffffff;

    border:
        1px solid
        var(--color-border, #e2e8f0);

    border-radius:
        var(--radius-extra-large, 28px);

    box-shadow:
        var(
            --shadow-small,
            0 8px 30px rgba(15, 23, 42, 0.05)
        );
}


.number-place-row {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);
}


.number-place-heading span {
    padding: 14px;

    color: #ffffff;

    background:
        var(--number-accent);

    border-right:
        1px solid
        rgba(255, 255, 255, 0.18);

    text-align: center;

    font-size: 0.68rem;

    font-weight: 850;
}


.number-place-heading span:last-child {
    border-right: 0;
}


.number-place-digits strong {
    padding: 28px;

    color:
        var(--number-accent);

    border-right:
        1px solid
        var(--color-border, #e2e8f0);

    text-align: center;

    font-size: 3rem;
}


.number-place-digits strong:last-child {
    border-right: 0;
}


.number-place-values span {
    padding: 15px;

    color:
        var(--color-text-secondary, #334155);

    background:
        var(--number-accent-soft);

    border-right:
        1px solid
        var(--color-border, #e2e8f0);

    text-align: center;

    font-weight: 850;
}


.number-place-values span:last-child {
    border-right: 0;
}


.number-expanded-example {
    max-width: 800px;

    margin-inline: auto;

    padding: 18px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--number-accent),
            var(--number-secondary)
        );

    border-radius:
        var(--radius-large, 20px);

    text-align: center;
}


.number-expanded-example span,
.number-expanded-example strong {
    display: block;
}


.number-expanded-example span {
    margin-bottom: 5px;

    color:
        rgba(255, 255, 255, 0.7);

    font-size: 0.62rem;
}



/* ==========================================================
   BUILD NUMBER
========================================================== */

.number-build-section {
    background:
        var(--color-background-soft, #f8fafc);
}


.number-build-wrapper,
.order-number-wrapper,
.regroup-grade-three-wrapper {
    display: grid;

    grid-template-columns:
        minmax(0, 0.75fr)
        minmax(500px, 1.25fr);

    align-items: center;

    gap: 70px;
}


.number-build-content h2,
.order-number-content h2,
.regroup-grade-three-content h2 {
    margin-bottom: 18px;

    font-size:
        clamp(
            2.2rem,
            4vw,
            3.5rem
        );

    letter-spacing: -0.04em;
}


.number-build-content p,
.order-number-content p,
.regroup-grade-three-content p {
    color:
        var(--color-text-muted, #64748b);

    line-height: 1.8;
}


.number-build-card {
    display: grid;

    grid-template-columns:
        1fr auto 1fr auto 1fr auto 1.1fr;

    align-items: center;

    gap: 9px;

    padding: 28px;

    background: #ffffff;

    border:
        1px solid
        var(--color-border, #e2e8f0);

    border-radius:
        var(--radius-large, 20px);
}


.number-build-card > div {
    min-height: 115px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    padding: 14px;

    background:
        var(--number-accent-soft);

    border-radius:
        var(--radius-medium, 14px);
}


.number-build-card span,
.number-build-card strong {
    display: block;
}


.number-build-card > div span {
    margin-bottom: 5px;

    color:
        var(--color-text-muted, #64748b);

    font-size: 0.58rem;
}


.number-build-card > div strong {
    color:
        var(--number-accent);

    font-size: 1.2rem;
}


.build-plus,
.build-equal {
    color:
        var(--color-text-muted, #64748b);

    font-weight: 900;
}


.number-build-card
.build-result {
    color: #ffffff;

    background:
        var(--number-accent);
}


.number-build-card
.build-result span,
.number-build-card
.build-result strong {
    color: #ffffff;
}



/* ==========================================================
   COMPARE
========================================================== */

.compare-number-section {
    background:
        var(--color-background, #ffffff);
}


.compare-number-card {
    max-width: 850px;

    margin-inline: auto;

    padding: 30px;

    background:
        var(--color-background-soft, #f8fafc);

    border:
        1px solid
        var(--color-border, #e2e8f0);

    border-radius:
        var(--radius-extra-large, 28px);
}


.compare-main {
    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items: center;

    gap: 15px;

    margin-bottom: 18px;
}


.compare-main > div {
    min-height: 150px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    background: #ffffff;

    border-radius:
        var(--radius-large, 20px);
}


.compare-main span {
    margin-bottom: 7px;

    color:
        var(--color-text-muted, #64748b);

    font-size: 0.62rem;
}


.compare-main strong {
    color:
        var(--number-accent);

    font-size: 2.8rem;
}


.compare-main
.compare-symbol {
    margin: 0;

    color:
        var(--number-accent);

    font-size: 2.2rem;

    font-weight: 900;
}


.compare-steps {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 10px;
}


.compare-steps > div {
    padding: 15px;

    background:
        var(--number-accent-soft);

    border-radius:
        var(--radius-medium, 14px);
}


.compare-steps span,
.compare-steps strong {
    display: block;
}


.compare-steps span {
    margin-bottom: 4px;

    color:
        var(--color-text-muted, #64748b);

    font-size: 0.59rem;
}


.compare-steps strong {
    color:
        var(--number-accent-dark);
}



/* ==========================================================
   ORDER
========================================================== */

.order-number-section {
    background:
        var(--color-background-soft, #f8fafc);
}


.order-number-card {
    padding: 28px;

    background: #ffffff;

    border:
        1px solid
        var(--color-border, #e2e8f0);

    border-radius:
        var(--radius-large, 20px);
}


.order-label {
    display: block;

    margin-bottom: 20px;

    color:
        var(--color-text-muted, #64748b);

    font-size: 0.68rem;

    text-align: center;
}


.order-sequence {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 12px;

    margin-bottom: 20px;
}


.order-sequence > div {
    min-width: 110px;

    min-height: 105px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    background:
        var(--number-accent-soft);

    border-radius:
        var(--radius-medium, 14px);
}


.order-sequence small {
    margin-bottom: 5px;

    color:
        var(--color-text-muted, #64748b);
}


.order-sequence strong {
    color:
        var(--number-accent);

    font-size: 1.4rem;
}


.order-sequence > span {
    color:
        var(--number-accent);

    font-size: 1.25rem;

    font-weight: 900;
}


.order-number-card > p {
    margin: 0;

    text-align: center;

    color:
        var(--color-text-muted, #64748b);
}



/* ==========================================================
   OPERATION STRATEGY
========================================================== */

.number-operation-section {
    background:
        var(--color-background, #ffffff);
}


.operation-strategy-grid {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 20px;

    max-width: 950px;

    margin-inline: auto;
}


.operation-strategy-card {
    padding: 28px;

    background:
        var(--color-background-soft, #f8fafc);

    border:
        1px solid
        var(--color-border, #e2e8f0);

    border-radius:
        var(--radius-large, 20px);
}


.strategy-label {
    display: block;

    margin-bottom: 8px;

    color:
        var(--number-accent);

    font-size: 0.62rem;

    font-weight: 850;

    text-transform: uppercase;

    letter-spacing: 0.07em;
}


.operation-strategy-card h3 {
    margin-bottom: 18px;

    color:
        var(--number-accent);

    font-size: 1.7rem;
}


.strategy-decomposition {
    margin-bottom: 15px;

    padding: 15px;

    background: #ffffff;

    border-radius:
        var(--radius-medium, 14px);
}


.strategy-decomposition p {
    margin:
        0 0 7px;

    color:
        var(--color-text-muted, #64748b);
}


.strategy-decomposition p:last-child {
    margin-bottom: 0;
}


.strategy-steps {
    display: grid;

    gap: 7px;

    margin-bottom: 15px;
}


.strategy-steps p {
    margin: 0;

    padding: 11px;

    color:
        var(--color-text-muted, #64748b);

    background: #ffffff;

    border-radius: 9px;
}


.strategy-result {
    padding: 15px;

    color: #ffffff;

    background:
        var(--number-accent);

    border-radius:
        var(--radius-medium, 14px);

    text-align: center;
}



/* ==========================================================
   REGROUP
========================================================== */

.regroup-grade-three-section {
    background:
        var(--color-background-soft, #f8fafc);
}


.regroup-grade-three-card {
    padding: 28px;

    background: #ffffff;

    border:
        1px solid
        var(--color-border, #e2e8f0);

    border-radius:
        var(--radius-large, 20px);
}


.regroup-grade-three-card > span {
    display: block;

    margin-bottom: 7px;

    color:
        var(--number-accent);

    font-size: 0.62rem;

    font-weight: 850;

    text-transform: uppercase;
}


.regroup-equation {
    display: block;

    margin-bottom: 20px;

    color:
        var(--number-accent);

    font-size: 1.6rem;
}


.regroup-grade-three-steps {
    display: grid;

    gap: 8px;

    margin-bottom: 15px;
}


.regroup-grade-three-steps p {
    margin: 0;

    padding: 12px;

    color:
        var(--color-text-muted, #64748b);

    background:
        var(--number-accent-soft);

    border-radius: 9px;
}


.regroup-grade-three-result {
    padding: 15px;

    color: #ffffff;

    background:
        var(--number-accent);

    border-radius:
        var(--radius-medium, 14px);

    text-align: center;
}



/* ==========================================================
   INTERACTIVE
========================================================== */

.number-operation-interactive {
    color: #ffffff;

    background: #0f172a;
}


.number-operation-interactive
.section-eyebrow {
    color: #5eead4;
}


.number-operation-interactive
.section-header p {
    color: #94a3b8;
}


.number-operation-lab {
    max-width: 1000px;

    margin-inline: auto;
}


.number-lab-panel,
.operation-lab-panel {
    margin-bottom: 18px;

    padding: 30px;

    background:
        rgba(255, 255, 255, 0.06);

    border:
        1px solid
        rgba(255, 255, 255, 0.1);

    border-radius:
        var(--radius-extra-large, 28px);
}


.lab-heading {
    margin-bottom: 25px;

    text-align: center;
}


.lab-heading > span {
    display: block;

    margin-bottom: 5px;

    color: #5eead4;

    font-size: 0.62rem;

    font-weight: 850;

    text-transform: uppercase;

    letter-spacing: 0.08em;
}


.lab-heading h3 {
    margin-bottom: 7px;

    color: #ffffff;
}


.lab-heading p {
    margin: 0;

    color: #94a3b8;

    font-size: 0.75rem;
}



/* NUMBER BUILDER */

.number-builder-controls {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 12px;

    margin-bottom: 15px;
}


.number-builder-control {
    min-height: 235px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    padding: 20px;

    color:
        var(--color-text-secondary, #334155);

    background: #ffffff;

    border-radius:
        var(--radius-large, 20px);
}


.number-builder-control > span {
    margin-bottom: 10px;

    color:
        var(--color-text-muted, #64748b);

    font-size: 0.63rem;

    font-weight: 850;

    text-transform: uppercase;
}


.number-builder-control > strong {
    margin-bottom: 14px;

    color:
        var(--number-accent);

    font-size: 3rem;
}


.number-builder-control > div {
    display: flex;

    gap: 8px;

    margin-bottom: 13px;
}


.number-builder-control button {
    width: 43px;
    height: 43px;

    display: grid;

    place-items: center;

    color:
        var(--number-accent);

    background:
        var(--number-accent-soft);

    border:
        1px solid #ccfbf1;

    border-radius: 10px;

    font-size: 1.2rem;

    font-weight: 900;
}


.number-builder-control button:disabled {
    opacity: 0.35;

    cursor: not-allowed;
}


.number-builder-control small {
    color:
        var(--color-text-muted, #64748b);
}


.number-builder-result {
    margin-bottom: 12px;

    padding: 25px;

    color:
        var(--color-text-secondary, #334155);

    background: #ffffff;

    border-radius:
        var(--radius-large, 20px);

    text-align: center;
}


.number-builder-result span,
.number-builder-result strong {
    display: block;
}


.number-builder-result span {
    margin-bottom: 7px;

    color:
        var(--color-text-muted, #64748b);

    font-size: 0.61rem;

    text-transform: uppercase;
}


.number-builder-result > strong {
    margin-bottom: 10px;

    color:
        var(--number-accent);

    font-size:
        clamp(
            3rem,
            7vw,
            4.8rem
        );

    line-height: 1;
}


.number-builder-result p {
    margin: 0;

    color:
        var(--number-accent-dark);

    font-weight: 850;
}


.number-builder-comparison {
    margin-bottom: 15px;

    padding: 18px;

    color:
        var(--color-text-secondary, #334155);

    background: #ffffff;

    border-radius:
        var(--radius-large, 20px);

    text-align: center;
}


.number-builder-comparison span,
.number-builder-comparison strong {
    display: block;
}


.number-builder-comparison span {
    margin-bottom: 5px;

    color:
        var(--color-text-muted, #64748b);

    font-size: 0.61rem;
}


.number-builder-comparison strong {
    margin-bottom: 5px;

    color:
        var(--number-accent);

    font-size: 1.2rem;
}


.number-builder-comparison p {
    margin: 0;

    color:
        var(--color-text-muted, #64748b);

    font-size: 0.72rem;
}


.lab-actions {
    text-align: center;
}


.lab-reset-button {
    color: #ffffff;

    background:
        rgba(255, 255, 255, 0.07);

    border:
        1px solid
        rgba(255, 255, 255, 0.14);
}



/* OPERATION LAB */

.operation-example-selector {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 8px;

    margin-bottom: 15px;
}


.operation-example-button {
    padding: 14px;

    color: #cbd5e1;

    background:
        rgba(255, 255, 255, 0.06);

    border:
        1px solid
        rgba(255, 255, 255, 0.1);

    border-radius:
        var(--radius-medium, 14px);

    font-weight: 850;
}


.operation-example-button.active {
    color: #ffffff;

    background:
        var(--number-accent);

    border-color:
        var(--number-accent);
}


.operation-lab-result {
    padding: 28px;

    color:
        var(--color-text-secondary, #334155);

    background: #ffffff;

    border-radius:
        var(--radius-large, 20px);
}


.operation-lab-label {
    display: block;

    margin-bottom: 5px;

    color:
        var(--color-text-muted, #64748b);

    font-size: 0.61rem;

    text-align: center;

    text-transform: uppercase;
}


.operation-lab-result h4 {
    margin-bottom: 20px;

    color:
        var(--number-accent);

    font-size: 1.7rem;

    text-align: center;
}


.operation-decomposition-display {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 10px;

    margin-bottom: 15px;
}


.operation-decomposition-display > div {
    padding: 15px;

    background:
        var(--number-accent-soft);

    border-radius:
        var(--radius-medium, 14px);
}


.operation-decomposition-display span,
.operation-decomposition-display strong {
    display: block;
}


.operation-decomposition-display span {
    margin-bottom: 5px;

    color:
        var(--color-text-muted, #64748b);

    font-size: 0.58rem;
}


.operation-decomposition-display strong {
    color:
        var(--number-accent-dark);

    font-size: 0.76rem;
}


.generated-strategy-steps {
    display: grid;

    gap: 8px;

    margin-bottom: 15px;
}


.generated-strategy-step {
    display: grid;

    grid-template-columns:
        38px 1fr;

    align-items: center;

    gap: 11px;

    padding: 13px;

    background:
        var(--color-background-soft, #f8fafc);

    border-radius:
        var(--radius-medium, 14px);
}


.generated-strategy-step > span {
    width: 34px;
    height: 34px;

    display: grid;

    place-items: center;

    color: #ffffff;

    background:
        var(--number-accent);

    border-radius: 50%;

    font-size: 0.62rem;

    font-weight: 900;
}


.generated-strategy-step p {
    margin: 0;

    color:
        var(--color-text-muted, #64748b);

    font-size: 0.77rem;

    line-height: 1.6;
}


.operation-final-answer {
    padding: 17px;

    color: #ffffff;

    background:
        var(--number-accent);

    border-radius:
        var(--radius-medium, 14px);

    text-align: center;
}


.operation-final-answer span,
.operation-final-answer strong {
    display: block;
}


.operation-final-answer span {
    margin-bottom: 4px;

    color:
        rgba(255, 255, 255, 0.7);

    font-size: 0.6rem;
}


.operation-final-answer strong {
    font-size: 1.7rem;
}



/* ==========================================================
   PRACTICE
========================================================== */

.number-practice-display,
.number-practice-comparison {
    min-height: 120px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 22px;

    color:
        var(--number-accent);

    background:
        var(--color-background-soft, #f8fafc);

    border-radius:
        var(--radius-medium, 14px);

    font-size: 1.8rem;

    font-weight: 900;
}


.number-practice-comparison {
    gap: 14px;
}


.number-practice-comparison span {
    color:
        var(--color-text-muted, #64748b);

    font-size: 0.66rem;

    font-weight: 750;
}



/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 1024px) {

    .number-build-wrapper,
    .order-number-wrapper,
    .regroup-grade-three-wrapper {
        grid-template-columns: 1fr;

        gap: 45px;
    }


    .number-build-card {
        grid-template-columns:
            1fr auto 1fr auto 1fr;
    }


    .number-build-card
    .build-equal {
        grid-column:
            1 / -1;

        text-align: center;
    }


    .number-build-card
    .build-result {
        grid-column:
            1 / -1;
    }

}



@media (max-width: 860px) {

    .operation-strategy-grid {
        grid-template-columns: 1fr;
    }


    .number-builder-controls {
        grid-template-columns: 1fr;
    }


    .operation-example-selector {
        grid-template-columns:
            repeat(2, 1fr);
    }

}



@media (max-width: 600px) {

    .number-operation-hero-card {
        min-height: 370px;

        padding: 25px;
    }


    .hero-place-grid {
        grid-template-columns: 1fr;
    }


    .number-intro-visual {
        grid-template-columns: 1fr;

        padding: 25px;
    }


    .number-intro-compare {
        text-align: center;
    }


    .number-place-digits strong {
        padding:
            22px 8px;

        font-size: 2.2rem;
    }


    .number-build-card {
        grid-template-columns: 1fr;
    }


    .number-build-card
    .build-equal,
    .number-build-card
    .build-result {
        grid-column: auto;
    }


    .build-plus,
    .build-equal {
        transform:
            rotate(90deg);

        text-align: center;
    }


    .compare-main {
        grid-template-columns: 1fr;
    }


    .compare-main
    .compare-symbol {
        transform:
            rotate(90deg);

        text-align: center;
    }


    .compare-steps {
        grid-template-columns: 1fr;
    }


    .order-sequence {
        flex-direction: column;
    }


    .order-sequence > span {
        transform:
            rotate(90deg);
    }


    .number-lab-panel,
    .operation-lab-panel {
        padding: 18px;
    }


    .operation-example-selector {
        grid-template-columns: 1fr;
    }


    .operation-decomposition-display {
        grid-template-columns: 1fr;
    }

}