@import url("./legacy-app.css");
@import url("./ui-system.css");
@import url("./ui-navigation.css");
@import url("./ui-layout.css");
@import url("./ui-responsive.css");
@import url("./pjax-cube-transition.css");
@import url("./utilities/code_editor.css");

.programming-rank-badge{display:inline-flex;padding:.1rem .42rem;border:1px solid color-mix(in srgb,currentColor 28%,transparent);border-radius:999px;font-size:.7rem;font-weight:700;vertical-align:middle;opacity:.9}

.course-payment-box{display:grid;gap:.65rem;min-width:min(100%,20rem)}
.course-payment-price{font-size:1.35rem;font-variant-numeric:tabular-nums;color:var(--accent)}
.course-payment-actions{display:flex;flex-wrap:wrap;gap:.55rem}
.course-payment-actions form{margin:0}
.course-payment-unavailable{display:block;max-width:24rem;line-height:1.35}
.content-page-clean .rendered-content,
.course-description-public.rendered-content,
.course-intro-card .rendered-content,
.step-body.rendered-content,
.step-media-text.rendered-content{font-size:calc(1.08rem * var(--content-font-scale,1));line-height:1.78}
.online-presence-menu{position:relative;display:inline-block}
.online-presence-menu > summary{list-style:none}
.online-presence-menu > summary::-webkit-details-marker{display:none}
.online-presence-menu .online-indicator{cursor:pointer}
.online-presence-menu[open] .online-indicator{border-color:var(--accent);color:var(--accent);background:var(--accent-subtle)}
.online-presence-panel{position:absolute;right:0;top:calc(100% + 10px);z-index:3200;display:grid;gap:.35rem;width:min(320px,calc(100vw - 24px));padding:.8rem;border:1px solid var(--line);border-radius:14px;background:var(--panel);box-shadow:0 18px 44px rgba(0,0,0,.32)}
.online-presence-panel > strong{padding:.15rem .25rem .45rem;color:var(--text);font-size:.9rem}
.online-presence-panel a,
.online-presence-guests,
.online-presence-empty{display:grid;gap:.16rem;padding:.55rem .65rem;border-radius:10px;color:var(--text);text-decoration:none}
.online-presence-panel a:hover{background:var(--surface-soft);text-decoration:none}
.online-presence-panel small,
.online-presence-empty{color:var(--muted);font-size:.78rem;line-height:1.3}
.online-presence-guests{border-top:1px solid var(--line);border-radius:0;color:var(--muted)}
.course-landing-program{height:auto;align-self:start}
.course-landing-program .course-program-list{gap:.9rem}
.course-landing-program .course-program-list:first-child{display:flex;align-items:center;gap:.65rem;margin-bottom:1rem}
.course-landing-program .course-program-list:first-child::before{display:none}
.course-landing-program .course-program-list:first-child h2{margin:0}
.course-landing-program .course-preview-topic{align-items:flex-start;padding:.25rem 0}
.course-landing-program .course-preview-topic strong{display:-webkit-box;overflow:hidden;white-space:normal;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.course-landing-program .course-preview-topic small{display:block;margin-top:.18rem}
.payment-status-card{max-width:46rem;margin:2rem auto;padding:clamp(1.1rem,3vw,2rem)}
.payment-test-banner{margin:0 0 1rem;padding:.7rem 1rem;border:1px solid #e2aa3b;border-radius:.75rem;background:color-mix(in srgb,#e2aa3b 14%,transparent);color:inherit;font-weight:700}
.site-mode-staff-indicator{display:inline-flex;align-items:center;min-height:2.1rem;padding:0 .75rem;border:1px solid #e2aa3b;border-radius:999px;background:color-mix(in srgb,#e2aa3b 16%,transparent);color:#ffd479;font-size:.78rem;font-weight:800;letter-spacing:0}
.mobile-app-nav-link{display:none!important}
.apps-page{display:grid;gap:clamp(1.25rem,3vw,2rem);max-width:1040px;margin:0 auto;padding:clamp(1rem,3vw,2rem) 0 3rem}
.apps-page__intro{display:grid;gap:.55rem;max-width:680px}
.apps-page__intro h1{margin:0;font-size:clamp(2rem,5vw,3.4rem)}
.apps-page__intro p{margin:0;color:var(--muted);line-height:1.7}
.apps-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.app-download-card{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start;padding:1rem;border:1px solid var(--line);border-radius:14px;background:var(--panel);box-shadow:0 16px 36px rgba(0,0,0,.16)}
.app-download-card__icon{display:grid;place-items:center;width:76px;height:76px;border:1px solid var(--line);border-radius:16px;background:var(--surface-soft);overflow:hidden}
.app-download-card__icon img{width:56px;height:56px;object-fit:contain}
.app-download-card__icon--muted span{font-weight:800;color:var(--muted)}
.app-download-card__body{display:grid;gap:.65rem;min-width:0}
.app-download-card__body h2{margin:0;font-size:1.25rem}
.app-download-card__body p{margin:0;color:var(--muted);line-height:1.55}
.app-download-card__meta{display:flex;flex-wrap:wrap;gap:.45rem}
.app-download-card__meta span{display:inline-flex;align-items:center;min-height:28px;padding:0 .6rem;border:1px solid var(--line);border-radius:999px;background:var(--surface-soft);color:var(--muted);font-size:.82rem;font-weight:700}
.app-download-card .button{width:max-content}
.app-download-card--pending{opacity:.78}
.site-mode-banner{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:.6rem 1rem;

    width:min(1180px,calc(100% - 32px));
    min-height:64px;

    margin:18px auto 24px;
    padding:14px 22px;

    border:1px solid color-mix(in srgb,var(--accent) 55%,var(--line));
    border-left:4px solid var(--accent);
    border-radius:14px;

    background:linear-gradient(
        135deg,
        color-mix(in srgb,var(--accent) 10%,transparent),
        color-mix(in srgb,var(--panel) 96%,transparent)
    );

    box-shadow:
        0 10px 30px rgba(0,0,0,.18),
        0 0 24px color-mix(in srgb,var(--accent) 12%,transparent);

    color:var(--text);
    text-align:center;
}

.site-mode-banner strong{
    color:var(--accent);
    font-size:1rem;
}

.site-mode-countdown{
    min-width:210px;
    padding:.45rem .75rem;

    border:1px solid var(--line);
    border-radius:10px;
    background:color-mix(in srgb,var(--bg) 82%,transparent);

    font-variant-numeric:tabular-nums;
    color:var(--text);
    font-weight:800;
    letter-spacing:.03em;
}
@media(max-width:680px){.course-payment-actions,.course-payment-actions form,.course-payment-actions .button{width:100%}.course-landing-cta{align-items:stretch}.course-payment-box{min-width:0}}
@media(max-width:860px){
    .mobile-app-nav-link{display:flex!important}
    .online-presence-menu{width:100%}
    .online-presence-menu .online-indicator{width:100%;justify-content:flex-start}
    .online-presence-panel{position:static;width:100%;margin-top:.45rem;box-shadow:none}
    .site-mode-staff-indicator{width:100%;justify-content:center}

    .site-mode-banner{
        width:calc(100% - 20px);
        margin:12px auto 18px;
        padding:12px 14px;
    }

    .site-mode-countdown{
        min-width:0;
        width:100%;
    }
}
@media(max-width:760px){.apps-grid{grid-template-columns:1fr}.app-download-card{grid-template-columns:1fr}.app-download-card__icon{width:64px;height:64px}.app-download-card__icon img{width:48px;height:48px}.app-download-card .button{width:100%}}