/* =========================================
   PYLEARN PRACTICE PAGE
========================================= */


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

.practice-page-hero {

    background:
        linear-gradient(
            135deg,
            #0f172a,
            #172554 55%,
            #1d4ed8
        );

    color: white;

    padding: 80px 20px;

    overflow: hidden;

}


.practice-hero-inner {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(380px, .85fr);

    gap: 70px;

    align-items: center;

}


.practice-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 8px 14px;

    border: 1px solid
        rgba(255,255,255,.18);

    background:
        rgba(255,255,255,.08);

    border-radius: 30px;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: .08em;

}


.practice-hero-text h1 {

    margin: 22px 0 16px;

    font-size:
        clamp(42px, 6vw, 68px);

    line-height: 1.04;

    letter-spacing: -.035em;

}


.practice-hero-text h1 span {

    display: block;

    color: #60a5fa;

}


.practice-hero-text p {

    max-width: 650px;

    margin: 0;

    color: #dbeafe;

    font-size: 19px;

    line-height: 1.75;

}


.practice-hero-buttons {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 32px;

}


.practice-primary-button,
.practice-secondary-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    padding: 13px 19px;

    border-radius: 9px;

    font-size: 13px;

    font-weight: 800;

    text-decoration: none;

    cursor: pointer;

}


.practice-primary-button {

    border: 0;

    background: #f59e0b;

    color: #111827;

}


.practice-primary-button:hover {

    transform: translateY(-2px);

}


.practice-secondary-button {

    border: 1px solid
        rgba(255,255,255,.2);

    color: white;

    background:
        rgba(255,255,255,.07);

}


/* =========================================
   CODE WINDOW
========================================= */

.practice-hero-visual {

    perspective: 1000px;

}


.code-window {

    background: #0b1220;

    border: 1px solid
        rgba(255,255,255,.12);

    border-radius: 16px;

    overflow: hidden;

    box-shadow:
        0 30px 80px
        rgba(0,0,0,.35);

    transform:
        rotateY(-5deg)
        rotateX(2deg);

}


.code-window-header {

    display: flex;

    align-items: center;

    gap: 15px;

    padding: 13px 16px;

    background: #172033;

    color: #94a3b8;

    font-size: 12px;

}


.window-dots {

    display: flex;

    gap: 5px;

}


.window-dots span {

    width: 9px;

    height: 9px;

    border-radius: 50%;

    background: #64748b;

}


.code-window-body {

    padding: 25px;

}


.code-window pre {

    margin: 0;

    overflow-x: auto;

}


.code-window code {

    color: #dbeafe;

    font-family:
        "Cascadia Code",
        "Fira Code",
        Consolas,
        monospace;

    font-size: 14px;

    line-height: 1.75;

}


.code-keyword {

    color: #c084fc;

}


.code-function {

    color: #60a5fa;

}


.code-number {

    color: #fbbf24;

}


.code-output {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 22px;

    padding: 13px 15px;

    background: #111827;

    border-radius: 8px;

    color: #94a3b8;

    font-size: 12px;

}


.code-output strong {

    color: #4ade80;

    font-family: monospace;

    font-size: 15px;

}


/* =========================================
   STATISTICS
========================================= */

.practice-stat-section {

    padding: 30px 20px;

    background: var(--practice-bg, #f8fafc);

}


.practice-stat-grid {

    display: grid;

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

    gap: 16px;

}


.practice-stat-card {

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 20px;

    background: white;

    border: 1px solid #e2e8f0;

    border-radius: 13px;

}


.practice-stat-icon {

    width: 43px;

    height: 43px;

    display: grid;

    place-items: center;

    border-radius: 10px;

}


.practice-stat-icon.blue {

    background: #dbeafe;
    color: #2563eb;

}


.practice-stat-icon.green {

    background: #dcfce7;
    color: #16a34a;

}


.practice-stat-icon.orange {

    background: #fef3c7;
    color: #d97706;

}


.practice-stat-icon.purple {

    background: #f3e8ff;
    color: #9333ea;

}


.practice-stat-card strong {

    display: block;

    font-size: 22px;

}


.practice-stat-card span {

    color: #64748b;

    font-size: 12px;

}


/* =========================================
   CONTENT
========================================= */

.practice-content {

    padding: 75px 20px;

    background: #f8fafc;

}


.practice-section-heading {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    gap: 30px;

    margin-bottom: 35px;

}


.practice-section-heading > div:first-child > span {

    color: #2563eb;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: .1em;

}


.practice-section-heading h2 {

    margin: 8px 0 7px;

    font-size: 36px;

    line-height: 1.15;

}


.practice-section-heading p {

    margin: 0;

    color: #64748b;

}


.practice-section-heading.centered {

    display: block;

    text-align: center;

}


.practice-section-heading.centered > div {

    max-width: 650px;

    margin: auto;

}


/* =========================================
   FILTERS
========================================= */

.practice-filter {

    display: flex;

    gap: 7px;

    padding: 5px;

    background: white;

    border: 1px solid #e2e8f0;

    border-radius: 9px;

}


.filter-button {

    padding: 8px 13px;

    border: 0;

    background: transparent;

    border-radius: 6px;

    cursor: pointer;

    color: #64748b;

    font-size: 12px;

    font-weight: 700;

}


.filter-button.active {

    background: #2563eb;

    color: white;

}


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

.practice-grid {

    display: grid;

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

    gap: 20px;

}


.practice-card {

    padding: 23px;

    background: white;

    border: 1px solid #e2e8f0;

    border-radius: 15px;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;

}


.practice-card:hover {

    transform: translateY(-4px);

    border-color: #bfdbfe;

    box-shadow:
        0 15px 35px
        rgba(15,23,42,.08);

}


.practice-card.hidden {

    display: none;

}


.practice-card-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

}


.practice-level {

    padding: 5px 9px;

    border-radius: 20px;

    font-size: 10px;

    font-weight: 800;

}


.practice-level.beginner {

    background: #dcfce7;

    color: #166534;

}


.practice-level.intermediate {

    background: #fef3c7;

    color: #92400e;

}


.practice-level.advanced {

    background: #fee2e2;

    color: #991b1b;

}


.practice-number {

    color: #94a3b8;

    font-size: 12px;

    font-weight: 800;

}


.practice-card-icon {

    width: 50px;

    height: 50px;

    display: grid;

    place-items: center;

    margin: 24px 0 17px;

    border-radius: 12px;

    background: #eff6ff;

    color: #2563eb;

    font-size: 19px;

}


.practice-card h3 {

    margin: 0 0 8px;

    font-size: 19px;

}


.practice-card p {

    min-height: 52px;

    margin: 0;

    color: #64748b;

    line-height: 1.6;

    font-size: 13px;

}


.practice-card-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    margin-top: 22px;

    padding-top: 16px;

    border-top: 1px solid #f1f5f9;

}


.practice-card-footer > span {

    color: #94a3b8;

    font-size: 11px;

}


.practice-start {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    border: 0;

    background: transparent;

    color: #2563eb;

    cursor: pointer;

    font-size: 12px;

    font-weight: 800;

}


.practice-start:hover {

    color: #1d4ed8;

}


/* =========================================
   NO RESULTS
========================================= */

.no-practice-results {

    display: none;

    padding: 70px 20px;

    text-align: center;

}


.no-practice-results.visible {

    display: block;

}


.no-practice-results i {

    font-size: 35px;

    color: #94a3b8;

}


.no-practice-results h3 {

    margin: 15px 0 5px;

}


.no-practice-results p {

    color: #64748b;

}


/* =========================================
   HOW IT WORKS
========================================= */

.how-practice-works {

    padding: 80px 20px;

    background: white;

}


.practice-steps {

    display: grid;

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

    gap: 20px;

}


.practice-step {

    position: relative;

    padding: 25px;

    text-align: center;

    border: 1px solid #e2e8f0;

    border-radius: 14px;

}


.practice-step .step-number {

    color: #2563eb;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: .08em;

}


.practice-step > i {

    display: block;

    margin: 18px 0;

    font-size: 28px;

    color: #2563eb;

}


.practice-step h3 {

    margin: 0 0 7px;

}


.practice-step p {

    margin: 0;

    color: #64748b;

    font-size: 13px;

    line-height: 1.6;

}


/* =========================================
   FINAL CTA
========================================= */

.practice-final-cta {

    padding: 65px 20px;

    background:
        linear-gradient(
            135deg,
            #172554,
            #2563eb
        );

    color: white;

}


.practice-final-cta .container {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

}


.practice-final-cta span {

    font-size: 11px;

    font-weight: 900;

    letter-spacing: .1em;

    color: #93c5fd;

}


.practice-final-cta h2 {

    max-width: 700px;

    margin: 10px 0;

    font-size: 36px;

    line-height: 1.2;

}


.practice-final-cta p {

    margin: 0;

    color: #dbeafe;

}


.practice-cta-button {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    flex-shrink: 0;

    padding: 14px 21px;

    border: 0;

    border-radius: 9px;

    background: #f59e0b;

    color: #111827;

    cursor: pointer;

    font-weight: 900;

}


/* =========================================
   FOOTER
========================================= */

.site-footer {

    padding: 35px 20px;

    background: #0f172a;

    color: white;

}


.site-footer .container {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

}


.footer-brand strong {

    font-size: 21px;

}


.footer-brand p {

    margin: 5px 0 0;

    color: #94a3b8;

    font-size: 13px;

}


.footer-links {

    display: flex;

    gap: 22px;

}


.footer-links a {

    color: #cbd5e1;

    text-decoration: none;

    font-size: 13px;

}


.footer-links a:hover {

    color: white;

}


/* =========================================
   MOBILE NAV
========================================= */

.practice-mobile-navigation {

    display: none;

    padding: 10px 20px;

    background: white;

    border-bottom: 1px solid #e2e8f0;

}


.practice-mobile-navigation a {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 12px;

    color: #334155;

    text-decoration: none;

    border-radius: 7px;

}


.practice-mobile-navigation a.active {

    background: #eff6ff;

    color: #2563eb;

}


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

@media (max-width: 1000px) {

    .practice-hero-inner {

        grid-template-columns: 1fr;

        gap: 45px;

    }


    .practice-hero-visual {

        max-width: 700px;

    }


    .practice-stat-grid {

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

    }


    .practice-grid {

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

    }


    .practice-steps {

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

    }

}


@media (max-width: 750px) {

    .main-navigation {

        display: none;

    }


    .practice-mobile-navigation.visible {

        display: block;

    }


    .practice-hero-inner {

        gap: 35px;

    }


    .practice-section-heading {

        align-items: flex-start;

        flex-direction: column;

    }


    .practice-filter {

        width: 100%;

        overflow-x: auto;

    }


    .practice-final-cta .container {

        align-items: flex-start;

        flex-direction: column;

    }

}


@media (max-width: 600px) {

    .practice-page-hero {

        padding: 60px 18px;

    }


    .practice-stat-grid {

        grid-template-columns: 1fr;

    }


    .practice-grid {

        grid-template-columns: 1fr;

    }


    .practice-steps {

        grid-template-columns: 1fr;

    }


    .practice-hero-buttons {

        flex-direction: column;

    }


    .practice-primary-button,
    .practice-secondary-button {

        width: 100%;

    }


    .practice-final-cta h2 {

        font-size: 28px;

    }


    .site-footer .container {

        align-items: flex-start;

        flex-direction: column;

    }

}
/* Modern PyLearn visual refresh */
.practice-page-hero { background: linear-gradient(135deg,#faf9ff 0%,#eefcff 100%); }
body.dark-mode .practice-page-hero { background: radial-gradient(circle at 80% 20%,rgba(124,58,237,.2),transparent 35%),var(--bg); }
.practice-eyebrow { color:#7c3aed; }
.practice-page-hero h1 span { color:#7c3aed; }
.practice-primary-button, .practice-cta-button { background:linear-gradient(135deg,#7c3aed,#4f46e5); box-shadow:0 12px 28px rgba(109,40,217,.2); }
.practice-secondary-button { border-color:#c4b5fd; color:#5b21b6; }
.practice-stat-card, .practice-card, .how-practice-works, .practice-step { border-color:var(--border); border-radius:20px; box-shadow:var(--shadow-sm); background:var(--surface); }
.practice-card:hover { transform:translateY(-7px); box-shadow:var(--shadow); border-color:rgba(124,58,237,.28); }
.practice-card-icon { background:linear-gradient(135deg,#ede9fe,#cffafe); color:#7c3aed; }
.filter-button.active { background:#7c3aed; color:#fff; }
.practice-final-cta { background:linear-gradient(110deg,#6d28d9,#4f46e5,#0891b2); border-radius:22px; }
.practice-page-hero .code-window { border-color:rgba(124,58,237,.3); }
.site-header { background:rgba(255,255,255,.86); border-bottom:1px solid var(--border); backdrop-filter:blur(18px); }
body.dark-mode .site-header { background:rgba(9,11,24,.88); }
.logo-python { color:#7c3aed; }
@media(max-width:760px){.practice-page-hero{padding-top:65px}.practice-grid{grid-template-columns:1fr}.practice-stat-grid{grid-template-columns:1fr 1fr}}

/* =========================================
   LIVE PYTHON CODE LAB
========================================= */

.live-code-lab {
    padding: 100px 20px;
    background: linear-gradient(180deg, #f8f7ff 0%, #ffffff 100%);
}

.code-lab-heading {
    max-width: 760px;
    margin: 0 auto 42px;
    text-align: center;
}

.lab-eyebrow {
    color: #5b21b6;
    border-color: rgba(91, 33, 182, .16);
    background: rgba(124, 58, 237, .07);
}

.code-lab-heading h2 {
    margin: 18px 0 12px;
    font-size: clamp(34px, 5vw, 54px);
    line-height: 1.08;
    letter-spacing: -.035em;
}

.code-lab-heading h2 span {
    color: #7c3aed;
}

.code-lab-heading p {
    max-width: 650px;
    margin: 0 auto;
    color: #64748b;
    font-size: 17px;
    line-height: 1.7;
}

.code-lab {
    max-width: 1080px;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid #dbe3f0;
    border-radius: 22px;
    background: #0f172a;
    box-shadow: 0 28px 70px rgba(30, 41, 59, .16);
}

.code-lab-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: #111827;
}

.lab-file {
    color: #cbd5e1;
    font: 600 13px/1.2 "JetBrains Mono", monospace;
}

.lab-file i {
    margin-right: 8px;
    color: #22d3ee;
}

.lab-actions {
    display: flex;
    gap: 9px;
}

.lab-actions button {
    min-height: 40px;
    padding: 9px 14px;
    border-radius: 9px;
    font: 800 12px/1 "Inter", sans-serif;
    cursor: pointer;
    transition: transform .2s ease, opacity .2s ease, background .2s ease;
}

.lab-actions button:hover {
    transform: translateY(-1px);
}

.lab-secondary {
    border: 1px solid #334155;
    background: #1e293b;
    color: #cbd5e1;
}

.lab-run {
    border: 0;
    background: #7c3aed;
    color: #fff;
}

.lab-run:disabled {
    cursor: wait;
    opacity: .65;
}

.code-lab-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 390px;
}

.editor-pane,
.output-pane {
    min-width: 0;
}

.editor-pane {
    border-right: 1px solid #263247;
}

.editor-label,
.output-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 45px;
    padding: 0 17px;
    border-bottom: 1px solid #263247;
    color: #94a3b8;
    font: 800 10px/1 "JetBrains Mono", monospace;
    letter-spacing: .1em;
}

#editorStatus {
    color: #22d3ee;
    letter-spacing: 0;
    text-transform: none;
}

#pythonEditor {
    display: block;
    width: 100%;
    min-height: 345px;
    padding: 22px;
    border: 0;
    outline: 0;
    resize: vertical;
    background: #0b1120;
    color: #e2e8f0;
    caret-color: #22d3ee;
    font: 14px/1.8 "JetBrains Mono", Consolas, monospace;
    tab-size: 4;
}

#pythonEditor:focus {
    box-shadow: inset 0 0 0 1px rgba(124,58,237,.35);
}

.output-pane {
    background: #0b1120;
}

.output-label button {
    padding: 5px 8px;
    border: 0;
    border-radius: 6px;
    background: #1e293b;
    color: #94a3b8;
    font: 700 10px/1 "Inter", sans-serif;
    cursor: pointer;
}

#pythonOutput {
    min-height: 345px;
    margin: 0;
    padding: 22px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    color: #c4b5fd;
    font: 14px/1.8 "JetBrains Mono", Consolas, monospace;
}

#pythonOutput.error {
    color: #fda4af;
}

.code-lab-footer {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 12px 18px;
    border-top: 1px solid #263247;
    color: #64748b;
    background: #111827;
    font-size: 11px;
}

.code-lab-footer i {
    margin-right: 5px;
    color: #22d3ee;
}

#pyodideStatus {
    color: #a5b4fc;
}

.lab-tips {
    max-width: 1080px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 18px auto 0;
}

.lab-tips > div {
    padding: 15px 17px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    color: #64748b;
    font-size: 13px;
    line-height: 1.6;
}

.lab-tips i {
    margin-right: 7px;
    color: #7c3aed;
}

.lab-tips strong {
    color: #1e293b;
}

body.dark-mode .live-code-lab {
    background: linear-gradient(180deg, #111827 0%, #0f172a 100%);
}

body.dark-mode .code-lab-heading p {
    color: #94a3b8;
}

body.dark-mode .lab-tips > div {
    border-color: #273449;
    background: #111827;
    color: #94a3b8;
}

body.dark-mode .lab-tips strong {
    color: #e2e8f0;
}

@media (max-width: 800px) {
    .code-lab-body {
        grid-template-columns: 1fr;
    }

    .editor-pane {
        border-right: 0;
        border-bottom: 1px solid #263247;
    }

    .code-lab-footer,
    .lab-tips {
        grid-template-columns: 1fr;
    }

    .code-lab-footer {
        flex-direction: column;
        gap: 6px;
    }
}

@media (max-width: 560px) {
    .code-lab-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .lab-actions {
        width: 100%;
    }

    .lab-actions button {
        flex: 1;
    }

    #pythonEditor,
    #pythonOutput {
        min-height: 300px;
        font-size: 13px;
    }
}