@import '_content/Admin/Admin.bundle.scp.css';

/* /Layout/ClassBar.razor.rz.scp.css */
.cb[b-9l11oncqsu] {
    position: sticky;
    top: 0;
    z-index: 1020;
    background: #fffdf3;
    border-bottom: 3px solid #2b2b2b;
    box-shadow: 0 3px 0 rgba(43, 43, 43, .08);
}

.cb-top[b-9l11oncqsu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .6rem clamp(.8rem, 3vw, 2rem) .4rem;
}

.cb-class[b-9l11oncqsu] {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-width: 0;
    color: #2b2b2b;
    text-decoration: none;
}

.cb-icon[b-9l11oncqsu] {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border: 2px solid #2b2b2b;
    border-radius: 12px 4px 12px 4px;
    background: #ffd84d;
    box-shadow: 2px 2px 0 #2b2b2b;
    font-size: 1.3rem;
}

.cb-names[b-9l11oncqsu] { display: grid; min-width: 0; line-height: 1.2; }
.cb-names strong[b-9l11oncqsu] { font-size: 1.15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-names small[b-9l11oncqsu] { color: #6b6b6b; font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cb-account[b-9l11oncqsu] { display: flex; gap: .4rem; flex: none; }

.cb-out[b-9l11oncqsu] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border: 2px solid #2b2b2b;
    border-radius: 10px 4px 10px 4px;
    background: #fff;
    padding: .25rem .65rem;
    font: inherit;
    font-size: .85rem;
    font-weight: bold;
    color: #2b2b2b;
    cursor: pointer;
}
.cb-out:hover[b-9l11oncqsu] { background: #f1f1f1; }

.cb-menu[b-9l11oncqsu] {
    display: flex;
    gap: .3rem;
    padding: 0 clamp(.8rem, 3vw, 2rem) .55rem;
    overflow-x: auto;
    scrollbar-width: none;
}
.cb-menu[b-9l11oncqsu]::-webkit-scrollbar { display: none; }

.cb-menu[b-9l11oncqsu]  a {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    flex: none;
    padding: .35rem .8rem;
    border: 2px solid transparent;
    border-radius: 999px;
    color: #2b2b2b;
    font-weight: bold;
    text-decoration: none;
    white-space: nowrap;
}
.cb-menu[b-9l11oncqsu]  a:hover { background: #fff1a8; }
.cb-menu[b-9l11oncqsu]  a.active { background: #2b2b2b; color: #fff; }
.cb-menu[b-9l11oncqsu]  a.active .cb-count { background: #ffd84d; color: #2b2b2b; }

.cb-count[b-9l11oncqsu] {
    display: inline-block;
    min-width: 1.3rem;
    padding: 0 .35rem;
    border-radius: 999px;
    background: #dc3545;
    color: #fff;
    font-size: .75rem;
    text-align: center;
}

@media (max-width: 560px) {
    .cb-out span[b-9l11oncqsu] { display: none; }
    .cb-out[b-9l11oncqsu] { padding: .3rem .5rem; font-size: 1rem; }
}

.cb-me[b-9l11oncqsu] { display: inline-flex; align-items: center; gap: .3rem; font-size: .85rem; font-weight: bold; color: #555; padding: 0 .3rem; max-width: 12rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
@media (max-width: 560px) { .cb-me span[b-9l11oncqsu] { display: none; } }
/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-v8q5m4zhkd] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-v8q5m4zhkd] {
    flex: 1;
}

.sidebar[b-v8q5m4zhkd] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-v8q5m4zhkd] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-v8q5m4zhkd]  a, .top-row[b-v8q5m4zhkd]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-v8q5m4zhkd]  a:hover, .top-row[b-v8q5m4zhkd]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-v8q5m4zhkd]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-v8q5m4zhkd] {
        justify-content: space-between;
    }

    .top-row[b-v8q5m4zhkd]  a, .top-row[b-v8q5m4zhkd]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-v8q5m4zhkd] {
        flex-direction: row;
    }

    .sidebar[b-v8q5m4zhkd] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-v8q5m4zhkd] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-v8q5m4zhkd]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-v8q5m4zhkd], article[b-v8q5m4zhkd] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-v8q5m4zhkd] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-v8q5m4zhkd] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* Custom Background */
.footer-handdrawn[b-v8q5m4zhkd] {
    background: #fff; /* Changed from dark to white for paper-like background */
    border-top: 2px dashed #333; /* Dashed line like a hand-drawn border */
    box-shadow: 0 -2px 4px rgba(0,0,0,0.1); /* Subtle shadow for depth */
}

.handdrawn-text[b-v8q5m4zhkd] {
    font-family: 'Comic Neue', Vazirmatn, 'Comic Sans MS', sans-serif; /* Playful, hand-written font */
    color: #333;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.1); /* Slight shadow for depth */
    line-height: 1.4;
    position: relative;
}

.handdrawn-link[b-v8q5m4zhkd] {
    font-family: 'Comic Neue', Vazirmatn, 'Comic Sans MS', sans-serif;
    color: #0066cc;
    text-decoration: none;
    position: relative;
    transition: color 0.2s;
}

    .handdrawn-link:hover[b-v8q5m4zhkd] {
        color: #ff6b6b;
        text-decoration: underline;
        text-decoration-style: wavy; /* Wavy underline for hand-drawn feel */
    }

/* Optional: Add subtle paper texture */
.footer-handdrawn[b-v8q5m4zhkd]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJElEQVQYV2NkIA5k+/+/H2b4//8/AzExCQMDAwMDAwMDw2MIAKZpD2pEcykAAAAASUVORK5CYII=') repeat;
    opacity: 0.05;
    pointer-events: none;
}
/* Banner from admin → Settings → Announcement */
.site-announcement[b-v8q5m4zhkd] {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem 1rem;
    background: #fff3c4;
    border-bottom: 2px solid #2b2b2b;
    color: #2b2b2b;
    font-size: .95rem;
}

    .site-announcement p[b-v8q5m4zhkd] {
        flex: 1;
        margin: 0;
        unicode-bidi: plaintext;
    }

    .site-announcement button[b-v8q5m4zhkd] {
        border: none;
        background: transparent;
        padding: .25rem;
        min-width: 32px;
        min-height: 32px;
        cursor: pointer;
        color: inherit;
    }

/* Class space: a quiet footer instead of the site links. */
.class-space-footer[b-v8q5m4zhkd] { padding: .8rem 1rem; text-align: center; color: #8a8a8a; font-size: .8rem; border-top: 1px dashed #d7d7d7; }
/* /Layout/NavMenu.razor.rz.scp.css */
 
/* /Pages/account/AuthCard.razor.rz.scp.css */
/* Sign-in pages: one centred card, mobile first, the site's hand-drawn style.
   ::deep styles the form each page puts inside the card. */

.auth-page[b-cn2ganr9jh] {
    --ink: #2b2b2b;
    --muted: #6b6b6b;
    --accent: #0d6efd;
    --accent-soft: #e8f0ff;
    --danger: #b02a37;
    --ok: #146c43;

    min-height: calc(100vh - 140px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem .75rem 2rem;
    font-family: 'Comic Neue', Vazirmatn, 'Comic Sans MS', sans-serif;
    color: var(--ink);
}

.auth-card[b-cn2ganr9jh] {
    width: 100%;
    max-width: 420px;
    padding: 1.4rem 1.1rem;
    background: #fff;
    border: 2px solid var(--ink);
    border-radius: 18px 8px 20px 10px;
    box-shadow: 4px 4px 0 var(--ink);
}

.brand[b-cn2ganr9jh] { display: inline-flex; align-items: center; gap: .4rem; font-weight: bold; color: var(--ink); text-decoration: none; }
    .brand i[b-cn2ganr9jh] { color: var(--accent); }

.hero-icon[b-cn2ganr9jh] {
    width: 64px;
    height: 64px;
    margin: 1rem auto .25rem;
    display: grid;
    place-items: center;
    border: 2px solid var(--ink);
    border-radius: 50%;
    background: #fff8d6;
    font-size: 1.8rem;
}

h1[b-cn2ganr9jh] { margin: .9rem 0 .25rem; font-size: 1.7rem; text-align: center; }
.subtitle[b-cn2ganr9jh] { margin: 0 0 1.2rem; text-align: center; color: var(--muted); }

.auth-footer[b-cn2ganr9jh] { margin: 1.2rem 0 0; text-align: center; }
    .auth-footer[b-cn2ganr9jh]  a { font-weight: bold; color: var(--accent); }

/* ---------- Form ---------- */
.auth-card[b-cn2ganr9jh]  form { display: grid; gap: .9rem; }

.auth-card[b-cn2ganr9jh]  .field { display: grid; gap: .3rem; }

.auth-card[b-cn2ganr9jh]  .label-row { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.auth-card[b-cn2ganr9jh]  label { font-weight: bold; }
.auth-card[b-cn2ganr9jh]  .label-row a { font-size: .9rem; color: var(--accent); }

.auth-card[b-cn2ganr9jh]  input[type=email],
.auth-card[b-cn2ganr9jh]  input[type=text],
.auth-card[b-cn2ganr9jh]  input[type=password] {
    width: 100%;
    min-height: 48px;
    padding: .55rem .8rem;
    border: 2px solid var(--ink);
    border-radius: 10px 4px 10px 4px;
    background: #fff;
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; /* easier to check what you typed */
    font-size: 1rem; /* ≥16px: no zoom on iOS */
    color: var(--ink);
}

    .auth-card[b-cn2ganr9jh]  input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
    .auth-card[b-cn2ganr9jh]  input[aria-invalid=true] { border-color: var(--danger); }

.auth-card[b-cn2ganr9jh]  .field-error { margin: 0; font-size: .9rem; color: var(--danger); }
.auth-card[b-cn2ganr9jh]  .hint { margin: 0; font-size: .85rem; color: var(--muted); }

.auth-card[b-cn2ganr9jh]  .check { display: flex; align-items: center; gap: .55rem; min-height: 44px; cursor: pointer; }
    .auth-card[b-cn2ganr9jh]  .check input { width: 20px; height: 20px; accent-color: var(--accent); }

/* ---------- Buttons ---------- */
.auth-card[b-cn2ganr9jh]  .btn-main {
    width: 100%;
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border: 2px solid var(--ink);
    border-radius: 12px 4px 12px 4px;
    background: var(--ink);
    box-shadow: 2px 2px 0 var(--accent);
    font: inherit;
    font-size: 1.1rem;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

    .auth-card[b-cn2ganr9jh]  .btn-main:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); }
    .auth-card[b-cn2ganr9jh]  .btn-main:disabled { opacity: .7; cursor: wait; }

.auth-card[b-cn2ganr9jh]  .btn-plain {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: 0 .9rem;
    border: 2px solid var(--ink);
    border-radius: 10px 4px 10px 4px;
    background: #fff;
    font: inherit;
    font-weight: bold;
    color: var(--ink);
    text-decoration: none;
    cursor: pointer;
}

    .auth-card[b-cn2ganr9jh]  .btn-plain:hover:not(:disabled) { background: var(--accent-soft); }
    .auth-card[b-cn2ganr9jh]  .btn-plain:disabled { opacity: .6; cursor: default; }

.auth-card[b-cn2ganr9jh]  .link-btn {
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    font-weight: bold;
    color: var(--accent);
    text-decoration: underline;
    cursor: pointer;
}

.auth-card[b-cn2ganr9jh]  .stack { display: grid; gap: .6rem; }
.auth-card[b-cn2ganr9jh]  .center { text-align: center; }

.auth-card[b-cn2ganr9jh]  .divider { display: flex; align-items: center; gap: .75rem; margin: 1rem 0; color: var(--muted); font-size: .9rem; }
    .auth-card[b-cn2ganr9jh]  .divider::before, .auth-card[b-cn2ganr9jh]  .divider::after { content: ""; flex: 1; border-top: 2px dashed #d5d5d5; }

.auth-card[b-cn2ganr9jh]  .spinner {
    width: 18px;
    height: 18px;
    border: 3px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: auth-spin-b-cn2ganr9jh .8s linear infinite;
}

    .auth-card[b-cn2ganr9jh]  .spinner.dark { border-color: rgba(0,0,0,.15); border-top-color: var(--ink); }

/* ---------- Notices ---------- */
.auth-card[b-cn2ganr9jh]  .notice {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    margin: 0 0 1rem;
    padding: .7rem .85rem;
    border-radius: 10px;
    line-height: 1.45;
}

    .auth-card[b-cn2ganr9jh]  .notice > i { font-size: 1.15rem; line-height: 1.3; }
    .auth-card[b-cn2ganr9jh]  .notice p { margin: 0; }
    .auth-card[b-cn2ganr9jh]  .notice ul { margin: .3rem 0 0; padding-left: 1.1rem; }
    .auth-card[b-cn2ganr9jh]  .notice.error { background: #fdecec; color: var(--danger); border: 2px solid #f1c4c9; }
    .auth-card[b-cn2ganr9jh]  .notice.ok { background: #e9f7ef; color: var(--ok); border: 2px solid #b7e1c8; }
    .auth-card[b-cn2ganr9jh]  .notice.info { background: var(--accent-soft); color: #0a58ca; border: 2px solid #c5d8ff; }

/* ---------- Password rules ---------- */
.auth-card[b-cn2ganr9jh]  .rules { list-style: none; margin: .1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .88rem; color: var(--muted); }
    .auth-card[b-cn2ganr9jh]  .rules li { display: inline-flex; align-items: center; gap: .3rem; }
    .auth-card[b-cn2ganr9jh]  .rules li.met { color: var(--ok); }

.auth-card[b-cn2ganr9jh]  .strength { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: .2rem; }
    .auth-card[b-cn2ganr9jh]  .strength span { height: 6px; border-radius: 999px; background: #e6e6e6; }
    .auth-card[b-cn2ganr9jh]  .strength.s1 span:nth-child(-n+1) { background: #dc3545; }
    .auth-card[b-cn2ganr9jh]  .strength.s2 span:nth-child(-n+2) { background: #f59e0b; }
    .auth-card[b-cn2ganr9jh]  .strength.s3 span:nth-child(-n+3) { background: #84cc16; }
    .auth-card[b-cn2ganr9jh]  .strength.s4 span { background: #198754; }

.auth-card[b-cn2ganr9jh]  .fine-print { margin: .2rem 0 0; font-size: .8rem; color: var(--muted); text-align: center; }

.auth-card[b-cn2ganr9jh]  a:focus-visible, .auth-card[b-cn2ganr9jh]  button:focus-visible, .auth-card[b-cn2ganr9jh]  input:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

@keyframes auth-spin-b-cn2ganr9jh { to { transform: rotate(360deg); } }

@media (min-width: 576px) {
    .auth-page[b-cn2ganr9jh] { padding-top: 2rem; }
    .auth-card[b-cn2ganr9jh] { padding: 1.8rem 1.75rem; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-card[b-cn2ganr9jh]  .spinner { animation-duration: 2s; }
}
/* /Pages/account/GoogleButton.razor.rz.scp.css */
.google-btn[b-2mtkwzc67s] {
    width: 100%;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    border: 2px solid #2b2b2b;
    border-radius: 12px 4px 12px 4px;
    background: #fff;
    font: inherit;
    font-weight: bold;
    color: #2b2b2b;
    cursor: pointer;
}

    .google-btn:hover:not(:disabled)[b-2mtkwzc67s] { background: #f5f7fb; }
    .google-btn:disabled[b-2mtkwzc67s] { opacity: .7; cursor: wait; }
    .google-btn:focus-visible[b-2mtkwzc67s] { outline: 3px solid #0d6efd; outline-offset: 2px; }
/* /Pages/account/PasswordInput.razor.rz.scp.css */
.password-input[b-jein4rtnle] { position: relative; }

    .password-input input[b-jein4rtnle] { padding-right: 3rem !important; }

.toggle[b-jein4rtnle] {
    position: absolute;
    top: 0;
    right: 0;
    width: 46px;
    height: 100%;
    border: none;
    background: transparent;
    color: #6b6b6b;
    font-size: 1.1rem;
    cursor: pointer;
}

    .toggle:hover[b-jein4rtnle] { color: #2b2b2b; }
    .toggle:focus-visible[b-jein4rtnle] { outline: 3px solid #0d6efd; outline-offset: -3px; border-radius: 8px; }
/* /Pages/account/PlanMeter.razor.rz.scp.css */
.plan-meter[b-4uznpns3e1] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .6rem;
    margin: .5rem 0 0;
    padding: .35rem .7rem;
    border: 2px solid #2b2b2b;
    border-radius: 10px 4px 10px 4px;
    background: #fff;
    font-size: .9rem;
}

    .plan-meter .bi[b-4uznpns3e1] { color: #0d6efd; }
    .plan-meter a[b-4uznpns3e1] { font-weight: bold; }
    .plan-meter.near[b-4uznpns3e1] { background: #fff8e1; }
    .plan-meter.near .bi[b-4uznpns3e1] { color: #b7791f; }
    .plan-meter.full[b-4uznpns3e1] { background: #fdecec; border-color: #b02a37; color: #842029; }
    .plan-meter.full .bi[b-4uznpns3e1] { color: #b02a37; }
/* /Pages/account/SmsLogin.razor.rz.scp.css */
.sms-btn[b-iwytp50v4h], .sms-action[b-iwytp50v4h] {
    width: 100%;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    border: 2px solid #2b2b2b;
    border-radius: 12px 4px 12px 4px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.sms-btn[b-iwytp50v4h] { margin-top: .6rem; background: #fff; color: #2b2b2b; }
.sms-btn .bi[b-iwytp50v4h] { color: #198754; font-size: 1.15rem; }
.sms-btn:hover[b-iwytp50v4h] { background: #f4faf7; }

.sms-panel[b-iwytp50v4h] {
    margin-top: .6rem;
    padding: .9rem 1rem;
    border: 2px dashed #198754;
    border-radius: 12px 4px 12px 4px;
    background: #f3faf6;
}

.sms-heading[b-iwytp50v4h], .sms-links[b-iwytp50v4h] { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.sms-heading[b-iwytp50v4h] { margin-bottom: .75rem; }
.sms-heading .bi[b-iwytp50v4h] { color: #198754; }
.sms-panel form[b-iwytp50v4h] { display: grid; gap: .45rem; }
.sms-panel label[b-iwytp50v4h] { font-weight: 700; font-size: .9rem; }
.sms-panel input[b-iwytp50v4h] {
    width: 100%;
    min-height: 45px;
    padding: .65rem .75rem;
    border: 1px solid #8c9690;
    border-radius: 8px;
    background: #fff;
}
.sms-code[b-iwytp50v4h] { letter-spacing: .3em; text-align: center; font-size: 1.2rem; font-weight: 700; }
.sms-action[b-iwytp50v4h] { margin-top: .25rem; border-color: #198754; background: #198754; color: #fff; }
.sms-action:disabled[b-iwytp50v4h], .sms-btn:disabled[b-iwytp50v4h] { opacity: .65; cursor: wait; }
.sms-help[b-iwytp50v4h] { margin: 0 0 .65rem; color: #4d5751; font-size: .9rem; }
.sms-error[b-iwytp50v4h] { margin: 0 0 .65rem; color: #b02a37; font-size: .9rem; }
.sms-links[b-iwytp50v4h] { margin-top: .7rem; font-size: .9rem; }
/* /Pages/account/TelegramButton.razor.rz.scp.css */
.telegram-btn[b-yejjjsg96k] {
    width: 100%;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    margin-top: .6rem;
    border: 2px solid #2b2b2b;
    border-radius: 12px 4px 12px 4px;
    background: #fff;
    font: inherit;
    font-weight: bold;
    color: #2b2b2b;
    text-decoration: none;
    cursor: pointer;
}

    .telegram-btn .bi-telegram[b-yejjjsg96k] { color: #229ed9; font-size: 1.2rem; }
    .telegram-btn:hover:not(:disabled)[b-yejjjsg96k] { background: #f5f7fb; color: #2b2b2b; }
    .telegram-btn:disabled[b-yejjjsg96k] { opacity: .7; cursor: wait; }
    .telegram-btn:focus-visible[b-yejjjsg96k] { outline: 3px solid #0d6efd; outline-offset: 2px; }

.telegram-panel[b-yejjjsg96k] {
    margin-top: .6rem;
    padding: .8rem 1rem;
    border: 2px dashed #229ed9;
    border-radius: 12px 4px 12px 4px;
    background: #f2f9fd;
}

    .telegram-panel ol[b-yejjjsg96k] { margin: .2rem 0 .3rem; padding-left: 1.2rem; }
    .telegram-panel .telegram-btn[b-yejjjsg96k] { margin-top: .3rem; }

.telegram-title[b-yejjjsg96k] { margin: 0; font-weight: bold; }
    .telegram-title .bi-telegram[b-yejjjsg96k] { color: #229ed9; }

.telegram-wait[b-yejjjsg96k] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: .7rem 0 .2rem;
    font-size: .9rem;
    color: #555;
}

.telegram-error[b-yejjjsg96k] { margin: .4rem 0 0; color: #b02a37; font-size: .9rem; }
/* /Pages/bookmark/AddBookmark.razor.rz.scp.css */
/* Phones: a bottom sheet. Larger screens: a centred dialog. */
.overlay[b-fr7jsnfyta] {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(0, 0, 0, .45);
}

.dialog[b-fr7jsnfyta] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1050;
    max-height: 92vh;
    overflow-y: auto;
    padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
    background: #fff;
    border: 2px solid #2b2b2b;
    border-bottom: none;
    border-radius: 18px 18px 0 0;
    font-family: 'Comic Neue', Vazirmatn, 'Comic Sans MS', sans-serif;
    color: #2b2b2b;
}

header[b-fr7jsnfyta] { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; }
    header h2[b-fr7jsnfyta] { margin: 0; font-size: 1.35rem; }

.icon-btn[b-fr7jsnfyta] { width: 44px; height: 44px; border: none; border-radius: 50%; background: transparent; cursor: pointer; font-size: 1.1rem; }
    .icon-btn:hover[b-fr7jsnfyta] { background: #e8f0ff; }

form[b-fr7jsnfyta] { display: grid; gap: .75rem; }

label[b-fr7jsnfyta] { display: grid; gap: .25rem; }
    label span[b-fr7jsnfyta] { font-weight: bold; font-size: .95rem; }
    label small[b-fr7jsnfyta] { font-weight: normal; color: #6b6b6b; }

input[b-fr7jsnfyta], textarea[b-fr7jsnfyta] {
    width: 100%;
    min-height: 44px;
    padding: .5rem .7rem;
    border: 2px solid #2b2b2b;
    border-radius: 10px 4px 10px 4px;
    font: inherit;
    font-size: 1rem; /* ≥16px: no zoom on iOS */
    background: #fff;
}

    input:focus[b-fr7jsnfyta], textarea:focus[b-fr7jsnfyta] { outline: none; box-shadow: 0 0 0 3px #e8f0ff; }

.error[b-fr7jsnfyta] { margin: 0; color: #b02a37; }

.buttons[b-fr7jsnfyta] { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .25rem; }

.btn-sketch[b-fr7jsnfyta] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 44px;
    padding: .4rem 1rem;
    font: inherit;
    font-weight: bold;
    color: #2b2b2b;
    background: #fff;
    border: 2px solid #2b2b2b;
    border-radius: 10px 4px 10px 4px;
    box-shadow: 2px 2px 0 #2b2b2b;
    cursor: pointer;
}

    .btn-sketch.primary[b-fr7jsnfyta] { background: #2b2b2b; color: #fff; }
    .btn-sketch:disabled[b-fr7jsnfyta] { opacity: .6; cursor: wait; }
    .btn-sketch:focus-visible[b-fr7jsnfyta], .icon-btn:focus-visible[b-fr7jsnfyta] { outline: 3px solid #0d6efd; outline-offset: 2px; }

@media (min-width: 576px) {
    .dialog[b-fr7jsnfyta] {
        left: 50%;
        right: auto;
        top: 50%;
        bottom: auto;
        width: min(460px, calc(100vw - 2rem));
        transform: translate(-50%, -50%);
        border-bottom: 2px solid #2b2b2b;
        border-radius: 18px 8px 20px 10px;
        box-shadow: 4px 4px 0 #2b2b2b;
        padding: 1.25rem;
    }
}
/* /Pages/bookmark/BookmarkList.razor.rz.scp.css */
.saved[b-x1nee41n1h] {
    --ink: #25364a;
    --muted: #697787;
    --paper: #fff;
    --accent: #315d94;
    --accent-soft: #eaf1fb;
    font-family: 'Comic Neue', Vazirmatn, sans-serif;
    color: var(--ink);
    max-width: 1180px;
    margin: 0 auto;
    padding: 1.2rem .8rem 3rem;
}
.page-head[b-x1nee41n1h] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.page-head > div[b-x1nee41n1h] { min-width: 0; }
.page-head h1[b-x1nee41n1h] { margin: .15rem 0 .3rem; font-size: clamp(1.8rem, 3vw, 2.35rem); letter-spacing: -.025em; }
.page-eyebrow[b-x1nee41n1h] { margin: 0; color: var(--accent); font-size: .78rem; font-weight: 700; letter-spacing: .055em; text-transform: uppercase; }
.sub[b-x1nee41n1h] { margin: 0 0 .4rem; color: var(--muted); line-height: 1.5; }
.btn-sketch[b-x1nee41n1h] { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 44px; padding: .4rem 1rem; border: 2px solid #2b2b2b; border-radius: 10px 4px 10px 4px; background: #fff; box-shadow: 2px 2px 0 #2b2b2b; color: #2b2b2b; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; transition: transform .15s, background .15s, box-shadow .15s; }
.btn-sketch:hover[b-x1nee41n1h] { transform: translate(-1px, -1px); background: #e8f0ff; box-shadow: 3px 3px 0 #2b2b2b; }
.btn-sketch.primary[b-x1nee41n1h] { background: #2b2b2b; border-color: #2b2b2b; color: #fff; }
.btn-sketch.primary:hover[b-x1nee41n1h] { background: #404040; }
.link-btn[b-x1nee41n1h] { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-height: 40px; padding: .3rem .5rem; border: 0; border-radius: 8px; background: transparent; color: var(--accent); font: inherit; font-weight: 700; cursor: pointer; }
.link-btn:hover[b-x1nee41n1h] { background: var(--accent-soft); }
.link-btn:disabled[b-x1nee41n1h] { color: #9ba5b0; cursor: default; }
.icon-btn[b-x1nee41n1h] { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: 0 0 auto; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font-size: 1.1rem; cursor: pointer; }
.icon-btn:hover[b-x1nee41n1h] { color: var(--accent); background: #ffffffb3; }
.icon-btn:disabled[b-x1nee41n1h] { opacity: .3; cursor: default; }
.icon-btn svg[b-x1nee41n1h], .drag-handle svg[b-x1nee41n1h], .watch-btn svg[b-x1nee41n1h] { width: 19px; height: 19px; flex: 0 0 auto; }
.drag-handle svg[b-x1nee41n1h] { fill: currentColor; }
.review-banner[b-x1nee41n1h] { display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem; margin-bottom: 1rem; border: 1px solid #d9e6fa; border-radius: 14px; background: linear-gradient(105deg, #edf4ff, #f7faff); color: var(--ink); text-decoration: none; }
.review-banner span[b-x1nee41n1h] { flex: 1; }
.review-banner > i[b-x1nee41n1h] { color: var(--accent); }
.review-banner:hover[b-x1nee41n1h] { border-color: #a7c2e6; }
.view-tabs[b-x1nee41n1h] { display: inline-flex; gap: .3rem; padding: .3rem; margin: 0 0 1rem; border: 1px solid #e1e6ed; border-radius: 13px; background: #f1f4f8; }
.view-tab[b-x1nee41n1h] { display: flex; align-items: center; justify-content: center; gap: .55rem; min-height: 46px; padding: .45rem 1rem; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font: inherit; text-align: left; cursor: pointer; transition: background .15s, box-shadow .15s; }
.view-tab span[b-x1nee41n1h] { display: grid; gap: .1rem; }
.view-tab small[b-x1nee41n1h] { font-size: .73rem; font-weight: 400; }
.view-tab.active[b-x1nee41n1h] { color: var(--accent); background: #fff; box-shadow: 0 2px 6px #25364a12; }
.view-tab:hover:not(.active)[b-x1nee41n1h] { background: #ffffff80; }
.toolbar[b-x1nee41n1h] { display: grid; gap: .7rem; padding: .9rem; margin-bottom: 1.1rem; border: 1px solid #e3e8ef; border-radius: 15px; background: #fff; }
.search-box[b-x1nee41n1h] { display: flex; align-items: center; gap: .6rem; min-height: 46px; padding: 0 .85rem; border: 1px solid #dce3ec; border-radius: 10px; background: #f8fafc; color: var(--muted); }
.search-box input[b-x1nee41n1h] { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 1rem; }
.search-box:focus-within[b-x1nee41n1h] { border-color: var(--accent); box-shadow: 0 0 0 3px #315d9414; }
.tag-row[b-x1nee41n1h] { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.tag-row > i[b-x1nee41n1h] { color: var(--muted); }
.tag[b-x1nee41n1h] { min-height: 34px; padding: .25rem .7rem; border: 1px solid #d8e0e9; border-radius: 999px; background: #f8fafc; color: #536477; font: inherit; font-size: .88rem; cursor: pointer; }
.tag.active[b-x1nee41n1h] { border-color: var(--accent); background: var(--accent); color: #fff; }
.tag:hover:not(.active)[b-x1nee41n1h] { border-color: #9bb6d7; background: #eef4fc; }
.tag.small[b-x1nee41n1h] { min-height: 30px; padding-inline: .6rem; font-size: .8rem; background: #ffffffa6; }
.result-line[b-x1nee41n1h] { display: flex; align-items: center; justify-content: space-between; gap: .5rem; color: var(--muted); font-size: .88rem; }
.export[b-x1nee41n1h] { display: flex; gap: .25rem; }
.arrange-hint[b-x1nee41n1h] { display: flex; align-items: baseline; gap: .4rem; margin: -.3rem 0 0; color: var(--muted); font-size: .8rem; }
.notice[b-x1nee41n1h] { padding: .65rem .85rem; margin: 0 0 1rem; border: 1px solid #cfe6dd; border-radius: 10px; background: #f1faf6; color: #30614d; font-size: .9rem; }
.grid[b-x1nee41n1h] { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: stretch; }
.card[b-x1nee41n1h] { --card-bg: #fff; display: flex; flex-direction: column; gap: .7rem; min-width: 0; padding: 1.1rem; border: 2px solid #2b2b2b; border-radius: 18px 8px 20px 10px; background: var(--card-bg); color: #2b2b2b; box-shadow: 4px 4px 0 #2b2b2b; transition: transform .16s ease, box-shadow .16s ease; }
.card:nth-child(3n + 2)[b-x1nee41n1h] { border-radius: 10px 20px 9px 18px; }
.card:nth-child(3n)[b-x1nee41n1h] { border-radius: 20px 10px 18px 7px; }
.card:hover[b-x1nee41n1h] { transform: translate(-1px, -1px); box-shadow: 6px 6px 0 #2b2b2b; }
.card.color-sunny[b-x1nee41n1h] { --card-bg: #fffae6; border-color: #2b2b2b; }
.card.color-mint[b-x1nee41n1h] { --card-bg: #eefaf3; border-color: #2b2b2b; }
.card.color-sky[b-x1nee41n1h] { --card-bg: #eef7ff; border-color: #2b2b2b; }
.card.color-lilac[b-x1nee41n1h] { --card-bg: #f5f0ff; border-color: #2b2b2b; }
.card.color-rose[b-x1nee41n1h] { --card-bg: #fff2f3; border-color: #2b2b2b; }
.card-head[b-x1nee41n1h] { display: flex; flex-direction: column; gap: .45rem; }
.card-head > div:first-child[b-x1nee41n1h] { min-width: 0; }
.term[b-x1nee41n1h] { margin: 0; font-size: 1.35rem; line-height: 1.25; letter-spacing: -.015em; overflow-wrap: anywhere; }
.kind[b-x1nee41n1h] { display: inline-block; width: fit-content; margin-top: .2rem; padding: .12rem .45rem; border: 1px solid #2b2b2b; border-radius: 8px 3px 8px 3px; background: #fff; color: #555; font-size: .72rem; }
.card-tools[b-x1nee41n1h] { display: flex; align-items: center; gap: .15rem; padding-top: .45rem; border-top: 1px dashed #2b2b2b; }
.drag-handle[b-x1nee41n1h] { display: inline-grid; place-items: center; width: 36px; height: 36px; margin-right: auto; border: 0; border-radius: 8px; background: transparent; color: #8a99aa; font: inherit; font-size: 1.25rem; touch-action: none; cursor: grab; }
.drag-handle:hover[b-x1nee41n1h] { background: #ffffffa6; color: var(--accent); }
.drag-handle:active[b-x1nee41n1h] { cursor: grabbing; }
.drag-handle:disabled[b-x1nee41n1h] { opacity: .3; cursor: default; }
.icon-btn.compact[b-x1nee41n1h] { width: 34px; height: 36px; font-size: 1rem; }
.color-picker[b-x1nee41n1h] { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; padding: .6rem; border: 1px solid #d5deea; border-radius: 10px; background: #ffffffb3; }
.color-picker > span[b-x1nee41n1h] { font-size: .8rem; color: var(--muted); }
.color-swatch[b-x1nee41n1h] { width: 30px; height: 30px; padding: 0; border: 2px solid #bdc8d5; border-radius: 50%; background: #fff; cursor: pointer; }
.color-swatch.color-sunny[b-x1nee41n1h] { background: #ffe891; }
.color-swatch.color-mint[b-x1nee41n1h] { background: #a8dfbc; }
.color-swatch.color-sky[b-x1nee41n1h] { background: #a8d6fb; }
.color-swatch.color-lilac[b-x1nee41n1h] { background: #d2b9f4; }
.color-swatch.color-rose[b-x1nee41n1h] { background: #f5b7c2; }
.color-swatch.selected[b-x1nee41n1h] { border-color: var(--accent); outline: 2px solid #315d9426; outline-offset: 2px; }
.translation[b-x1nee41n1h] { margin: 0; font-family: Vazirmatn, Tahoma, sans-serif; color: var(--accent); font-size: 1rem; }
.meaning[b-x1nee41n1h] { margin: 0; line-height: 1.5; font-size: .97rem; }
.context[b-x1nee41n1h] { margin: 0; padding: .6rem .75rem; border: 2px solid #2b2b2b; border-radius: 10px 4px 10px 4px; background: #ffffffb8; color: #505b68; font-size: .91rem; line-height: 1.55; font-style: italic; overflow-wrap: anywhere; }
.note[b-x1nee41n1h] { margin: 0; color: #6d624a; font-size: .87rem; overflow-wrap: anywhere; }
.note > i[b-x1nee41n1h] { margin-right: .25rem; color: #b58b3e; }
.card-tags[b-x1nee41n1h] { display: flex; flex-wrap: wrap; gap: .35rem; }
.card-foot[b-x1nee41n1h] { display: flex; align-items: center; gap: .45rem; padding-top: .75rem; margin-top: auto; border-top: 1px dashed #2b2b2b; }
.foot-btn[b-x1nee41n1h] { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-height: 40px; padding: .32rem .55rem; border: 2px solid #2b2b2b; border-radius: 9px 4px 9px 4px; background: #fff; box-shadow: 2px 2px 0 #2b2b2b; color: #2b2b2b; font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; }
.foot-btn.watch-btn[b-x1nee41n1h] { margin-right: auto; background: #2b2b2b; color: #fff; }
.foot-btn:hover:not(:disabled)[b-x1nee41n1h] { transform: translate(-1px, -1px); background: #e8f0ff; color: #2b2b2b; box-shadow: 3px 3px 0 #2b2b2b; }
.foot-btn.watch-btn:hover:not(:disabled)[b-x1nee41n1h] { background: #404040; color: #fff; }
.foot-btn.danger:hover[b-x1nee41n1h] { background: #fce9ed; color: #9f263b; }
.foot-btn:disabled[b-x1nee41n1h] { opacity: .4; cursor: default; }
.editor[b-x1nee41n1h] { display: grid; gap: .7rem; padding: .75rem; border: 2px solid #2b2b2b; border-radius: 12px 5px 12px 5px; background: #ffffffc7; }
.editor label[b-x1nee41n1h] { display: grid; gap: .3rem; font-size: .87rem; font-weight: 700; }
.editor small[b-x1nee41n1h] { color: var(--muted); font-weight: 400; }
.editor input[b-x1nee41n1h], .editor textarea[b-x1nee41n1h] { width: 100%; min-width: 0; min-height: 44px; padding: .5rem .65rem; border: 2px solid #2b2b2b; border-radius: 10px 4px 10px 4px; font: inherit; background: #fff; }
.editor input:focus[b-x1nee41n1h], .editor textarea:focus[b-x1nee41n1h] { outline: none; box-shadow: 0 0 0 3px #e8f0ff; }
.editor-actions[b-x1nee41n1h] { display: flex; justify-content: flex-end; gap: .5rem; }
.is-reordering .card[b-x1nee41n1h] { will-change: transform; }
.card.drag-origin[b-x1nee41n1h] { border: 2px dashed #2b2b2b; background: #eef4fb; box-shadow: none; }
.card.drag-origin > *[b-x1nee41n1h] { opacity: .16; }
.card.just-moved[b-x1nee41n1h] { border-color: #2b2b2b; box-shadow: 0 0 0 3px #e8f0ff, 4px 4px 0 #2b2b2b; }
.scene-library[b-x1nee41n1h] { display: grid; gap: .8rem; min-width: 0; }
.scene-library-head[b-x1nee41n1h] { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1rem; border: 1px solid #dce6f2; border-radius: 14px; background: #f3f7fd; }
.scene-library-head > div[b-x1nee41n1h] { min-width: 0; }
.scene-library-head h2[b-x1nee41n1h] { margin: .25rem 0; font-size: 1.4rem; overflow-wrap: anywhere; }
.eyebrow[b-x1nee41n1h] { color: var(--accent); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.scene-library-head p[b-x1nee41n1h] { margin: .3rem 0 0; font-size: .92rem; line-height: 1.45; }
.scene-translation[b-x1nee41n1h] { color: var(--accent); font-family: Vazirmatn, Tahoma, sans-serif; text-align: left; }
.scene-context[b-x1nee41n1h], .scene-note[b-x1nee41n1h] { color: var(--muted); }
.scene-progress[b-x1nee41n1h] { flex: 0 0 auto; padding: .3rem .55rem; border-radius: 8px; background: #fff; color: var(--muted); font-size: .8rem; }
.scene-terms[b-x1nee41n1h] { display: flex; gap: .45rem; min-width: 0; padding: .15rem .15rem .6rem; overflow-x: auto; scrollbar-width: thin; }
.scene-term[b-x1nee41n1h] { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .4rem; max-width: 220px; min-height: 40px; padding: .4rem .8rem; border: 1px solid #d6e0ec; border-radius: 10px; background: #fff; color: var(--muted); font: inherit; font-size: .9rem; cursor: pointer; }
.scene-term span[b-x1nee41n1h] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scene-term.active[b-x1nee41n1h] { background: var(--accent-soft); border-color: #a8c2e2; color: var(--accent); }
.scene-browser[b-x1nee41n1h] { min-width: 0; padding: .9rem; border: 1px solid #dce3ec; border-radius: 15px; background: #fff; }
.scene-browser-title[b-x1nee41n1h] { padding: 0 0 .7rem; margin-bottom: .7rem; border-bottom: 1px solid #e6ebf1; }
.scene-browser-title span[b-x1nee41n1h] { color: var(--muted); font-size: .75rem; }
.scene-browser-title h3[b-x1nee41n1h] { margin: .2rem 0 0; font-size: 1.1rem; overflow-wrap: anywhere; }
.bookmark-viewer[b-x1nee41n1h] { width: min(900px, calc(100vw - 32px)); max-width: none; max-height: min(760px, calc(100dvh - 32px)); padding: 0; border: 2px solid #2b2b2b; border-radius: 0; overflow: hidden; background: #fff; color: var(--ink); box-shadow: 4px 4px 0 #2b2b2b, 0 25px 90px #14243b40; }
.bookmark-viewer[b-x1nee41n1h]::backdrop { background: #10243b80; backdrop-filter: blur(4px); }
.bookmark-viewer[open][b-x1nee41n1h] { animation: viewer-in-b-x1nee41n1h .18s ease-out; }
.viewer-content[b-x1nee41n1h] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-height: min(758px, calc(100dvh - 34px)); }
.viewer-head[b-x1nee41n1h] { display: flex; align-items: flex-start; gap: .8rem; padding: 1rem 1.1rem .75rem; border-bottom: 1px solid #e5ebf2; }
.viewer-head > div[b-x1nee41n1h] { flex: 1; min-width: 0; align-self: center; }
.viewer-head h2[b-x1nee41n1h] { margin: .2rem 0 0; font-size: 1.4rem; overflow-wrap: anywhere; }
.viewer-close[b-x1nee41n1h] { margin-left: auto; border: 2px solid #2b2b2b; border-radius: 50% 45% 48% 44%; background: #fff; color: #2b2b2b; }
.viewer-close:hover[b-x1nee41n1h] { background: #eaf1fb; color: #315d94; }
.viewer-translation[b-x1nee41n1h] { margin: .2rem 0 0; color: var(--accent); font-family: Vazirmatn, Tahoma, sans-serif; font-size: .85rem; text-align: left; }
.viewer-player[b-x1nee41n1h] { min-width: 0; min-height: 0; padding: .85rem 1rem; overflow-y: auto; overscroll-behavior: contain; }
.viewer-foot[b-x1nee41n1h] { display: flex; align-items: center; justify-content: space-between; gap: .4rem; padding: .55rem .8rem; border-top: 1px solid #e5ebf2; background: #f8fafc; }
.viewer-foot > span[b-x1nee41n1h] { flex: 0 0 auto; color: var(--muted); font-size: .8rem; }
.viewer-foot .link-btn[b-x1nee41n1h] { font-size: .85rem; }
.state-box[b-x1nee41n1h] { padding: 3rem 1rem; color: var(--muted); text-align: center; }
.state-box.small[b-x1nee41n1h] { padding: 2rem 1rem; }
.state-box > i[b-x1nee41n1h] { display: block; font-size: 2.4rem; margin-bottom: .5rem; color: #8da7c5; }
.state-box h2[b-x1nee41n1h] { font-size: 1.4rem; color: var(--ink); }
.actions[b-x1nee41n1h] { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 1rem; }
.skeleton-card[b-x1nee41n1h] { min-height: 220px; box-shadow: none; }
.skeleton[b-x1nee41n1h] { height: 14px; border-radius: 6px; background: linear-gradient(90deg, #eef2f6 25%, #f8fafc 50%, #eef2f6 75%); background-size: 200% 100%; animation: shimmer-b-x1nee41n1h 1.2s infinite; }
.skeleton.short[b-x1nee41n1h] { width: 45%; height: 22px; }
.btn-sketch:focus-visible[b-x1nee41n1h], .link-btn:focus-visible[b-x1nee41n1h], .icon-btn:focus-visible[b-x1nee41n1h], .view-tab:focus-visible[b-x1nee41n1h], .tag:focus-visible[b-x1nee41n1h],
.drag-handle:focus-visible[b-x1nee41n1h], .foot-btn:focus-visible[b-x1nee41n1h], .color-swatch:focus-visible[b-x1nee41n1h], .scene-term:focus-visible[b-x1nee41n1h] { outline: 3px solid #80a9d9; outline-offset: 3px; }
@keyframes shimmer-b-x1nee41n1h { to { background-position: -200% 0; } }
@keyframes viewer-in-b-x1nee41n1h { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@media (min-width: 640px) { .saved[b-x1nee41n1h] { padding: 1.5rem 1rem 3rem; } .grid[b-x1nee41n1h] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 760px) {
    .toolbar[b-x1nee41n1h] { grid-template-columns: minmax(0, 1fr) auto; gap: .45rem 1rem; }
    .search-box[b-x1nee41n1h] { grid-column: 1; grid-row: 1; }
    .tag-row[b-x1nee41n1h] { grid-column: 2; grid-row: 1; max-width: 360px; }
    .result-line[b-x1nee41n1h] { grid-column: 2; grid-row: 2; gap: 1rem; }
    .arrange-hint[b-x1nee41n1h] { grid-column: 1; grid-row: 2; align-self: center; margin: 0; }
}
@media (min-width: 1080px) { .grid[b-x1nee41n1h] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 575.98px) {
    .page-head[b-x1nee41n1h] { align-items: stretch; }
    .page-head > .btn-sketch[b-x1nee41n1h] { width: 100%; }
    .review-banner[b-x1nee41n1h] { font-size: .9rem; }
    .view-tabs[b-x1nee41n1h] { display: flex; }
    .view-tab[b-x1nee41n1h] { flex: 1; padding-inline: .75rem; }
    .view-tab small[b-x1nee41n1h] { display: none; }
    .toolbar[b-x1nee41n1h] { padding: .7rem; }
    .arrange-hint[b-x1nee41n1h] { font-size: .78rem; }
    .icon-btn.compact[b-x1nee41n1h], .drag-handle[b-x1nee41n1h] { min-width: 40px; height: 42px; }
    .foot-btn[b-x1nee41n1h] { min-height: 44px; }
    .bookmark-viewer[b-x1nee41n1h] { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); }
    .viewer-content[b-x1nee41n1h] { max-height: calc(100dvh - 24px); }
    .viewer-head[b-x1nee41n1h] { padding: .8rem .75rem .6rem; }
    .viewer-head h2[b-x1nee41n1h] { font-size: 1.2rem; }
    .viewer-player[b-x1nee41n1h] { padding: .65rem; }
    .viewer-foot[b-x1nee41n1h] { padding-inline: .4rem; }
    .viewer-foot .link-btn[b-x1nee41n1h] { padding-inline: .25rem; font-size: .77rem; }
    .scene-library-head[b-x1nee41n1h] { padding: .8rem; }
    .scene-browser[b-x1nee41n1h] { padding: .7rem; }
}
@media (prefers-reduced-motion: reduce) { .card[b-x1nee41n1h], .view-tab[b-x1nee41n1h], .btn-sketch[b-x1nee41n1h] { transition: none; } .skeleton[b-x1nee41n1h], .bookmark-viewer[open][b-x1nee41n1h] { animation: none; } }
/* /Pages/classes/TeacherNoteCard.razor.rz.scp.css */
/* The teacher's grammar point: explanation, the line from the film, and its scene. */
.g-note[b-8v4y9tq1x1] {
    border: 2px solid #2b2b2b;
    border-left: 8px solid #7048e8;
    border-radius: 14px 6px 14px 6px;
    background: #fff;
    box-shadow: 2px 2px 0 #2b2b2b;
    padding: .9rem 1rem;
    display: grid;
    gap: .5rem;
}
.g-note header[b-8v4y9tq1x1] { display: grid; gap: .15rem; }
.g-teacher[b-8v4y9tq1x1] { font-size: .78rem; font-weight: bold; color: #7048e8; text-transform: uppercase; letter-spacing: .03em; }
.g-note h3[b-8v4y9tq1x1] { font-size: 1.15rem; margin: 0; }
.g-form[b-8v4y9tq1x1] { margin: 0; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .9rem; color: #5f3dc4; background: #f1ecff; border-radius: 6px; padding: .1rem .45rem; justify-self: start; }
.g-explain[b-8v4y9tq1x1] { margin: 0; line-height: 1.5; }
.g-fa[b-8v4y9tq1x1] { margin: 0; color: #444; }
.g-note blockquote[b-8v4y9tq1x1] { margin: 0; padding: .5rem .75rem; border-left: 4px solid #ffd84d; background: #fffdf3; border-radius: 0 8px 8px 0; font-size: 1.02rem; }
.g-note mark[b-8v4y9tq1x1] { background: #ffe066; padding: 0 .12rem; border-radius: 3px; font-weight: bold; }
.g-note footer[b-8v4y9tq1x1] { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.g-more[b-8v4y9tq1x1] { font-weight: bold; text-decoration: none; }
.g-scene[b-8v4y9tq1x1] { margin-top: .3rem; }
/* /Pages/collocations/CollocationLevelsBadge.razor.rz.scp.css */
.lv[b-a24bgybedc] { display: inline-flex; align-items: center; gap: .2rem; font-size: .8rem; }
    .lv .bi[b-a24bgybedc] { color: #ced4da; }
    .lv .bi-eye.on[b-a24bgybedc] { color: #4dabf7; }
    .lv .bi-keyboard.on[b-a24bgybedc] { color: #7048e8; }
    .lv .bi-pencil.on[b-a24bgybedc] { color: #2b8a3e; }
/* /Pages/collocations/CollocationMeetCard.razor.rz.scp.css */
.meet[b-y3jjdzz6a6] {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    padding: 1rem;
    border: 2px solid #2b2b2b;
    border-radius: 16px 6px 18px 8px;
    background: #fffdf3;
    box-shadow: 3px 3px 0 #2b2b2b;
    animation: meet-in-b-y3jjdzz6a6 .2s ease-out;
}

.meet-kind[b-y3jjdzz6a6] { margin: 0; color: #e67700; font-size: .85rem; font-weight: bold; text-transform: uppercase; letter-spacing: .04em; }
.meet-term[b-y3jjdzz6a6] { margin: 0; font-size: 1.9rem; line-height: 1.15; }
.meet-pattern[b-y3jjdzz6a6] { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .45rem; font-size: 1.15rem; font-weight: bold; color: #364fc7; }
    .meet-pattern span[b-y3jjdzz6a6] { padding: 0 .45rem; border-radius: 6px; background: #edf2ff; color: #4263eb; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; }
.meet-meaning[b-y3jjdzz6a6] { margin: 0; font-size: 1.08rem; line-height: 1.5; }
.meet-example[b-y3jjdzz6a6] { margin: 0; padding: .65rem .75rem; border-left: 4px solid #51cf66; background: #ebfbee; line-height: 1.55; }
    .meet-example mark[b-y3jjdzz6a6] { padding: 0 .12rem; border-radius: 3px; background: #b2f2bb; color: #155724; font-weight: bold; }
.meet-wrong[b-y3jjdzz6a6] { margin: 0; color: #c92a2a; }
.meet-rule[b-y3jjdzz6a6] { margin: 0; padding: .5rem .7rem; border-radius: 10px; background: #fff9db; color: #5c4b00; line-height: 1.5; }
    .meet-rule .bi[b-y3jjdzz6a6] { color: #e67700; }
    .meet-rule strong[b-y3jjdzz6a6] { margin-right: .25rem; }
.meet-also[b-y3jjdzz6a6] { margin: 0; color: #2b8a3e; font-size: .92rem; }
.meet-fa[b-y3jjdzz6a6] { margin: 0; padding: .45rem .7rem; border-radius: 10px; background: #fff; font-size: 1.1rem; }
.meet-actions[b-y3jjdzz6a6] { display: flex; justify-content: flex-end; }

.link-btn[b-y3jjdzz6a6] { align-self: flex-start; min-height: 40px; display: inline-flex; align-items: center; gap: .3rem; padding: 0 .3rem; border: none; background: transparent; font: inherit; font-weight: bold; color: #0d6efd; cursor: pointer; }
.btn-sketch[b-y3jjdzz6a6] {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 44px; padding: .45rem 1rem;
    font: inherit; font-weight: bold; color: #fff; background: #2b2b2b; border: 2px solid #2b2b2b;
    border-radius: 10px 4px 10px 4px; box-shadow: 2px 2px 0 #2b2b2b; cursor: pointer;
}
    .btn-sketch.big[b-y3jjdzz6a6] { min-height: 52px; font-size: 1.1rem; padding: 0 1.5rem; }
    .btn-sketch:focus-visible[b-y3jjdzz6a6], .link-btn:focus-visible[b-y3jjdzz6a6] { outline: 3px solid #0d6efd; outline-offset: 2px; }

@keyframes meet-in-b-y3jjdzz6a6 { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (max-width: 575.98px) {
    .meet-actions .btn-sketch[b-y3jjdzz6a6] { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .meet[b-y3jjdzz6a6] { animation: none; }
}
/* /Pages/collocations/CollocationPopup.razor.rz.scp.css */
/* A collocation in a popup: the grammar popup's layout, in blue (collocations are blue everywhere). */

.cp-overlay[b-w85x9seld9] {
    position: fixed;
    inset: 0;
    z-index: 1060;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(20, 20, 20, .45);
    backdrop-filter: blur(3px);
}

.cp-dialog[b-w85x9seld9] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: 92vh;
    max-height: 92dvh;
    font-family: 'Comic Neue', Vazirmatn, 'Comic Sans MS', sans-serif;
    color: #2b2b2b;
    background: #f8fbff;
    border: 2px solid #2b2b2b;
    border-bottom: none;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -4px 0 #2b2b2b;
    outline: none;
    animation: cp-up-b-w85x9seld9 .2s ease-out;
}

.cp-head[b-w85x9seld9] { display: flex; align-items: center; gap: .6rem; padding: .8rem 1rem .6rem; border-bottom: 1px dashed #c5d5ea; }
    .cp-head h2[b-w85x9seld9] { flex: 1; min-width: 0; margin: 0; font-size: 1.3rem; overflow-wrap: anywhere; }
.cp-level[b-w85x9seld9] { padding: .1rem .5rem; border-radius: 999px; background: #1864ab; color: #fff; font-size: .8rem; font-weight: bold; }
.cp-close[b-w85x9seld9] { flex: 0 0 auto; width: 40px; height: 40px; border: 2px solid #2b2b2b; border-radius: 50%; background: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.cp-close svg[b-w85x9seld9] { width: 20px; height: 20px; }
    .cp-close:hover[b-w85x9seld9], .cp-close:focus-visible[b-w85x9seld9] { background: #f1f3f5; outline: none; }

.cp-body[b-w85x9seld9] { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: .9rem 1rem 1rem; display: grid; gap: .8rem; align-content: start; }
.cp-state[b-w85x9seld9] { padding: 1.5rem 0; color: #6b6b6b; }
.cp-kind[b-w85x9seld9] { margin: 0; color: #1864ab; font-size: .85rem; font-weight: bold; }
.cp-meaning[b-w85x9seld9] { margin: 0; font-size: 1.08rem; line-height: 1.5; }
.cp-fa[b-w85x9seld9] { margin: 0; font-family: Vazirmatn, Tahoma, 'Segoe UI', sans-serif; font-size: 1.05rem; color: #364fc7; text-align: right; }
.cp-rule[b-w85x9seld9] { margin: 0; padding: .5rem .7rem; border-radius: 10px; background: #fff9db; color: #5c4b00; line-height: 1.5; }
    .cp-rule .bi[b-w85x9seld9] { color: #e67700; }
    .cp-rule strong[b-w85x9seld9] { margin-right: .25rem; }
.cp-word-link[b-w85x9seld9] { margin-left: .4rem; font-size: .85rem; font-weight: bold; color: #1864ab; }
.cp-example[b-w85x9seld9] { margin: 0; color: #495057; font-style: italic; }
.cp-pattern[b-w85x9seld9] { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; padding: .55rem .7rem; border: 1.5px dashed #74c0fc; border-radius: 10px; background: #eef8ff; }
.cp-pattern > span[b-w85x9seld9] { flex-basis: 100%; color: #1864ab; font-size: .78rem; font-weight: bold; text-transform: uppercase; letter-spacing: .04em; }
.cp-pattern strong[b-w85x9seld9] { padding: .15rem .45rem; border-radius: 999px; background: #fff; color: #0b4f88; }
.cp-pattern .cp-full-pattern[b-w85x9seld9] { max-width: 100%; overflow-wrap: anywhere; border-radius: 6px; }
.cp-pattern small[b-w85x9seld9] { flex-basis: 100%; color: #5c6770; }

.cp-scenes[b-w85x9seld9] { display: grid; gap: .45rem; }
.cp-section-head[b-w85x9seld9] { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.cp-section-head h3[b-w85x9seld9] { margin: 0; font-size: 1rem; }
.cp-section-head h3 .bi[b-w85x9seld9] { color: #1864ab; }
.cp-section-head small[b-w85x9seld9] { color: #6b6b6b; }
.cp-browser-head[b-w85x9seld9] { display: grid; gap: .35rem; }
.cp-browser-head p[b-w85x9seld9] { margin: 0; color: #5c6770; font-size: .9rem; }
.cp-back[b-w85x9seld9] { justify-self: start; min-height: 44px; padding: .35rem .65rem; border: 1.5px solid #74c0fc; border-radius: 10px; background: #fff; color: #1864ab; font: inherit; font-weight: bold; text-align: left; cursor: pointer; }
.cp-back:focus-visible[b-w85x9seld9], .cp-full-search:focus-visible[b-w85x9seld9] { outline: 3px solid #0d6efd; outline-offset: 2px; }
.cp-browser[b-w85x9seld9] { min-width: 0; }
.cp-full-search[b-w85x9seld9] { justify-self: start; min-height: 44px; display: inline-flex; align-items: center; gap: .3rem; color: #1864ab; font-weight: bold; }
.sr-only[b-w85x9seld9] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Say it this way: the wrong partner crossed out, the right one in green. */
.cp-compare[b-w85x9seld9] { display: grid; gap: .25rem; padding: .55rem .75rem; border: 1.5px solid #d0d5dd; border-radius: 10px 4px 10px 4px; background: #fff; }
.cp-wrong[b-w85x9seld9] { color: #c92a2a; text-decoration: line-through; text-decoration-thickness: 1px; }
.cp-right[b-w85x9seld9] { color: #2b8a3e; font-weight: bold; }

.cp-lines h3[b-w85x9seld9], .cp-family h3[b-w85x9seld9] { display: flex; align-items: center; gap: .4rem; margin: 0 0 .4rem; font-size: 1rem; }
    .cp-lines h3 .bi[b-w85x9seld9] { color: #1864ab; }
    .cp-lines h3 small[b-w85x9seld9] { font-weight: normal; color: #6b6b6b; }
.cp-lines ul[b-w85x9seld9] { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }

.cp-line[b-w85x9seld9] {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    width: 100%;
    min-height: 44px;
    padding: .45rem .6rem;
    border: 1.5px solid #d0d5dd;
    border-radius: 10px 4px 10px 4px;
    background: #fff;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

    .cp-line:hover:not(:disabled)[b-w85x9seld9], .cp-line:focus-visible[b-w85x9seld9] { border-color: #1c7ed6; background: #e7f5ff; outline: none; }
    .cp-line:disabled[b-w85x9seld9] { cursor: default; }
    .cp-line .bi[b-w85x9seld9] { color: #1864ab; font-size: 1.15rem; line-height: 1.3; }
    .cp-line mark[b-w85x9seld9] { background: #d0ebff; color: #1864ab; font-weight: bold; padding: 0 .1em; border-radius: 3px; }

.cp-link[b-w85x9seld9] { margin-top: .3rem; border: none; background: none; padding: 0; color: #1864ab; font: inherit; text-decoration: underline; cursor: pointer; }

.cp-chips[b-w85x9seld9] { display: flex; flex-wrap: wrap; gap: .35rem; }
.cp-chip[b-w85x9seld9] { min-height: 36px; padding: .2rem .7rem; border: 1.5px solid #74c0fc; border-radius: 999px; background: #fff; color: #1864ab; font: inherit; cursor: pointer; }
    .cp-chip:hover[b-w85x9seld9], .cp-chip:focus-visible[b-w85x9seld9] { background: #e7f5ff; outline: none; }

.cp-foot[b-w85x9seld9] { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom)); border-top: 1px dashed #c5d5ea; }

.cp-btn[b-w85x9seld9] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 44px;
    padding: .4rem 1rem;
    border: 2px solid #2b2b2b;
    border-radius: 10px 4px 10px 4px;
    background: #fff;
    box-shadow: 2px 2px 0 #2b2b2b;
    color: #2b2b2b;
    font-weight: bold;
    text-decoration: none;
}

    .cp-btn.primary[b-w85x9seld9] { background: #1864ab; border-color: #1864ab; color: #fff; box-shadow: 2px 2px 0 #2b2b2b; }
    .cp-btn:focus-visible[b-w85x9seld9] { outline: 3px solid #0d6efd; outline-offset: 2px; }

@keyframes cp-up-b-w85x9seld9 { from { transform: translateY(24px); opacity: 0; } }

@media (min-width: 640px) {
    .cp-overlay[b-w85x9seld9] { align-items: center; padding: 1.5rem; }
    .cp-dialog[b-w85x9seld9] { max-width: 640px; max-height: 88vh; border-bottom: 2px solid #2b2b2b; border-radius: 18px 6px 20px 8px; box-shadow: 4px 4px 0 #2b2b2b; }
}

@media (max-width: 399.98px) {
    .cp-head[b-w85x9seld9], .cp-body[b-w85x9seld9], .cp-foot[b-w85x9seld9] { padding-inline: .65rem; }
    .cp-foot[b-w85x9seld9] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cp-foot .cp-btn[b-w85x9seld9] { justify-content: center; min-width: 0; padding-inline: .4rem; font-size: .88rem; text-align: center; }
    .cp-foot .cp-btn:first-child[b-w85x9seld9] { grid-column: 1 / -1; }
}

/* The scene browser uses the same compact viewer as saved words. */
.cp-overlay.scene-view[b-w85x9seld9] { align-items: center; padding: 16px; background: #10243b80; backdrop-filter: blur(4px); }
.scene-view .cp-dialog[b-w85x9seld9] { width: min(900px, calc(100vw - 32px)); max-width: none; max-height: min(760px, calc(100dvh - 32px)); overflow: hidden; border: 2px solid #2b2b2b; border-radius: 0; background: #fff; color: #25364a; box-shadow: 4px 4px 0 #2b2b2b, 0 25px 90px #14243b40; }
.scene-view .cp-head[b-w85x9seld9] { gap: .8rem; padding: 1rem 1.1rem .75rem; border-bottom: 1px solid #e5ebf2; }
.scene-view .cp-head h2[b-w85x9seld9] { font-size: 1.4rem; }
.scene-view .cp-close[b-w85x9seld9] { display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; margin-left: auto; border: 2px solid #2b2b2b; border-radius: 50% 45% 48% 44%; background: #fff; color: #2b2b2b; }
.scene-view .cp-close:hover[b-w85x9seld9] { background: #eaf1fb; color: #315d94; }
.scene-view .cp-close:focus-visible[b-w85x9seld9] { outline: 3px solid #80a9d9; outline-offset: 2px; }
.scene-view .cp-body[b-w85x9seld9] { padding: .85rem 1rem; }
.cp-browser-foot[b-w85x9seld9] { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .4rem; padding: .55rem .8rem; border-top: 1px solid #e5ebf2; background: #f8fafc; }
.scene-view .cp-back[b-w85x9seld9], .scene-view .cp-full-search[b-w85x9seld9] { display: inline-flex; align-items: center; gap: .35rem; min-height: 40px; padding: .3rem .5rem; border: 0; border-radius: 8px; background: transparent; color: #315d94; font: inherit; font-size: .85rem; font-weight: bold; text-decoration: none; cursor: pointer; }
.scene-view .cp-back:hover[b-w85x9seld9], .scene-view .cp-full-search:hover[b-w85x9seld9] { background: #eaf1fb; }
@media (max-width: 575.98px) {
    .cp-overlay.scene-view[b-w85x9seld9] { padding: 8px; }
    .scene-view .cp-dialog[b-w85x9seld9] { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); }
    .scene-view .cp-head[b-w85x9seld9] { padding: .8rem .75rem .6rem; }
    .scene-view .cp-head h2[b-w85x9seld9] { font-size: 1.2rem; }
    .scene-view .cp-body[b-w85x9seld9] { padding: .65rem; }
    .cp-browser-foot[b-w85x9seld9] { padding-inline: .4rem; }
    .scene-view .cp-back[b-w85x9seld9], .scene-view .cp-full-search[b-w85x9seld9] { padding-inline: .25rem; font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) { .cp-dialog[b-w85x9seld9] { animation: none; } }

.cp-note[b-w85x9seld9] { margin: 0; padding: .5rem 1rem 0; color: #1864ab; font-size: .9rem; }
button.cp-btn[b-w85x9seld9] { font: inherit; font-weight: bold; cursor: pointer; }
    button.cp-btn:disabled[b-w85x9seld9] { opacity: .75; cursor: default; }
/* /Pages/collocations/CollocationPractice.razor.rz.scp.css */
/* Collocation practice: the grammar practice look, in blue. */

.gp[b-cvpm6av87k] {
    --ink: #2b2b2b;
    --muted: #6b6b6b;
    --paper: #fff;
    --accent: #0d6efd;
    --green: #1864ab;

    font-family: 'Comic Neue', Vazirmatn, 'Comic Sans MS', sans-serif;
    color: var(--ink);
    max-width: 760px;
    margin: 0 auto;
    padding: .75rem .75rem 3rem;
}

.back-link[b-cvpm6av87k] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-bottom: .5rem;
    color: var(--muted);
    font-size: .9rem;
    text-decoration: none;
}

.gp-head[b-cvpm6av87k] { margin-bottom: 1rem; }
    .gp-head h1[b-cvpm6av87k] { margin: 0; font-size: 1.8rem; }
    .gp-head h1 .bi[b-cvpm6av87k] { color: var(--green); }
.sub[b-cvpm6av87k] { margin: .2rem 0 0; color: var(--muted); font-size: 1.05rem; }

.progress-row[b-cvpm6av87k] {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .75rem;
    font-size: .85rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

    .progress-row .bar[b-cvpm6av87k] { flex: 1; height: 8px; background: #eee; border-radius: 999px; overflow: hidden; }
    .progress-row .bar div[b-cvpm6av87k] { height: 100%; background: var(--green); transition: width .3s; }

.state-box[b-cvpm6av87k] {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--muted);
}

    .state-box > i[b-cvpm6av87k], .done-icon[b-cvpm6av87k] { display: block; font-size: 2.5rem; color: var(--ink); margin-bottom: .5rem; }

.spinner[b-cvpm6av87k] {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    border: 3px solid #ddd;
    border-top-color: var(--ink);
    border-radius: 50%;
    animation: spin-b-cvpm6av87k .8s linear infinite;
}

.round-summary[b-cvpm6av87k] {
    text-align: center;
    padding: 1.5rem 1rem;
    border: 2px solid var(--ink);
    border-radius: 16px 6px 18px 8px;
    background: #fffdf3;
    box-shadow: 3px 3px 0 var(--ink);
    animation: pop-in-b-cvpm6av87k .25s ease-out;
}

    .round-summary h2[b-cvpm6av87k] { font-size: 1.5rem; }
    .round-summary .bi-trophy[b-cvpm6av87k] { color: #e0a800; }
    .score[b-cvpm6av87k] { font-size: 1.1rem; }
    .score strong[b-cvpm6av87k] { font-size: 1.5rem; }

.points[b-cvpm6av87k] {
    list-style: none;
    margin: 1rem auto 0;
    padding: 0;
    max-width: 480px;
    text-align: left;
}

    .points li[b-cvpm6av87k] {
        display: flex;
        align-items: center;
        gap: .5rem;
        padding: .45rem .2rem;
        border-bottom: 1px dashed #ddd;
    }

    .points a[b-cvpm6av87k] { flex: 1; min-width: 0; color: var(--ink); overflow-wrap: anywhere; }
    .points .count[b-cvpm6av87k] { color: var(--muted); font-variant-numeric: tabular-nums; }
    .points .all-right .bi[b-cvpm6av87k] { color: var(--green); }
    .points .to-work .bi[b-cvpm6av87k] { color: #e8590c; }

    .points .mastered[b-cvpm6av87k] {
        flex: 0 0 auto;
        padding: 0 .45rem;
        border-radius: 999px;
        background: #fff3bf;
        color: #8a6100;
        font-size: .78rem;
        font-weight: bold;
    }

.saved-note[b-cvpm6av87k] { margin: .9rem 0 0; font-size: .88rem; color: var(--muted); }
    .saved-note a[b-cvpm6av87k] { color: inherit; }

.actions[b-cvpm6av87k] { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 1.25rem; }

.btn-sketch[b-cvpm6av87k] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 44px;
    padding: .45rem 1rem;
    font: inherit;
    font-weight: bold;
    color: var(--ink);
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 10px 4px 10px 4px;
    box-shadow: 2px 2px 0 var(--ink);
    text-decoration: none;
    cursor: pointer;
}

    .btn-sketch.primary[b-cvpm6av87k] { background: var(--ink); color: #fff; }
    .btn-sketch.big[b-cvpm6av87k] { min-height: 52px; font-size: 1.1rem; padding: 0 1.5rem; }
    .btn-sketch:focus-visible[b-cvpm6av87k] { outline: 3px solid var(--accent); outline-offset: 2px; }

@keyframes pop-in-b-cvpm6av87k { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@keyframes spin-b-cvpm6av87k { to { transform: rotate(360deg); } }

@media (min-width: 576px) {
    .gp[b-cvpm6av87k] { padding: 1.25rem 1rem 3rem; }
}

@media (max-width: 575.98px) {
    .gp[b-cvpm6av87k] { padding-inline: .5rem; }
    .gp-head h1[b-cvpm6av87k] { font-size: 1.5rem; }
    .round-summary[b-cvpm6av87k] { padding: 1rem .65rem; }
    .round-summary .actions .btn-sketch[b-cvpm6av87k], .round-summary .actions > a[b-cvpm6av87k] { flex: 1 1 100%; width: 100%; }
    .points li[b-cvpm6av87k] { flex-wrap: wrap; }
    .use-it[b-cvpm6av87k] { padding-inline: .7rem; }
}

/* "Use it": the unit's writing task at the end */
.use-it[b-cvpm6av87k] { display: grid; gap: .55rem; margin: 1.2rem auto 0; max-width: 560px; padding: .9rem 1rem; border: 2px dashed #2b2b2b; border-radius: 14px; background: #fff; text-align: left; }
    .use-it h3[b-cvpm6av87k] { margin: 0; font-size: 1.2rem; }
    .use-it p[b-cvpm6av87k] { margin: 0; }
    .use-it textarea[b-cvpm6av87k] { width: 100%; padding: .55rem .7rem; border: 2px solid #2b2b2b; border-radius: 10px 4px 10px 4px; font: inherit; font-size: 1.02rem; resize: vertical; }
    .use-it textarea:focus[b-cvpm6av87k] { outline: 3px solid #0d6efd; outline-offset: 1px; }
    .use-it details summary[b-cvpm6av87k] { cursor: pointer; font-weight: bold; }
    .use-it ul[b-cvpm6av87k] { margin: .3rem 0 0; padding-left: 1.2rem; }
.use-task[b-cvpm6av87k] { font-weight: bold; }
.use-list[b-cvpm6av87k] { color: #6b6b6b; font-size: .92rem; }
.use-text[b-cvpm6av87k] { margin: 0; padding: .55rem .75rem; border-left: 4px solid #4dabf7; background: #e7f5ff; }
.use-compare[b-cvpm6av87k] { color: #495057; font-size: .95rem; }
.use-models li[b-cvpm6av87k] { margin-bottom: .25rem; color: #1b5e20; }
.use-used[b-cvpm6av87k] { color: #2b8a3e; font-weight: bold; }
.use-correction[b-cvpm6av87k] { font-weight: bold; color: #364fc7; }
.actions.left[b-cvpm6av87k] { justify-content: flex-start; align-items: center; margin-top: 0; }
    .actions.left small[b-cvpm6av87k] { color: #6b6b6b; }
.spinner.small[b-cvpm6av87k] { width: 1rem; height: 1rem; border-width: 2px; }
.link-btn[b-cvpm6av87k] { justify-self: start; min-height: 36px; padding: 0 .2rem; border: none; background: none; font: inherit; font-weight: bold; color: #0d6efd; cursor: pointer; }
/* /Pages/collocations/Collocations.razor.rz.scp.css */
/* Collocations: a motivating start (progress, one button, what's heard most), one even grid of cards, and the
   mistakes to avoid. Blue, like collocations everywhere; the site's hand-drawn borders. */

.co[b-uwho9ya73q] {
    --ink: #2b2b2b;
    --muted: #6b6b6b;
    --blue: #1864ab;
    --blue-mid: #1c7ed6;
    --blue-soft: #e7f5ff;
    --gold: #e0a800;

    font-family: 'Comic Neue', Vazirmatn, 'Comic Sans MS', sans-serif;
    color: var(--ink);
    max-width: 1080px;
    margin: 0 auto;
    padding: .75rem .75rem 3rem;
}

.co-state[b-uwho9ya73q] { text-align: center; padding: 2.5rem 1rem; color: var(--muted); }
    .co-state > i[b-uwho9ya73q] { display: block; font-size: 2.2rem; color: var(--ink); margin-bottom: .4rem; }
    .co-state.small[b-uwho9ya73q] { padding: 1.5rem 1rem; }
    .co-state p[b-uwho9ya73q] { margin: 0; }
.co-spinner[b-uwho9ya73q] { width: 26px; height: 26px; display: inline-block; border: 3px solid rgba(0,0,0,.15); border-top-color: var(--ink); border-radius: 50%; animation: co-spin-b-uwho9ya73q .8s linear infinite; }
@keyframes co-spin-b-uwho9ya73q { to { transform: rotate(360deg); } }

.co-link[b-uwho9ya73q] { border: 0; background: none; padding: 0; color: var(--blue); font: inherit; font-weight: bold; text-decoration: underline; cursor: pointer; }
.co-fa[b-uwho9ya73q] { font-family: Vazirmatn, Tahoma, 'Segoe UI', sans-serif; color: #364fc7; text-align: right; }

/* ---------- Hero ---------- */
.co-hero[b-uwho9ya73q] {
    display: grid;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding: 1.1rem 1.1rem 1.2rem;
    border: 2px solid var(--ink);
    border-radius: 18px 6px 20px 8px;
    background: linear-gradient(135deg, #f8fbff 0%, #eef6ff 100%);
    box-shadow: 3px 3px 0 var(--ink);
}

.co-eyebrow[b-uwho9ya73q] { display: inline-flex; align-items: center; gap: .3rem; margin: 0 0 .2rem; color: var(--blue); font-weight: bold; font-size: .9rem; }
.co-hero h1[b-uwho9ya73q] { margin: 0 0 .4rem; font-size: 1.8rem; line-height: 1.15; }
.co-lead[b-uwho9ya73q] { margin: 0; color: #444; line-height: 1.55; max-width: 38rem; }
    .co-lead strong[b-uwho9ya73q] { color: #2b8a3e; }
    .co-lead s[b-uwho9ya73q] { color: #c92a2a; }

.co-hero-side[b-uwho9ya73q] { display: grid; gap: .75rem; align-content: center; }

.co-progress[b-uwho9ya73q] { display: flex; align-items: center; gap: .8rem; }
.co-ring[b-uwho9ya73q] {
    --p: 0;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: conic-gradient(var(--gold) calc(var(--p) * 1%), #dbe4ee 0);
}

    .co-ring span[b-uwho9ya73q] {
        display: grid;
        place-items: center;
        width: 58px;
        height: 58px;
        border-radius: 50%;
        background: #fff;
        line-height: 1;
    }

    .co-ring strong[b-uwho9ya73q] { font-size: 1.25rem; }
    .co-ring small[b-uwho9ya73q] { font-size: .7rem; color: var(--muted); }
.co-progress-text[b-uwho9ya73q] { display: grid; gap: .15rem; }
    .co-progress-text strong[b-uwho9ya73q] { font-size: 1.05rem; }
    .co-progress-text span[b-uwho9ya73q] { color: var(--muted); font-size: .88rem; }

.co-cta[b-uwho9ya73q] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .15rem .45rem;
    min-height: 52px;
    padding: .45rem 1.2rem;
    border: 2px solid var(--ink);
    border-radius: 12px 4px 12px 4px;
    background: var(--blue);
    box-shadow: 3px 3px 0 var(--ink);
    color: #fff;
    font-size: 1.1rem;
    font-weight: bold;
    text-decoration: none;
    transition: transform .1s;
}

    .co-cta small[b-uwho9ya73q] { flex-basis: 100%; text-align: center; font-size: .78rem; font-weight: normal; opacity: .85; }
    .co-cta:hover[b-uwho9ya73q] { color: #fff; transform: translate(-1px, -1px); }
    .co-cta:focus-visible[b-uwho9ya73q] { outline: 3px solid #74c0fc; outline-offset: 2px; }
.co-login[b-uwho9ya73q] { margin: 0; text-align: center; color: var(--muted); font-size: .9rem; }

/* ---------- Personal learning path ---------- */
.co-today[b-uwho9ya73q] {
    margin-bottom: 1.25rem;
    padding: 1rem;
    border: 2px solid var(--ink);
    border-radius: 8px 18px 7px 18px;
    background: linear-gradient(135deg, #fff9db, #fff 68%);
    box-shadow: 3px 3px 0 #e9b949;
}
.co-today-head[b-uwho9ya73q] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; }
.co-today-head h2[b-uwho9ya73q] { margin: 0; font-size: 1.25rem; }
.co-today-head p:not(.co-eyebrow)[b-uwho9ya73q] { margin: .2rem 0 0; color: var(--muted); }
.co-today-start[b-uwho9ya73q] {
    display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-height: 44px; padding: .45rem .9rem;
    border: 2px solid var(--ink); border-radius: 10px 4px 10px 4px; background: #2b8a3e; box-shadow: 2px 2px 0 var(--ink);
    color: #fff; font-weight: bold; text-decoration: none;
}
.co-today-start:hover[b-uwho9ya73q] { color: #fff; transform: translate(-1px, -1px); }
.co-today-grid[b-uwho9ya73q] { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .55rem; margin-top: .85rem; }
.co-today-card[b-uwho9ya73q] {
    display: grid; align-content: start; gap: .25rem; min-height: 104px; padding: .65rem .7rem; border: 1.5px solid #d6b656;
    border-radius: 12px 5px 12px 5px; background: rgba(255,255,255,.92); color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.co-today-card:hover[b-uwho9ya73q], .co-today-card:focus-visible[b-uwho9ya73q] { border-color: var(--blue); background: var(--blue-soft); outline: none; }
.co-today-card strong[b-uwho9ya73q] { font-size: 1.02rem; }
.co-today-card > span:last-child[b-uwho9ya73q] { color: #364fc7; }
.co-today-reason[b-uwho9ya73q] { display: inline-flex; align-items: center; gap: .25rem; color: #9c5a00; font-size: .76rem; font-weight: bold; }
.co-today-reason.new[b-uwho9ya73q] { color: var(--blue); }
.co-today-done[b-uwho9ya73q] { display: flex; align-items: center; gap: .4rem; margin: .8rem 0 0; color: #2b8a3e; font-weight: bold; }

/* ---------- Most heard ---------- */
.co-units[b-uwho9ya73q] { margin-bottom: 1.25rem; }
    .co-units h2[b-uwho9ya73q] { display: flex; align-items: center; gap: .4rem; margin: 0 0 .55rem; font-size: 1.15rem; }
    .co-units h2 .bi[b-uwho9ya73q] { color: #7048e8; }
.co-unit-list[b-uwho9ya73q] { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .6rem; }
.co-unit[b-uwho9ya73q] { display: grid; gap: .2rem; align-content: start; padding: .75rem .85rem; border: 2px solid #2b2b2b; border-radius: 14px 5px 14px 5px; background: #f3f0ff; color: #2b2b2b; text-decoration: none; box-shadow: 2px 2px 0 #2b2b2b; }
    .co-unit:hover[b-uwho9ya73q], .co-unit:focus-visible[b-uwho9ya73q] { background: #e5dbff; outline: none; transform: translateY(-1px); }
    .co-unit strong[b-uwho9ya73q] { font-size: 1.05rem; }
    .co-unit small[b-uwho9ya73q] { color: #5c5f66; line-height: 1.35; }
.co-unit-level[b-uwho9ya73q] { justify-self: start; padding: 0 .4rem; border: 1.5px solid #2b2b2b; border-radius: 6px; font-size: .75rem; font-weight: bold; }
.co-unit-kind[b-uwho9ya73q] { color: #5f3dc4; font-size: .75rem; font-weight: bold; text-transform: uppercase; letter-spacing: .03em; }
    .co-unit-kind.word[b-uwho9ya73q] { color: #2b8a3e; }
    .co-unit-kind.contrast[b-uwho9ya73q] { color: #c92a2a; }
.co-unit-meta[b-uwho9ya73q] { color: #5f3dc4; font-size: .85rem; font-weight: bold; }

.co-popular[b-uwho9ya73q] { margin-bottom: 1.25rem; }
    .co-popular h2[b-uwho9ya73q] { display: flex; align-items: center; gap: .4rem; margin: 0 0 .55rem; font-size: 1.15rem; }
    .co-popular h2 .bi[b-uwho9ya73q] { color: #f76707; }

.co-strip[b-uwho9ya73q] {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 200px;
    gap: .65rem;
    overflow-x: auto;
    padding: 0 .1rem .6rem;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
}

.co-feature[b-uwho9ya73q] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-height: 112px;
    padding: .7rem .8rem;
    border: 2px solid var(--ink);
    border-radius: 14px 5px 14px 5px;
    background: #fff;
    box-shadow: 2px 2px 0 var(--ink);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    scroll-snap-align: start;
}

    .co-feature:hover[b-uwho9ya73q], .co-feature:focus-visible[b-uwho9ya73q] { background: var(--blue-soft); outline: none; }
.co-feature-text[b-uwho9ya73q] { font-weight: bold; font-size: 1.05rem; line-height: 1.25; }
.co-feature .co-heard[b-uwho9ya73q] { margin-top: auto; }

/* ---------- Tabs ---------- */
.co-tabs[b-uwho9ya73q] { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .9rem; border-bottom: 2px dashed #ced4da; padding-bottom: .6rem; }
    .co-tabs button[b-uwho9ya73q] {
        display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; padding: .3rem 1rem;
        border: 2px solid var(--ink); border-radius: 10px 4px 10px 4px; background: #fff; font: inherit; font-weight: bold; cursor: pointer;
    }
    .co-tabs button.active[b-uwho9ya73q] { background: var(--ink); color: #fff; }
    .co-tabs small[b-uwho9ya73q] { padding: 0 .4rem; border-radius: 999px; background: rgba(0,0,0,.08); font-weight: normal; }
    .co-tabs button.active small[b-uwho9ya73q] { background: rgba(255,255,255,.25); }

/* ---------- Finding ---------- */
.co-find[b-uwho9ya73q] { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .6rem; }

.co-search[b-uwho9ya73q] { position: relative; flex: 1 1 260px; display: flex; align-items: center; }
    .co-search > i[b-uwho9ya73q] { position: absolute; left: .85rem; color: var(--muted); }
    .co-search input[b-uwho9ya73q] { width: 100%; min-height: 44px; padding: .3rem 2.4rem .3rem 2.3rem; border: 2px solid var(--ink); border-radius: 999px; font: inherit; }
    .co-search input:focus[b-uwho9ya73q] { outline: 3px solid #a5d8ff; }
.co-clear[b-uwho9ya73q] { position: absolute; right: .4rem; width: 32px; height: 32px; border: 0; border-radius: 50%; background: #f1f3f5; cursor: pointer; }

.co-select[b-uwho9ya73q] { min-height: 44px; padding: .2rem .7rem; border: 2px solid var(--ink); border-radius: 999px; background: #fff; font: inherit; }

.co-chips[b-uwho9ya73q] { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .55rem; }
.co-chip[b-uwho9ya73q] {
    display: inline-flex;
    align-items: baseline;
    gap: .35rem;
    min-height: 40px;
    padding: .35rem .85rem;
    border: 2px solid #ced4da;
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-weight: bold;
    cursor: pointer;
}

    .co-chip small[b-uwho9ya73q] { font-weight: normal; color: var(--muted); }
    .co-chip:hover[b-uwho9ya73q] { border-color: var(--blue-mid); }
    .co-chip.on[b-uwho9ya73q] { border-color: var(--blue); background: var(--blue); color: #fff; }
    .co-chip.on small[b-uwho9ya73q] { color: rgba(255,255,255,.85); }
    .co-chips.small .co-chip[b-uwho9ya73q] { min-height: 36px; padding: .25rem .75rem; font-size: .9rem; }

.co-families[b-uwho9ya73q] { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: .2rem 0 .6rem; }
.co-families-label[b-uwho9ya73q] { color: var(--muted); font-size: .9rem; margin-right: .2rem; }
.co-family[b-uwho9ya73q] {
    min-height: 34px;
    padding: .15rem .7rem;
    border: 1.5px dashed #74c0fc;
    border-radius: 999px;
    background: #fff;
    color: var(--blue);
    font: inherit;
    font-weight: bold;
    cursor: pointer;
}

    .co-family small[b-uwho9ya73q] { font-weight: normal; color: var(--muted); }
    .co-family.on[b-uwho9ya73q] { border-style: solid; background: var(--blue-soft); }
.co-family-practice[b-uwho9ya73q] { margin-left: .3rem; color: var(--blue); font-weight: bold; font-size: .9rem; }

.co-count[b-uwho9ya73q] { margin: .2rem 0 .6rem; color: var(--muted); font-size: .9rem; }

/* ---------- The grid: every card the same shape ---------- */
.co-grid[b-uwho9ya73q] { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .7rem; }

.co-card[b-uwho9ya73q] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    min-height: 132px;
    padding: .7rem .8rem .6rem;
    border: 2px solid var(--ink);
    border-radius: 14px 5px 14px 5px;
    background: #fff;
    box-shadow: 2px 2px 0 var(--ink);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform .1s, background .1s;
}

    .co-card:hover[b-uwho9ya73q], .co-card:focus-visible[b-uwho9ya73q] { background: var(--blue-soft); transform: translate(-1px, -1px); outline: none; }
    .co-card.mastered[b-uwho9ya73q] { border-color: var(--gold); box-shadow: 2px 2px 0 var(--gold); }

.co-card-top[b-uwho9ya73q] { display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
.co-level[b-uwho9ya73q] { padding: 0 .45rem; border-radius: 999px; background: var(--blue); color: #fff; font-size: .72rem; font-weight: bold; }
.co-badge[b-uwho9ya73q] { padding: 0 .5rem; border-radius: 999px; font-size: .72rem; font-weight: bold; }
    .co-badge.mastered[b-uwho9ya73q] { background: #fff3bf; color: #8a6100; }
    .co-badge.practising[b-uwho9ya73q] { background: #d0ebff; color: var(--blue); }
    .co-badge.seen[b-uwho9ya73q] { background: #f1f3f5; color: #495057; }
.co-card-text[b-uwho9ya73q] { font-size: 1.12rem; font-weight: bold; line-height: 1.25; overflow-wrap: anywhere; }
.co-card .co-fa[b-uwho9ya73q] { font-size: .95rem; }
.co-card-foot[b-uwho9ya73q] { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; padding-top: .3rem; border-top: 1px dashed #dee2e6; font-size: .8rem; }
.co-not[b-uwho9ya73q] { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .co-not s[b-uwho9ya73q] { color: #c92a2a; }
.co-kind[b-uwho9ya73q] { color: var(--muted); }
.co-heard[b-uwho9ya73q] { display: inline-flex; align-items: center; gap: .25rem; color: var(--muted); font-size: .8rem; white-space: nowrap; }

.co-more[b-uwho9ya73q] { display: flex; justify-content: center; margin-top: 1rem; }
.co-more-btn[b-uwho9ya73q] {
    min-height: 46px;
    padding: .35rem 1.4rem;
    border: 2px solid var(--ink);
    border-radius: 10px 4px 10px 4px;
    background: #fff;
    box-shadow: 2px 2px 0 var(--ink);
    font: inherit;
    font-weight: bold;
    cursor: pointer;
}

    .co-more-btn small[b-uwho9ya73q] { font-weight: normal; color: var(--muted); margin-left: .3rem; }

/* ---------- Mistakes: masonry columns, so groups of any length sit snugly ---------- */
.co-tab-intro[b-uwho9ya73q] { margin: 0 0 .9rem; color: #555; max-width: 40rem; }

.co-mistakes[b-uwho9ya73q] { columns: 2 340px; column-gap: .9rem; }

.co-mgroup[b-uwho9ya73q] {
    display: inline-block;
    width: 100%;
    margin: 0 0 .9rem;
    padding: .8rem .9rem;
    border: 2px solid var(--ink);
    border-radius: 16px 6px 18px 8px;
    background: #fff;
    box-shadow: 2px 2px 0 var(--ink);
    break-inside: avoid;
}

.co-rule[b-uwho9ya73q] { margin: 0 0 .6rem; padding: .45rem .6rem; border-radius: 8px; background: #fff9db; color: #5c4b00; font-size: .92rem; line-height: 1.45; }
    .co-rule .bi[b-uwho9ya73q] { color: #e67700; }
.co-mgroup-head[b-uwho9ya73q] { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; }
    .co-mgroup-head h2[b-uwho9ya73q] { margin: 0; font-size: 1.15rem; }
.co-test[b-uwho9ya73q] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    min-height: 36px;
    padding: .15rem .75rem;
    border: 2px solid var(--blue);
    border-radius: 999px;
    color: var(--blue);
    font-size: .88rem;
    font-weight: bold;
    text-decoration: none;
    white-space: nowrap;
}

    .co-test:hover[b-uwho9ya73q] { background: var(--blue-soft); }

.co-mgroup ul[b-uwho9ya73q] { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.co-pair[b-uwho9ya73q] {
    display: grid;
    gap: .1rem;
    width: 100%;
    min-height: 44px;
    padding: .45rem .6rem;
    border: 1.5px solid #e9ecef;
    border-radius: 10px;
    background: #fafbfc;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

    .co-pair:hover[b-uwho9ya73q], .co-pair:focus-visible[b-uwho9ya73q] { border-color: var(--blue-mid); background: var(--blue-soft); outline: none; }
.co-wrong[b-uwho9ya73q] { color: #c92a2a; text-decoration: line-through; text-decoration-thickness: 1px; }
.co-right[b-uwho9ya73q] { color: #2b8a3e; font-weight: bold; }
.co-wrong .bi[b-uwho9ya73q], .co-right .bi[b-uwho9ya73q] { margin-right: .2rem; }
.co-pair .co-fa[b-uwho9ya73q] { font-size: .9rem; }

@media (min-width: 760px) {
    .co-hero[b-uwho9ya73q] { grid-template-columns: 1fr auto; align-items: center; padding: 1.4rem 1.5rem; }
    .co-hero h1[b-uwho9ya73q] { font-size: 2.1rem; }
    .co-hero-side[b-uwho9ya73q] { min-width: 250px; }
}

@media (max-width: 575.98px) {
    .co[b-uwho9ya73q] { padding-inline: .5rem; }
    .co-hero[b-uwho9ya73q], .co-today[b-uwho9ya73q] { padding: .8rem; }
    .co-hero h1[b-uwho9ya73q] { font-size: 1.55rem; }
    .co-today-head > div[b-uwho9ya73q], .co-today-start[b-uwho9ya73q] { width: 100%; }
    .co-today-grid[b-uwho9ya73q], .co-unit-list[b-uwho9ya73q], .co-grid[b-uwho9ya73q] { grid-template-columns: minmax(0, 1fr); }
    .co-find .co-search[b-uwho9ya73q], .co-find .co-select[b-uwho9ya73q] { flex: 1 1 100%; width: 100%; }
    .co-tabs button[b-uwho9ya73q] { flex: 1 1 100%; justify-content: center; }
    .co-chip[b-uwho9ya73q] { max-width: 100%; white-space: normal; }
    .co-mgroup-head[b-uwho9ya73q] { align-items: stretch; flex-direction: column; }
    .co-test[b-uwho9ya73q] { justify-content: center; }
}
/* /Pages/collocations/CollocationScenePlayer.razor.rz.scp.css */
.csp[b-pzqr9dmsg9] { display: grid; gap: .45rem; }
.csp-video[b-pzqr9dmsg9] { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border: 2px solid #2b2b2b; border-radius: 12px 5px 12px 5px; background: #111; }
.csp-video video[b-pzqr9dmsg9] { display: block; width: 100%; height: 100%; object-fit: contain; background: #111; }
.csp-play[b-pzqr9dmsg9] { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 58px; height: 58px; border: 2px solid #fff; border-radius: 50%; background: #1864ab; color: #fff; font-size: 2rem; cursor: pointer; box-shadow: 0 3px 12px rgba(0,0,0,.35); }
.csp-play svg[b-pzqr9dmsg9] { width: 32px; height: 32px; fill: currentColor; }
.csp-loading[b-pzqr9dmsg9] { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .7rem; border-radius: 999px; background: rgba(0,0,0,.75); color: #fff; }
.csp-tools[b-pzqr9dmsg9] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; }
.csp-tools button[b-pzqr9dmsg9] { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; min-width: 0; min-height: 44px; padding: .3rem .45rem; border: 1.5px solid #74c0fc; border-radius: 10px; background: #fff; color: #1864ab; font: inherit; font-weight: bold; cursor: pointer; }
.csp-tools button:disabled[b-pzqr9dmsg9] { opacity: .6; cursor: default; }
.csp-tools button:focus-visible[b-pzqr9dmsg9] { outline: 3px solid #1864ab; outline-offset: 2px; }
.csp-tools .csp-previous span[b-pzqr9dmsg9], .csp-tools .csp-next span[b-pzqr9dmsg9] { font-size: 1.35rem; line-height: 1; }
.csp-episode[b-pzqr9dmsg9] { color: #6b6b6b; overflow-wrap: anywhere; }
.csp blockquote[b-pzqr9dmsg9] { margin: 0; padding: .6rem .7rem; border-left: 4px solid #74c0fc; background: #f1f8ff; line-height: 1.5; }
.csp mark[b-pzqr9dmsg9] { padding: 0 .12rem; border-radius: 3px; background: #d0ebff; color: #0b4f88; font-weight: bold; }
.csp-message[b-pzqr9dmsg9] { margin: 0; color: #a61e4d; font-size: .9rem; }
@media (max-width: 480px) { .csp-tools[b-pzqr9dmsg9] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* /Pages/collocations/CollocationStory.razor.rz.scp.css */
.cs[b-v9gt3n18hg] { margin: 1rem 0; padding: .9rem 1rem; border: 2px solid #2b2b2b; border-radius: 14px 6px 16px 8px; background: #fff; box-shadow: 3px 3px 0 #2b2b2b; }
    .cs h2[b-v9gt3n18hg], .cs h3[b-v9gt3n18hg] { margin: 0 0 .25rem; font-size: 1.15rem; }
    .cs h2 .bi[b-v9gt3n18hg], .cs h3 .bi[b-v9gt3n18hg] { color: #7048e8; }
.cs-intro[b-v9gt3n18hg] { margin: 0 0 .6rem; color: #6b6b6b; font-size: .92rem; }
.cs-text[b-v9gt3n18hg] { margin: 0; font-size: 1.12rem; line-height: 2; }
    .cs-text mark[b-v9gt3n18hg] { padding: .05rem .2rem; border-radius: 4px; background: #e5dbff; color: #3b1f8f; font-weight: bold; }

.cs-box[b-v9gt3n18hg] { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .7rem; padding: .55rem; list-style: none; border: 1.5px dashed #b197fc; border-radius: 10px; background: #f8f0fc; }
    .cs-box li[b-v9gt3n18hg] { padding: .15rem .55rem; border-radius: 999px; background: #fff; border: 1px solid #d0bfff; font-size: .95rem; }

.cs-gap[b-v9gt3n18hg] { min-width: 6ch; max-width: 100%; padding: .1rem .35rem; border: none; border-bottom: 2px solid #7048e8; background: #f3f0ff; font: inherit; font-size: 1rem; color: inherit; }
    .cs-gap:focus[b-v9gt3n18hg] { outline: 2px solid #7048e8; outline-offset: 1px; }

.cs-result[b-v9gt3n18hg] { padding: .05rem .25rem; border-radius: 4px; }
    .cs-result.right[b-v9gt3n18hg] { background: #d3f9d8; color: #1b5e20; }
    .cs-result.otherform[b-v9gt3n18hg] { background: #fff3bf; color: #5c4b00; }
    .cs-result.wrong[b-v9gt3n18hg] { background: #ffe3e3; color: #a61e1e; }
    .cs-result s[b-v9gt3n18hg] { margin-right: .25rem; opacity: .75; }

.cs-actions[b-v9gt3n18hg] { margin-top: .7rem; display: flex; justify-content: flex-end; }
.cs-score[b-v9gt3n18hg] { margin: .7rem 0 .2rem; }

.btn-sketch[b-v9gt3n18hg] {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 44px; padding: .45rem 1rem;
    font: inherit; font-weight: bold; color: #2b2b2b; background: #fff; border: 2px solid #2b2b2b;
    border-radius: 10px 4px 10px 4px; box-shadow: 2px 2px 0 #2b2b2b; cursor: pointer;
}
    .btn-sketch.primary[b-v9gt3n18hg] { color: #fff; background: #2b2b2b; }
    .btn-sketch:disabled[b-v9gt3n18hg] { opacity: .55; cursor: not-allowed; }
.link-btn[b-v9gt3n18hg] { min-height: 40px; display: inline-flex; align-items: center; gap: .3rem; padding: 0 .3rem; border: none; background: transparent; font: inherit; font-weight: bold; color: #0d6efd; cursor: pointer; }
/* /Pages/collocations/CollocationUnit.razor.rz.scp.css */
.cu[b-a2hvuynrv8] {
    font-family: 'Comic Neue', Vazirmatn, 'Comic Sans MS', sans-serif;
    color: #2b2b2b;
    max-width: 760px;
    margin: 0 auto;
    padding: .75rem .75rem 3rem;
}

.back-link[b-a2hvuynrv8] { display: inline-flex; align-items: center; gap: .3rem; margin-bottom: .5rem; color: #6b6b6b; font-size: .9rem; text-decoration: none; }

.cu-head h1[b-a2hvuynrv8] { margin: 0; font-size: 1.9rem; }
.cu-kind[b-a2hvuynrv8] { margin: 0; color: #7048e8; font-weight: bold; font-size: .9rem; }
.cu-situation[b-a2hvuynrv8] { margin: .3rem 0 0; color: #5c5f66; font-size: 1.05rem; }

.cu-steps.four[b-a2hvuynrv8] { grid-template-columns: repeat(4, 1fr); }
.cu-steps.two[b-a2hvuynrv8] { grid-template-columns: repeat(2, 1fr); }
.cu-steps[b-a2hvuynrv8] { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: 1rem 0; padding: 0; list-style: none; }
    .cu-steps li[b-a2hvuynrv8] { display: flex; gap: .45rem; align-items: flex-start; padding: .6rem .7rem; border-radius: 12px; background: #f3f0ff; font-size: .92rem; line-height: 1.35; }
    .cu-steps .bi[b-a2hvuynrv8] { color: #7048e8; font-size: 1.2rem; }

.cu-start[b-a2hvuynrv8] { margin-bottom: 1rem; }

.cu-list[b-a2hvuynrv8] { display: grid; gap: .4rem; margin: 0; padding: 0; list-style: none; }
    .cu-list li[b-a2hvuynrv8] { display: flex; align-items: flex-start; gap: .6rem; padding: .55rem .7rem; border: 1.5px solid #dee2e6; border-radius: 10px; background: #fff; }
    .cu-list li.mastered[b-a2hvuynrv8] { border-color: #8ce99a; background: #ebfbee; }
.cu-status[b-a2hvuynrv8] { flex: 0 0 auto; font-size: 1.1rem; color: #adb5bd; }
    .mastered .cu-status[b-a2hvuynrv8] { color: #f59f00; }
    .practising .cu-status[b-a2hvuynrv8] { color: #4dabf7; }
    .seen .cu-status[b-a2hvuynrv8] { color: #845ef7; }
.cu-text[b-a2hvuynrv8] { display: grid; }
    .cu-text small[b-a2hvuynrv8] { color: #6b6b6b; line-height: 1.35; }
.cu-note[b-a2hvuynrv8] { margin-top: 1rem; color: #6b6b6b; }
    .cu-note a[b-a2hvuynrv8] { color: inherit; }

.btn-sketch[b-a2hvuynrv8] {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 44px; padding: .45rem 1rem;
    font: inherit; font-weight: bold; color: #fff; background: #2b2b2b; border: 2px solid #2b2b2b;
    border-radius: 10px 4px 10px 4px; box-shadow: 2px 2px 0 #2b2b2b; text-decoration: none; cursor: pointer;
}
    .btn-sketch.big[b-a2hvuynrv8] { min-height: 52px; font-size: 1.1rem; padding: 0 1.5rem; }
    .btn-sketch:focus-visible[b-a2hvuynrv8] { outline: 3px solid #0d6efd; outline-offset: 2px; }

.state-box[b-a2hvuynrv8] { text-align: center; padding: 2rem 1rem; color: #6b6b6b; }
    .state-box > i[b-a2hvuynrv8] { display: block; font-size: 2.5rem; color: #2b2b2b; margin-bottom: .5rem; }
.spinner[b-a2hvuynrv8] { display: inline-block; width: 2rem; height: 2rem; border: 3px solid #ddd; border-top-color: #2b2b2b; border-radius: 50%; animation: cu-spin-b-a2hvuynrv8 .8s linear infinite; }
@keyframes cu-spin-b-a2hvuynrv8 { to { transform: rotate(360deg); } }

@media (max-width: 760px) {
    .cu-steps.four[b-a2hvuynrv8] { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575.98px) {
    .cu-steps[b-a2hvuynrv8], .cu-steps.four[b-a2hvuynrv8], .cu-steps.two[b-a2hvuynrv8] { grid-template-columns: 1fr; }
    .cu-start[b-a2hvuynrv8] { width: 100%; }
}

.cu-summary[b-a2hvuynrv8] { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin: .7rem 0 0; color: #495057; font-weight: bold; }
    .cu-summary .bi[b-a2hvuynrv8] { margin-right: .2rem; color: #7048e8; }
.cu-levels[b-a2hvuynrv8] { margin-left: auto; flex: 0 0 auto; }
/* /Pages/collocations/CollocationWord.razor.rz.scp.css */
.cw[b-6apb2j1r68] {
    font-family: 'Comic Neue', Vazirmatn, 'Comic Sans MS', sans-serif;
    color: #2b2b2b;
    max-width: 820px;
    margin: 0 auto;
    padding: .75rem 1rem 3rem;
}

.back-link[b-6apb2j1r68] { display: inline-flex; align-items: center; gap: .3rem; margin-bottom: .5rem; color: #6b6b6b; font-size: .9rem; text-decoration: none; }

.cw-head[b-6apb2j1r68] { margin-bottom: 1rem; }
    .cw-head h1[b-6apb2j1r68] { margin: 0; font-size: 2.2rem; line-height: 1.1; }
.cw-kind[b-6apb2j1r68] { margin: 0; color: #1864ab; font-weight: bold; font-size: .9rem; }
.cw-lead[b-6apb2j1r68] { margin: .35rem 0 0; color: #5c5f66; font-size: 1.05rem; max-width: 40rem; }
.cw-progress[b-6apb2j1r68] { margin: .35rem 0 0; color: #b35c00; font-weight: bold; font-size: .92rem; }
    .cw-progress .bi[b-6apb2j1r68] { color: #f59f00; }
.cw-actions[b-6apb2j1r68] { margin-top: .8rem; display: flex; flex-wrap: wrap; gap: .5rem; }

.cw-rule[b-6apb2j1r68] { margin: 0 0 .8rem; padding: .55rem .75rem; border-radius: 10px; background: #fff9db; color: #5c4b00; line-height: 1.5; }
    .cw-rule .bi[b-6apb2j1r68] { color: #e67700; }
    .cw-rule strong[b-6apb2j1r68] { margin-right: .25rem; }

.cw-group[b-6apb2j1r68] { margin-top: 1.2rem; }
    .cw-group h2[b-6apb2j1r68] { margin: 0 0 .5rem; font-size: 1.1rem; text-transform: capitalize; color: #364fc7; }
.cw-note[b-6apb2j1r68] { margin: -.2rem 0 .6rem; color: #6b6b6b; }

.cw-list[b-6apb2j1r68] { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }

.cw-item[b-6apb2j1r68], .cw-pair[b-6apb2j1r68] {
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .6rem .75rem;
    border: 1.5px solid #dee2e6;
    border-radius: 10px;
    background: #fff;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
    .cw-item:hover[b-6apb2j1r68], .cw-pair:hover[b-6apb2j1r68] { border-color: #74c0fc; background: #f8fbff; }
    .cw-item:focus-visible[b-6apb2j1r68], .cw-pair:focus-visible[b-6apb2j1r68] { outline: 3px solid #0d6efd; outline-offset: 2px; }
    .cw-item.mastered[b-6apb2j1r68] { border-color: #8ce99a; background: #ebfbee; }

.cw-check[b-6apb2j1r68] { flex: 0 0 auto; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #d3f9d8; color: #2b8a3e; }
.cw-text[b-6apb2j1r68] { flex: 1; min-width: 0; display: grid; gap: .1rem; }
    .cw-text strong[b-6apb2j1r68] { font-size: 1.05rem; overflow-wrap: anywhere; }
    .cw-text small[b-6apb2j1r68] { color: #6b6b6b; line-height: 1.35; }
.cw-side[b-6apb2j1r68] { flex: 0 0 auto; display: grid; justify-items: end; gap: .2rem; max-width: 40%; }
.cw-fa[b-6apb2j1r68] { font-family: Vazirmatn, Tahoma, 'Segoe UI', sans-serif; color: #364fc7; text-align: right; }
.cw-meta[b-6apb2j1r68] { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; color: #6b6b6b; font-size: .8rem; }
.cw-level[b-6apb2j1r68] { padding: 0 .4rem; border-radius: 999px; background: #e7f5ff; color: #1864ab; font-weight: bold; }
.cw-mastered[b-6apb2j1r68] { color: #b35c00; }

.cw-not h2[b-6apb2j1r68] { color: #c92a2a; text-transform: none; }
.cw-pair[b-6apb2j1r68] { flex-wrap: wrap; align-items: center; }
.cw-wrong[b-6apb2j1r68] { color: #c92a2a; }
.cw-right[b-6apb2j1r68] { color: #2b8a3e; font-weight: bold; }

.state-box[b-6apb2j1r68] { display: grid; justify-items: center; gap: .6rem; padding: 2.5rem 1rem; color: #6b6b6b; text-align: center; }
    .state-box .bi[b-6apb2j1r68] { font-size: 2rem; }
.spinner[b-6apb2j1r68] { width: 28px; height: 28px; border: 3px solid #dee2e6; border-top-color: #2b2b2b; border-radius: 50%; animation: cw-spin-b-6apb2j1r68 .8s linear infinite; }
@keyframes cw-spin-b-6apb2j1r68 { to { transform: rotate(360deg); } }

.btn-sketch[b-6apb2j1r68] {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 44px; padding: .45rem 1rem;
    font: inherit; font-weight: bold; color: #2b2b2b; background: #fff; border: 2px solid #2b2b2b;
    border-radius: 10px 4px 10px 4px; box-shadow: 2px 2px 0 #2b2b2b; text-decoration: none; cursor: pointer;
}
    .btn-sketch.primary[b-6apb2j1r68] { color: #fff; background: #2b2b2b; }
    .btn-sketch.big[b-6apb2j1r68] { min-height: 52px; font-size: 1.1rem; padding: 0 1.5rem; }
    .btn-sketch:focus-visible[b-6apb2j1r68] { outline: 3px solid #0d6efd; outline-offset: 2px; }

@media (max-width: 560px) {
    .cw-item[b-6apb2j1r68] { flex-wrap: wrap; }
    .cw-side[b-6apb2j1r68] { max-width: none; flex-basis: 100%; justify-items: start; padding-left: 2.1rem; }
    .cw-meta[b-6apb2j1r68] { justify-content: flex-start; }
    .cw-fa[b-6apb2j1r68] { text-align: left; }
}
/* /Pages/episode/EpisodeReading.razor.rz.scp.css */
.reader-stage[b-xqghk8950d] {
    --page: #f3f0e8; --paper: #fffef9; --ink: #24231f; --muted: #716d63; --line: #ded9cb; --accent: #d59b16;
    min-height: 100vh; color: var(--ink); background: var(--page); transition: background .2s, color .2s;
}
.reader-stage.theme-sepia[b-xqghk8950d] { --page: #e9dfca; --paper: #f8f0dc; --ink: #3b3024; --muted: #786955; --line: #d6c7aa; --accent: #a66620; }
.reader-stage.theme-night[b-xqghk8950d] { --page: #121918; --paper: #1b2422; --ink: #e8ece8; --muted: #aab5b0; --line: #34413d; --accent: #efbd4c; }
.reading-progress[b-xqghk8950d] { position: fixed; z-index: 90; inset: 0 0 auto; height: 4px; background: transparent; }
.reading-progress span[b-xqghk8950d] { display: block; width: 0; height: 100%; background: var(--accent); transition: width .12s linear; }
.reader-topbar[b-xqghk8950d] { position: sticky; z-index: 30; top: 0; display: flex; justify-content: space-between; align-items: center; min-height: 62px; padding: .5rem max(1rem, calc((100vw - 1180px)/2)); border-bottom: 1px solid color-mix(in srgb, var(--line) 75%, transparent); background: color-mix(in srgb, var(--page) 88%, transparent); backdrop-filter: blur(14px); }
.back-link[b-xqghk8950d] { display: inline-flex; gap: .45rem; align-items: center; min-height: 44px; color: var(--ink); font-weight: 700; text-decoration: none; }
.reader-controls[b-xqghk8950d] { display: flex; align-items: center; gap: .25rem; padding: .25rem; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); box-shadow: 0 4px 15px rgb(0 0 0 / .05); }
.reader-controls button[b-xqghk8950d], .notes-head button[b-xqghk8950d] { display: grid; place-items: center; min-width: 36px; height: 34px; padding: 0 .5rem; border: 0; border-radius: 999px; color: var(--ink); background: transparent; font: inherit; font-weight: 700; }
.reader-controls button:hover[b-xqghk8950d], .reader-controls button.active[b-xqghk8950d] { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.notes-toggle[b-xqghk8950d] { display: flex !important; gap: .3rem; }
.notes-toggle span[b-xqghk8950d] { min-width: 18px; padding: 0 .3rem; border-radius: 999px; color: #17150f; background: #f4c95d; font-size: .75rem; }
.reader-layout[b-xqghk8950d] { width: min(100% - 2rem, 1180px); margin: 1.5rem auto 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.reader-layout.notes-open[b-xqghk8950d] { grid-template-columns: minmax(0, 1fr) 330px; }
.reader-paper[b-xqghk8950d] { width: min(100%, 780px); margin: 0 auto 5rem; padding: clamp(1.5rem, 5vw, 4.3rem); border: 1px solid var(--line); border-radius: 4px; background: var(--paper); box-shadow: 0 20px 60px rgb(37 31 18 / .09); }
.width-wide .reader-paper[b-xqghk8950d] { width: min(100%, 960px); }
.article-head[b-xqghk8950d] { padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.eyebrow[b-xqghk8950d] { display: flex; gap: .5rem; align-items: center; margin: 0 0 .65rem; color: var(--accent); font: 700 .78rem/1.2 system-ui, sans-serif; text-transform: uppercase; letter-spacing: .12em; }
h1[b-xqghk8950d] { max-width: 18ch; margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(2rem, 5vw, 3.35rem); font-weight: 600; line-height: 1.12; letter-spacing: -.025em; text-wrap: balance; }
.reading-meta[b-xqghk8950d] { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.25rem; color: var(--muted); font: .88rem/1.3 system-ui, sans-serif; }
.reading-meta span[b-xqghk8950d] { display: flex; gap: .35rem; align-items: center; }
.selection-guide[b-xqghk8950d] { display: flex; gap: .5rem; align-items: center; margin: 1.6rem 0; padding: .7rem .85rem; border-radius: 9px; color: var(--muted); background: color-mix(in srgb, var(--accent) 9%, transparent); font: .84rem/1.35 system-ui, sans-serif; }
.selection-guide.notes-failed[b-xqghk8950d] { color: #b0523c; background: color-mix(in srgb, #b0523c 10%, transparent); }
.notes-failed button[b-xqghk8950d] { margin-left: auto; padding: .3rem .8rem; border: 1px solid currentColor; border-radius: 7px; color: inherit; background: transparent; font: 700 .8rem/1 system-ui, sans-serif; }
.reading-copy[b-xqghk8950d] { white-space: pre-wrap; overflow-wrap: break-word; font-family: Georgia, 'Times New Roman', serif; font-size: calc(1.13rem * var(--reader-scale)); line-height: 1.9; letter-spacing: .006em; text-rendering: optimizeLegibility; }
.reading-emphasis[b-xqghk8950d] { color: color-mix(in srgb, var(--ink) 92%, var(--accent)); font-weight: 750; }
.reading-copy[b-xqghk8950d]::selection { color: inherit; background: color-mix(in srgb, #f3c74f 55%, transparent); }
.highlight[b-xqghk8950d] { margin: 0 -.05em; padding: .08em .05em; border-radius: .18em; color: inherit; cursor: pointer; box-decoration-break: clone; -webkit-box-decoration-break: clone; transition: filter .15s, box-shadow .15s; }
.highlight:hover[b-xqghk8950d] { filter: saturate(1.2); }
.highlight.selected[b-xqghk8950d] { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink); }
.hl-yellow[b-xqghk8950d], .swatch.yellow[b-xqghk8950d] { background: #f8dc72; }
.hl-green[b-xqghk8950d], .swatch.green[b-xqghk8950d] { background: #a9dfb8; }
.hl-blue[b-xqghk8950d], .swatch.blue[b-xqghk8950d] { background: #a9d9ef; }
.hl-pink[b-xqghk8950d], .swatch.pink[b-xqghk8950d] { background: #f2b7ca; }
.hl-purple[b-xqghk8950d], .swatch.purple[b-xqghk8950d] { background: #cfbce9; }
.theme-night .highlight[b-xqghk8950d] { color: #181a18; }
.article-end[b-xqghk8950d] { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-family: system-ui, sans-serif; }
.article-end > span[b-xqghk8950d] { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: #fff; background: #33835e; font-size: 1.25rem; }
.article-end strong[b-xqghk8950d], .article-end p[b-xqghk8950d] { display: block; margin: 0; }
.article-end p[b-xqghk8950d] { margin-top: .2rem; color: var(--muted); font-size: .85rem; }
.article-end a[b-xqghk8950d] { color: var(--ink); font-weight: 750; text-decoration: none; white-space: nowrap; }
.notes-panel[b-xqghk8950d] { display: none; position: sticky; top: 78px; max-height: calc(100vh - 94px); overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); box-shadow: 0 16px 45px rgb(0 0 0 / .1); }
.notes-open .notes-panel[b-xqghk8950d] { display: flex; flex-direction: column; }
.notes-head[b-xqghk8950d] { display: flex; justify-content: space-between; gap: .75rem; align-items: center; padding: 1rem; border-bottom: 1px solid var(--line); }
.notes-head span[b-xqghk8950d] { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .09em; }
.notes-head h2[b-xqghk8950d] { margin: .1rem 0 0; font: 700 1.05rem/1.25 system-ui, sans-serif; }
.notes-empty[b-xqghk8950d] { padding: 2.5rem 1.4rem; text-align: center; color: var(--muted); font-family: system-ui, sans-serif; }
.notes-empty > i[b-xqghk8950d] { display: block; margin-bottom: .7rem; color: var(--accent); font-size: 2rem; }
.notes-empty strong[b-xqghk8950d] { display: block; color: var(--ink); }
.notes-empty p[b-xqghk8950d] { margin: .4rem 0 1rem; font-size: .9rem; line-height: 1.5; }
.notes-empty button[b-xqghk8950d], .save[b-xqghk8950d] { min-height: 40px; padding: .45rem 1rem; border: 0; border-radius: 8px; color: #fff; background: var(--ink); font: 700 .9rem/1 system-ui, sans-serif; }
.note-list[b-xqghk8950d] { overflow-y: auto; padding: .7rem; }
.note-card[b-xqghk8950d] { position: relative; display: block; width: 100%; margin: 0 0 .6rem; padding: .8rem .85rem .8rem 1rem; border: 1px solid var(--line); border-left: 5px solid #f8dc72; border-radius: 9px; color: var(--ink); background: transparent; text-align: left; }
.note-card:hover[b-xqghk8950d] { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.note-card.edge-green[b-xqghk8950d] { border-left-color: #72bc86; }.note-card.edge-blue[b-xqghk8950d] { border-left-color: #70b8d8; }.note-card.edge-pink[b-xqghk8950d] { border-left-color: #da88a3; }.note-card.edge-purple[b-xqghk8950d] { border-left-color: #aa8dce; }
.note-card q[b-xqghk8950d] { display: -webkit-box; overflow: hidden; font: 600 .88rem/1.45 Georgia, serif; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.note-card p[b-xqghk8950d] { margin: .55rem 0 0; color: var(--muted); font: .84rem/1.45 system-ui, sans-serif; }
.note-card > small[b-xqghk8950d] { display: block; margin-top: .5rem; color: var(--muted); font: .76rem/1.2 system-ui, sans-serif; }
.note-card .orphan[b-xqghk8950d] { color: #b0523c; }
.note-editor[b-xqghk8950d] { overflow-y: auto; padding: 1rem; font-family: system-ui, sans-serif; }
.editor-back[b-xqghk8950d] { padding: 0; border: 0; color: var(--muted); background: none; font: 700 .8rem/1 system-ui, sans-serif; }
.expr[b-xqghk8950d] { text-decoration: underline dotted color-mix(in srgb, var(--accent) 75%, transparent); text-decoration-thickness: 2px; text-underline-offset: .22em; cursor: pointer; border-radius: .18em; transition: background .15s; }
.expr:hover[b-xqghk8950d], .expr:focus-visible[b-xqghk8950d], .expr.active[b-xqghk8950d] { outline: none; background: color-mix(in srgb, var(--accent) 16%, transparent); }
.phrase-card[b-xqghk8950d] { overflow-y: auto; padding: 1rem; font-family: system-ui, sans-serif; }
.phrase-term[b-xqghk8950d] { display: flex; gap: .5rem; align-items: center; margin-top: 1rem; }
.phrase-term h3[b-xqghk8950d] { margin: 0; font: 700 1.35rem/1.2 Georgia, serif; }
.phrase-term button[b-xqghk8950d] { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); background: transparent; }
.phrase-structure[b-xqghk8950d] { margin: .3rem 0 0; color: var(--muted); font-size: .82rem; }
.phrase-meaning[b-xqghk8950d] { margin: .7rem 0 0; font-size: .98rem; line-height: 1.5; }
.phrase-translation[b-xqghk8950d] { margin: .4rem 0 0; color: var(--muted); font-size: .92rem; }
.phrase-card h4[b-xqghk8950d] { margin: 1.2rem 0 .45rem; color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .09em; }
.phrase-card blockquote[b-xqghk8950d] { margin: 0; padding: .6rem .8rem; border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; background: color-mix(in srgb, var(--accent) 8%, transparent); font: .92rem/1.55 Georgia, serif; }
.phrase-actions[b-xqghk8950d] { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: 1.2rem; }
.phrase-actions a[b-xqghk8950d] { color: var(--muted); font-size: .84rem; font-weight: 600; text-decoration: none; }
.phrase-actions .saved[b-xqghk8950d] { min-height: 40px; padding: .45rem 1rem; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: transparent; font: 700 .9rem/1 system-ui, sans-serif; }
.phrase-note[b-xqghk8950d] { margin: .7rem 0 0; color: var(--muted); font-size: .84rem; }
.phrase-note.warn[b-xqghk8950d] { color: #b0523c; }
.note-editor blockquote[b-xqghk8950d] { max-height: 9rem; overflow-y: auto; margin: 1rem 0; padding: .8rem; border-left: 4px solid var(--accent); border-radius: 4px; background: color-mix(in srgb, var(--accent) 8%, transparent); font: .92rem/1.55 Georgia, serif; }
.color-row[b-xqghk8950d] { display: flex; gap: .55rem; margin: .6rem 0 1rem; }
.swatch[b-xqghk8950d] { width: 25px; height: 25px; padding: 0; border: 2px solid transparent; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12); }
.swatch.active[b-xqghk8950d] { border-color: var(--ink); box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink); }
.note-editor label[b-xqghk8950d] { display: block; margin-bottom: .4rem; color: var(--ink); font-size: .82rem; font-weight: 700; }
.note-editor label small[b-xqghk8950d] { color: var(--muted); font-weight: 400; }
.note-editor textarea[b-xqghk8950d] { width: 100%; resize: vertical; padding: .75rem; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--page); font: .92rem/1.5 system-ui, sans-serif; }
.editor-actions[b-xqghk8950d] { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .75rem; }
.editor-actions .delete[b-xqghk8950d] { margin-right: auto; min-width: 40px; border: 1px solid #d8aaa3; border-radius: 8px; color: #b33f31; background: transparent; }
.note-error[b-xqghk8950d] { color: #b33f31; font-size: .82rem; }
.selection-menu[b-xqghk8950d] { position: fixed; z-index: 100; display: flex; gap: .4rem; align-items: center; padding: .48rem .55rem; border: 1px solid #30302c; border-radius: 999px; background: #242521; box-shadow: 0 10px 28px rgb(0 0 0 / .28); transform: translate(-50%, -100%); }
.selection-menu[b-xqghk8950d]::after { content: ''; position: absolute; top: 100%; left: 50%; border: 6px solid transparent; border-top-color: #242521; transform: translateX(-50%); }
.selection-menu.below[b-xqghk8950d] { transform: translate(-50%, 0); }
.selection-menu.below[b-xqghk8950d]::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #242521; }
.selection-menu .swatch[b-xqghk8950d] { width: 23px; height: 23px; }
/* Fingers need bigger targets than a mouse. */
@media (pointer: coarse) {
    .selection-menu[b-xqghk8950d] { gap: .55rem; padding: .55rem .8rem; }
    .selection-menu .swatch[b-xqghk8950d] { width: 32px; height: 32px; }
    .comment-button[b-xqghk8950d], .sign-in-selection[b-xqghk8950d] { min-width: 40px; min-height: 40px; font-size: 1.15rem; }
}
.selection-menu > span[b-xqghk8950d] { width: 1px; height: 22px; background: #55564f; }
.comment-button[b-xqghk8950d], .sign-in-selection[b-xqghk8950d] { min-height: 30px; border: 0; color: #fff; background: transparent; }
.sign-in-selection[b-xqghk8950d] { padding: 0 .55rem; font-weight: 700; }
.reader-toast[b-xqghk8950d] { position: fixed; z-index: 95; left: 50%; bottom: 1.3rem; padding: .7rem 1rem; border-radius: 999px; color: #fff; background: #26352f; box-shadow: 0 10px 30px rgb(0 0 0 / .2); transform: translateX(-50%); font: 700 .86rem/1 system-ui, sans-serif; }
.guide-changed[b-xqghk8950d] { position: fixed; z-index: 96; left: 50%; bottom: 1.3rem; display: flex; gap: .6rem; align-items: center; width: max-content; max-width: calc(100vw - 2rem); padding: .6rem .7rem .6rem 1rem; border-radius: 12px; color: #fff; background: #8f3f2d; box-shadow: 0 10px 30px rgb(0 0 0 / .2); transform: translateX(-50%); font: 600 .86rem/1.3 system-ui, sans-serif; }
.guide-changed button[b-xqghk8950d] { margin-left: auto; padding: .4rem .8rem; border: 1px solid #fff; border-radius: 8px; color: #fff; background: transparent; font: 700 .82rem/1 system-ui, sans-serif; white-space: nowrap; }
.reading-state[b-xqghk8950d] { padding: 6rem 1rem; text-align: center; color: var(--muted); }
.reading-state > i[b-xqghk8950d] { display: block; margin-bottom: .5rem; font-size: 2.5rem; }
button[b-xqghk8950d] { cursor: pointer; } button:focus-visible[b-xqghk8950d], a:focus-visible[b-xqghk8950d], mark:focus-visible[b-xqghk8950d] { outline: 3px solid #2677d4; outline-offset: 2px; }

@media (max-width: 900px) {
    .reader-layout.notes-open[b-xqghk8950d] { grid-template-columns: minmax(0, 1fr); }
    .notes-panel[b-xqghk8950d] { position: fixed; z-index: 80; inset: auto 0 0; max-height: min(76vh, 650px); border-radius: 20px 20px 0 0; box-shadow: 0 -15px 50px rgb(0 0 0 / .25); }
    .notes-open .notes-panel[b-xqghk8950d] { display: flex; }
}
@media (max-width: 560px) {
    .reader-topbar[b-xqghk8950d] { padding-inline: .65rem; }
    .back-link span[b-xqghk8950d] { display: none; }
    .reader-controls[b-xqghk8950d] { gap: 0; }
    .reader-controls button[b-xqghk8950d] { min-width: 32px; padding-inline: .35rem; }
    .reader-layout[b-xqghk8950d] { width: 100%; margin-top: 0; }
    .reader-paper[b-xqghk8950d] { margin-bottom: 4rem; padding: 1.35rem 1.1rem 2rem; border-width: 0; border-radius: 0; box-shadow: none; }
    .selection-guide[b-xqghk8950d] { align-items: flex-start; }
    .reading-copy[b-xqghk8950d] { font-size: calc(1.08rem * var(--reader-scale)); line-height: 1.82; }
    .article-end[b-xqghk8950d] { grid-template-columns: auto 1fr; }
    .article-end a[b-xqghk8950d] { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) { *[b-xqghk8950d], *[b-xqghk8950d]::before, *[b-xqghk8950d]::after { scroll-behavior: auto !important; transition: none !important; } }
/* /Pages/episode/EpisodeStudy.razor.rz.scp.css */
.study[b-1jrtorp3xc] {
    font-family: 'Comic Neue', Vazirmatn, 'Comic Sans MS', sans-serif;
    color: #2b2b2b;
    max-width: 760px;
    margin: 0 auto;
    padding: .75rem .75rem 3rem;
}

.back-link[b-1jrtorp3xc] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 44px;
    color: #2b2b2b;
    text-decoration: none;
    font-weight: bold;
}

.eyebrow[b-1jrtorp3xc] { margin: .5rem 0 0; color: #6b6b6b; display: flex; gap: .5rem; align-items: center; }

.code[b-1jrtorp3xc] {
    border: 2px dashed #2b2b2b;
    border-radius: 8px;
    padding: 0 .4rem;
    font-weight: bold;
    color: #2b2b2b;
}

.head h1[b-1jrtorp3xc] { font-size: 1.8rem; margin: .2rem 0; }
.synopsis[b-1jrtorp3xc] { color: #555; margin: .25rem 0 0; }

.facts[b-1jrtorp3xc] { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }

.fact[b-1jrtorp3xc] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .7rem;
    border: 2px solid #2b2b2b;
    border-radius: 999px;
    background: #fff;
    font-size: .9rem;
}

.level[b-1jrtorp3xc] {
    font-size: .8rem;
    font-weight: bold;
    padding: .05rem .45rem;
    border-radius: 999px;
    background: #2b2b2b;
    color: #fff;
}

.overall[b-1jrtorp3xc] { display: flex; align-items: center; gap: .75rem; margin: 1.25rem 0 .5rem; color: #6b6b6b; font-size: .9rem; }
.overall-bar[b-1jrtorp3xc] { flex: 1; height: 10px; border: 2px solid #2b2b2b; border-radius: 999px; overflow: hidden; background: #f1f1f1; }
    .overall-bar div[b-1jrtorp3xc] { height: 100%; background: #198754; transition: width .3s ease; }

.login-note[b-1jrtorp3xc] { margin: 1rem 0 .5rem; color: #6b6b6b; }

.steps[b-1jrtorp3xc] { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .75rem; }

.step[b-1jrtorp3xc] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .5rem .9rem;
    align-items: center;
    padding: 1rem;
    border: 2px solid #2b2b2b;
    border-radius: 16px 6px 18px 8px;
    background: #fff;
    box-shadow: 2px 2px 0 #2b2b2b;
}

    .step.done[b-1jrtorp3xc] { background: #f2fbf6; }

.step-no[b-1jrtorp3xc] {
    grid-row: span 2;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 2px solid #2b2b2b;
    border-radius: 50%;
    background: #ffcc00;
    font-weight: bold;
    font-size: 1.1rem;
}

.step.done .step-no[b-1jrtorp3xc] { background: #198754; border-color: #198754; color: #fff; }

.step-body h2[b-1jrtorp3xc] { font-size: 1.15rem; margin: 0; }
.step-body p[b-1jrtorp3xc] { margin: .2rem 0 0; color: #555; }

.btn-sketch[b-1jrtorp3xc] {
    grid-column: 2;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: .4rem 1.2rem;
    font: inherit;
    font-weight: bold;
    color: #fff;
    background: #2b2b2b;
    border: 2px solid #2b2b2b;
    border-radius: 10px 4px 10px 4px;
    text-decoration: none;
}

    .btn-sketch:hover[b-1jrtorp3xc] { background: #0d6efd; border-color: #0d6efd; color: #fff; }
    .btn-sketch.disabled[b-1jrtorp3xc] { pointer-events: none; opacity: .4; }

.state-box[b-1jrtorp3xc] { text-align: center; padding: 2.5rem 1rem; color: #6b6b6b; }
    .state-box > i[b-1jrtorp3xc] { display: block; font-size: 2.25rem; color: #2b2b2b; margin-bottom: .5rem; }
    .state-box .btn-sketch[b-1jrtorp3xc] { grid-column: auto; }

.spinner[b-1jrtorp3xc] {
    width: 26px; height: 26px; display: inline-block;
    border: 3px solid rgba(0,0,0,.15); border-top-color: #2b2b2b; border-radius: 50%;
    animation: spin-b-1jrtorp3xc .8s linear infinite;
}

@keyframes spin-b-1jrtorp3xc { to { transform: rotate(360deg); } }

@media (min-width: 576px) {
    .study[b-1jrtorp3xc] { padding: 1.25rem 1rem 3rem; }
    .step[b-1jrtorp3xc] { grid-template-columns: auto 1fr auto; }
    .step-no[b-1jrtorp3xc] { grid-row: auto; }
    .btn-sketch[b-1jrtorp3xc] { grid-column: auto; justify-self: end; }
}

@media (prefers-reduced-motion: reduce) {
    .spinner[b-1jrtorp3xc] { animation-duration: 2s; }
    .overall-bar div[b-1jrtorp3xc] { transition: none; }
}

/* ---------- Grammar in this episode ---------- */
.grammar[b-1jrtorp3xc] { margin-top: 1.5rem; }
    .grammar h2[b-1jrtorp3xc] { font-size: 1.15rem; margin: 0 0 .6rem; }
    .grammar ul[b-1jrtorp3xc] { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }

    .grammar a[b-1jrtorp3xc] {
        display: flex;
        align-items: center;
        gap: .6rem;
        min-height: 48px;
        padding: .5rem .8rem;
        border: 2px solid #2b2b2b;
        border-radius: 12px 4px 12px 4px;
        background: #fff;
        color: #2b2b2b;
        text-decoration: none;
    }

        .grammar a:hover[b-1jrtorp3xc] { background: #e8f0ff; }
        .grammar a:focus-visible[b-1jrtorp3xc] { outline: 3px solid #0d6efd; outline-offset: 2px; }

.g-title[b-1jrtorp3xc] { flex: 1; min-width: 0; }
.g-count[b-1jrtorp3xc] { color: #6b6b6b; white-space: nowrap; }

/* "Watch the whole episode" (only for viewers allowed it). Same shape as a step, with a film icon. */
.watch-card[b-1jrtorp3xc] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .5rem .9rem;
    align-items: center;
    margin-top: 1.25rem;
    padding: 1rem;
    border: 2px solid #2b2b2b;
    border-radius: 16px 6px 18px 8px;
    background: #fffdf3;
    box-shadow: 2px 2px 0 #2b2b2b;
}

    .watch-card > i[b-1jrtorp3xc] {
        grid-row: span 2;
        width: 44px;
        height: 44px;
        display: grid;
        place-items: center;
        font-size: 1.3rem;
        border: 2px solid #2b2b2b;
        border-radius: 50%;
        background: #8ecae6;
    }

@media (min-width: 576px) {
    .watch-card[b-1jrtorp3xc] { grid-template-columns: auto 1fr auto; }
    .watch-card > i[b-1jrtorp3xc] { grid-row: auto; }
}

/* Guided scene lesson: the suggested way into the episode */
.lesson-card[b-1jrtorp3xc] { border-color: #364fc7; background: #f3f6ff; }
    .lesson-card.done[b-1jrtorp3xc] { border-color: var(--green, #2b8a3e); background: #f4fce3; }
    .lesson-card h2[b-1jrtorp3xc] { margin: .1rem 0 .25rem; }
.lesson-kicker[b-1jrtorp3xc] { margin: 0; color: #364fc7; font-size: .8rem; font-weight: bold; text-transform: uppercase; letter-spacing: .04em; }

/* Opened at this section (?section=grammar): a short glow so it is found at once. */
.grammar[b-1jrtorp3xc] { scroll-margin-top: 7rem; border-radius: 14px; transition: box-shadow .4s; }
.grammar.section-flash[b-1jrtorp3xc] { box-shadow: 0 0 0 4px #ffe066; }
.g-notes[b-1jrtorp3xc] { display: grid; gap: .8rem; margin-bottom: .8rem; }
.g-static[b-1jrtorp3xc] { display: flex; align-items: center; gap: .6rem; min-height: 48px; padding: .5rem .8rem; border: 2px dashed #bbb; border-radius: 12px 4px 12px 4px; background: #fafafa; color: #2b2b2b; }
/* /Pages/episode/GrammarPointCard.razor.rz.scp.css */
/* A grammar point found in the episode, opening in place. Closed it looks like the old link row. */
.gp[b-nqdl9sajih] { border: 2px solid #2b2b2b; border-radius: 12px 4px 12px 4px; background: #fff; transition: box-shadow .15s; }
.gp.open[b-nqdl9sajih] { box-shadow: 3px 3px 0 #2b2b2b; border-left: 6px solid #364fc7; }

.gp-head[b-nqdl9sajih] {
    display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 48px; padding: .5rem .8rem;
    border: 0; border-radius: inherit; background: transparent; color: #2b2b2b; font: inherit; text-align: left; cursor: pointer;
}
.gp-head:hover[b-nqdl9sajih] { background: #e8f0ff; }
.gp-head:focus-visible[b-nqdl9sajih] { outline: 3px solid #0d6efd; outline-offset: 2px; }
.gp-head .bi[b-nqdl9sajih] { color: #6b6b6b; }
.level[b-nqdl9sajih] { font-size: .8rem; font-weight: bold; padding: .05rem .45rem; border-radius: 999px; background: #2b2b2b; color: #fff; }
.g-title[b-nqdl9sajih] { flex: 1; min-width: 0; }
.g-count[b-nqdl9sajih] { color: #6b6b6b; white-space: nowrap; }
.gp.open .gp-head[b-nqdl9sajih] { border-bottom: 2px dashed #dee2e6; border-radius: 10px 2px 0 0; }

.gp-body[b-nqdl9sajih] { display: grid; gap: .65rem; padding: .8rem 1rem 1rem; }
.gp-explain[b-nqdl9sajih] { margin: 0; line-height: 1.55; white-space: pre-line; }
.gp-muted[b-nqdl9sajih] { margin: 0; color: #6b6b6b; }
.gp-lead[b-nqdl9sajih] { margin: 0; font-weight: bold; }
.gp-lead small[b-nqdl9sajih] { font-weight: normal; color: #6b6b6b; }

.gp-lines[b-nqdl9sajih] { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.gp-line[b-nqdl9sajih] {
    display: grid; grid-template-columns: auto 1fr; gap: .55rem; align-items: start; width: 100%;
    padding: .5rem .7rem; border: 0; border-left: 4px solid #ffd84d; border-radius: 0 8px 8px 0;
    background: #fffdf3; font: inherit; font-size: 1.02rem; text-align: left; cursor: pointer;
}
.gp-line .bi[b-nqdl9sajih] { font-size: 1.2rem; line-height: 1.3; color: #364fc7; }
.gp-line:hover[b-nqdl9sajih] { background: #fff3bf; }
.gp-line.on[b-nqdl9sajih] { background: #fff3bf; border-left-color: #364fc7; }
.gp-line mark[b-nqdl9sajih] { background: #ffe066; padding: 0 .12rem; border-radius: 3px; font-weight: bold; }
.gp-scene[b-nqdl9sajih] { margin-top: .45rem; }

.gp-all[b-nqdl9sajih] { justify-self: start; border: 0; background: none; padding: 0; color: #364fc7; font: inherit; font-weight: bold; cursor: pointer; }
.g-more[b-nqdl9sajih] { font-weight: bold; text-decoration: none; }
/* /Pages/examHistory/ExamAttempt.razor.rz.scp.css */
.attempt[b-kahuzzskge] {
    font-family: 'Comic Neue', Vazirmatn, 'Comic Sans MS', sans-serif;
    color: #2b2b2b;
    max-width: 760px;
    margin: 0 auto;
    padding: .5rem .75rem 3rem;
}

.back-link[b-kahuzzskge] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 44px;
    color: #2b2b2b;
    text-decoration: none;
    font-weight: bold;
}

    .back-link:hover[b-kahuzzskge] { color: #0d6efd; }

.summary[b-kahuzzskge] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-top: .5rem;
    padding: 1.1rem;
    border: 2px solid #2b2b2b;
    border-radius: 16px 6px 18px 8px;
    background: #fff;
    box-shadow: 3px 3px 0 #2b2b2b;
    text-align: center;
}

.eyebrow[b-kahuzzskge] { margin: 0; color: #6b6b6b; display: flex; gap: .4rem; align-items: center; justify-content: center; flex-wrap: wrap; }
.code[b-kahuzzskge] { border: 2px dashed #2b2b2b; border-radius: 8px; padding: 0 .35rem; font-weight: bold; color: #2b2b2b; font-size: .85rem; }

.summary h1[b-kahuzzskge] { font-size: 1.5rem; margin: .2rem 0; overflow-wrap: anywhere; }
.meta[b-kahuzzskge] { margin: 0; color: #555; }

.actions[b-kahuzzskge] { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: .9rem; }

.btn-sketch[b-kahuzzskge] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: 44px;
    padding: .4rem 1rem;
    font: inherit;
    font-weight: bold;
    color: #2b2b2b;
    background: #fff;
    border: 2px solid #2b2b2b;
    border-radius: 10px 4px 10px 4px;
    box-shadow: 2px 2px 0 #2b2b2b;
    text-decoration: none;
}

    .btn-sketch:hover[b-kahuzzskge] { background: #e8f0ff; }
    .btn-sketch.primary[b-kahuzzskge] { background: #2b2b2b; color: #fff; }
        .btn-sketch.primary:hover[b-kahuzzskge] { background: #0d6efd; border-color: #0d6efd; }
    .btn-sketch:focus-visible[b-kahuzzskge], .back-link:focus-visible[b-kahuzzskge] { outline: 3px solid #0d6efd; outline-offset: 2px; }

.state-box[b-kahuzzskge] { text-align: center; padding: 2.5rem 1rem; color: #6b6b6b; }
    .state-box > i[b-kahuzzskge] { display: block; font-size: 2.5rem; color: #2b2b2b; margin-bottom: .5rem; }
    .state-box h1[b-kahuzzskge] { color: #2b2b2b; font-size: 1.4rem; }

.spinner[b-kahuzzskge] {
    width: 28px; height: 28px; display: inline-block;
    border: 3px solid rgba(0,0,0,.15); border-top-color: #2b2b2b; border-radius: 50%;
    animation: spin-b-kahuzzskge .8s linear infinite;
}

@keyframes spin-b-kahuzzskge { to { transform: rotate(360deg); } }

@media (min-width: 576px) {
    .attempt[b-kahuzzskge] { padding: 1rem 1rem 3rem; }
    .summary[b-kahuzzskge] { flex-direction: row; text-align: left; padding: 1.4rem; }
    .eyebrow[b-kahuzzskge], .actions[b-kahuzzskge] { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    .spinner[b-kahuzzskge] { animation-duration: 2s; }
}
/* /Pages/examHistory/ExamHistory.razor.rz.scp.css */
/* Quiz results — mobile first, same hand-drawn look as the rest of the site. */

.history[b-zmlrbjo387] {
    font-family: 'Comic Neue', Vazirmatn, 'Comic Sans MS', sans-serif;
    color: #2b2b2b;
    max-width: 820px;
    margin: 0 auto;
    padding: .75rem .75rem 3rem;
}

.head h1[b-zmlrbjo387] { font-size: 1.8rem; margin: 0; }
.sub[b-zmlrbjo387] { color: #6b6b6b; margin: .25rem 0 1rem; }

.btn-sketch[b-zmlrbjo387] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: 44px;
    padding: .4rem 1rem;
    font: inherit;
    font-weight: bold;
    color: #2b2b2b;
    background: #fff;
    border: 2px solid #2b2b2b;
    border-radius: 10px 4px 10px 4px;
    box-shadow: 2px 2px 0 #2b2b2b;
    text-decoration: none;
    cursor: pointer;
}

    .btn-sketch:hover[b-zmlrbjo387] { background: #e8f0ff; }
    .btn-sketch.primary[b-zmlrbjo387] { background: #2b2b2b; color: #fff; }
        .btn-sketch.primary:hover[b-zmlrbjo387] { background: #0d6efd; border-color: #0d6efd; }

.state-box[b-zmlrbjo387] { text-align: center; padding: 2.5rem 1rem; color: #6b6b6b; }
    .state-box > i[b-zmlrbjo387] { display: block; font-size: 2.5rem; color: #2b2b2b; margin-bottom: .5rem; }
    .state-box h2[b-zmlrbjo387] { color: #2b2b2b; font-size: 1.4rem; }

.spinner[b-zmlrbjo387] {
    width: 28px; height: 28px; display: inline-block;
    border: 3px solid rgba(0,0,0,.15); border-top-color: #2b2b2b; border-radius: 50%;
    animation: spin-b-zmlrbjo387 .8s linear infinite;
}

@keyframes spin-b-zmlrbjo387 { to { transform: rotate(360deg); } }

/* ---------- Stats ---------- */
.stats[b-zmlrbjo387] { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; margin-bottom: 1rem; }

.stat[b-zmlrbjo387] {
    padding: .7rem .8rem;
    border: 2px solid #2b2b2b;
    border-radius: 12px 4px 12px 4px;
    background: #fff;
    display: flex;
    flex-direction: column;
}

    .stat strong[b-zmlrbjo387] { font-size: 1.5rem; line-height: 1.2; }
    .stat span[b-zmlrbjo387] { font-size: .8rem; color: #6b6b6b; }

.filter-chip[b-zmlrbjo387] {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .75rem;
    padding: .3rem .4rem .3rem .9rem;
    border: 2px solid #2b2b2b;
    border-radius: 999px;
    background: #fffdf3;
    font-size: .9rem;
}

    .filter-chip a[b-zmlrbjo387] { display: inline-flex; align-items: center; gap: .3rem; min-height: 36px; padding: 0 .5rem; font-weight: bold; text-decoration: none; }

.sort[b-zmlrbjo387] { display: flex; align-items: center; gap: .4rem; margin-bottom: .75rem; flex-wrap: wrap; }
    .sort span[b-zmlrbjo387] { color: #6b6b6b; font-size: .9rem; }

    .sort button[b-zmlrbjo387] {
        min-height: 36px;
        padding: 0 .8rem;
        border: 2px solid #2b2b2b;
        border-radius: 999px;
        background: #fff;
        font: inherit;
        font-size: .9rem;
        cursor: pointer;
    }

        .sort button.active[b-zmlrbjo387] { background: #2b2b2b; color: #fff; }

/* ---------- Episode cards ---------- */
.groups[b-zmlrbjo387] { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }

.group[b-zmlrbjo387] {
    padding: 1rem;
    border: 2px solid #2b2b2b;
    border-radius: 16px 6px 18px 8px;
    background: #fff;
    box-shadow: 2px 2px 0 #2b2b2b;
}

.group-main[b-zmlrbjo387] { display: flex; gap: .9rem; align-items: center; }
.group-text[b-zmlrbjo387] { min-width: 0; }

.group-title[b-zmlrbjo387] { margin: 0; color: #6b6b6b; display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }

.code[b-zmlrbjo387] { border: 2px dashed #2b2b2b; border-radius: 8px; padding: 0 .35rem; font-weight: bold; color: #2b2b2b; font-size: .85rem; }

.group-episode[b-zmlrbjo387] { margin: .1rem 0; font-size: 1.15rem; font-weight: bold; overflow-wrap: anywhere; }
.group-meta[b-zmlrbjo387] { margin: 0; font-size: .85rem; color: #6b6b6b; }

.trend[b-zmlrbjo387] {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 44px;
    margin: .8rem 0 .2rem;
    padding: 0 .1rem;
    border-bottom: 2px solid #e5e5e5;
}

.bar[b-zmlrbjo387] { flex: 1; max-width: 28px; border-radius: 4px 4px 0 0; }
    .bar.great[b-zmlrbjo387] { background: #198754; }
    .bar.okay[b-zmlrbjo387] { background: #f59e0b; }
    .bar.low[b-zmlrbjo387] { background: #dc3545; }

.group-actions[b-zmlrbjo387] { display: flex; gap: .5rem; margin-top: .8rem; }
    .group-actions .btn-sketch[b-zmlrbjo387] { flex: 1; }

.attempts[b-zmlrbjo387] { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .4rem; }

    .attempts a[b-zmlrbjo387] {
        display: flex;
        align-items: center;
        gap: .7rem;
        min-height: 52px;
        padding: .45rem .7rem;
        border-radius: 10px;
        background: #fafafa;
        color: #2b2b2b;
        text-decoration: none;
    }

        .attempts a:hover[b-zmlrbjo387] { background: #e8f0ff; }

.pill[b-zmlrbjo387] { min-width: 3.4rem; text-align: center; padding: .2rem .5rem; border-radius: 999px; font-weight: bold; color: #fff; }
    .pill.great[b-zmlrbjo387] { background: #198754; }
    .pill.okay[b-zmlrbjo387] { background: #f59e0b; }
    .pill.low[b-zmlrbjo387] { background: #dc3545; }

.attempt-text[b-zmlrbjo387] { flex: 1; min-width: 0; display: flex; flex-direction: column; }
    .attempt-text small[b-zmlrbjo387] { color: #6b6b6b; }

.review-link[b-zmlrbjo387] { color: #0d6efd; font-weight: bold; white-space: nowrap; }

.btn-sketch:focus-visible[b-zmlrbjo387], .sort button:focus-visible[b-zmlrbjo387], .attempts a:focus-visible[b-zmlrbjo387], .filter-chip a:focus-visible[b-zmlrbjo387] {
    outline: 3px solid #0d6efd;
    outline-offset: 2px;
}

@media (min-width: 576px) {
    .history[b-zmlrbjo387] { padding: 1.25rem 1rem 3rem; }
    .stats[b-zmlrbjo387] { grid-template-columns: repeat(4, 1fr); }
    .group-actions .btn-sketch[b-zmlrbjo387] { flex: 0 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
    .spinner[b-zmlrbjo387] { animation-duration: 2s; }
}
/* /Pages/grammar/Grammar.razor.rz.scp.css */
.grammar[b-b5nzvkyxz2] {
    font-family: 'Comic Neue', Vazirmatn, 'Comic Sans MS', sans-serif;
    color: #2b2b2b;
    max-width: 1000px;
    margin: 0 auto;
    padding: .75rem .75rem 3rem;
    min-width: 0;
}

    .grammar h1[b-b5nzvkyxz2] { font-size: 1.8rem; margin: 0; }

.sub[b-b5nzvkyxz2] { color: #6b6b6b; margin: .25rem 0 1.25rem; }

/* ---------- The learner's progress ---------- */

.my-grammar[b-b5nzvkyxz2] {
    margin: 0 0 1.25rem;
    padding: 1rem;
    border: 2px solid #2b2b2b;
    border-radius: 16px 6px 18px 8px;
    background: #fffdf3;
    box-shadow: 2px 2px 0 #2b2b2b;
    min-width: 0;
}

    .my-head h2[b-b5nzvkyxz2] { display: flex; align-items: center; gap: .4rem; margin: 0 0 .5rem; font-size: 1.2rem; }

.my-bar[b-b5nzvkyxz2] {
    display: flex;
    height: 12px;
    border: 2px solid #2b2b2b;
    border-radius: 999px;
    background: #fff;
    overflow: hidden;
}

    .b-mastered[b-b5nzvkyxz2] { background: #e0a800; }
    .b-practising[b-b5nzvkyxz2] { background: #2f9e44; }
    .b-seen[b-b5nzvkyxz2] { background: #a5d8ff; }

.my-counts[b-b5nzvkyxz2] {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1rem;
    margin: .45rem 0 0;
    font-size: .88rem;
}

    .my-counts .of[b-b5nzvkyxz2] { color: #6b6b6b; }

.dot[b-b5nzvkyxz2] { display: inline-block; width: .7em; height: .7em; border-radius: 50%; vertical-align: baseline; }
    .dot.mastered[b-b5nzvkyxz2] { background: #e0a800; }
    .dot.practising[b-b5nzvkyxz2] { background: #2f9e44; }
    .dot.seen[b-b5nzvkyxz2] { background: #a5d8ff; }

.next-label[b-b5nzvkyxz2] { margin: .9rem 0 .4rem; font-weight: bold; }

.today-row[b-b5nzvkyxz2] { display: flex; align-items: end; justify-content: space-between; gap: .75rem; margin-top: .8rem; }
    .today-row .next-label[b-b5nzvkyxz2] { margin: 0; font-size: 1.05rem; }
    .today-row small[b-b5nzvkyxz2] { color: #6b6b6b; }
.today-start[b-b5nzvkyxz2] { display: inline-flex; align-items: center; gap: .3rem; min-height: 42px; padding: .35rem .85rem; border: 2px solid #2b2b2b; border-radius: 999px; background: #2f9e44; color: #fff; box-shadow: 2px 2px 0 #2b2b2b; font-weight: bold; text-decoration: none; white-space: nowrap; }
    .today-start:hover[b-b5nzvkyxz2], .today-start:focus-visible[b-b5nzvkyxz2] { background: #237a35; outline: none; transform: translateY(-1px); }
.caught-up[b-b5nzvkyxz2] { margin: .8rem 0 0; padding: .65rem .8rem; border-radius: 10px; background: #ebfbee; color: #236b32; }
    .caught-up .bi[b-b5nzvkyxz2] { margin-right: .35rem; }

.next-list[b-b5nzvkyxz2] { display: grid; grid-template-columns: 1fr; gap: .5rem; }

.next-card[b-b5nzvkyxz2] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "level title icon" "level why icon";
    align-items: center;
    column-gap: .6rem;
    min-height: 44px;
    padding: .5rem .75rem;
    border: 2px solid #2b2b2b;
    border-radius: 10px 4px 10px 4px;
    background: #fff;
    color: #2b2b2b;
    text-decoration: none;
    min-width: 0;
}

    .next-card:hover[b-b5nzvkyxz2], .next-card:focus-visible[b-b5nzvkyxz2] { background: #ebfbee; outline: none; }
    .next-card .level[b-b5nzvkyxz2] { grid-area: level; }
    .next-title[b-b5nzvkyxz2] { grid-area: title; font-weight: bold; overflow-wrap: anywhere; }
    .next-why[b-b5nzvkyxz2] { grid-area: why; font-size: .8rem; color: #6b6b6b; }
    .next-card .bi[b-b5nzvkyxz2] { grid-area: icon; font-size: 1.3rem; color: #2b8a3e; }

.my-login[b-b5nzvkyxz2] { margin: 0 0 1rem; color: #6b6b6b; }

.area-progress[b-b5nzvkyxz2] {
    margin-left: .5rem;
    font-size: .8rem;
    font-weight: normal;
    color: #6b6b6b;
    white-space: nowrap;
}

.status[b-b5nzvkyxz2] {
    margin-left: auto;
    padding: .05rem .5rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: bold;
}

    .status.mastered[b-b5nzvkyxz2] { background: #fff3bf; color: #8a6100; }
    .status.practising[b-b5nzvkyxz2] { background: #d3f9d8; color: #1b5e20; }
    .status.seen[b-b5nzvkyxz2] { background: #e7f5ff; color: #1864ab; }

@media (min-width: 640px) {
    .next-list[b-b5nzvkyxz2] { grid-template-columns: repeat(3, 1fr); }
}

.level-group[b-b5nzvkyxz2] { margin-bottom: 1.5rem; }

    .level-group h2[b-b5nzvkyxz2] {
        display: flex;
        align-items: center;
        gap: .5rem;
        font-size: 1.2rem;
        margin: 0 0 .6rem;
    }

.level[b-b5nzvkyxz2] {
    font-size: .8rem;
    font-weight: bold;
    padding: .1rem .5rem;
    border-radius: 999px;
    background: #2b2b2b;
    color: #fff;
}

.pattern-grid[b-b5nzvkyxz2] { display: grid; grid-template-columns: 1fr; gap: .75rem; }

.pattern[b-b5nzvkyxz2] {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: 1rem;
    border: 2px solid #2b2b2b;
    border-radius: 16px 6px 18px 8px;
    background: #fff;
    box-shadow: 2px 2px 0 #2b2b2b;
    scroll-margin-top: 5rem; /* clear of the top bar when jumped to */
}

    /* The point a link opened ("grammar#g15"). */
    .pattern.focused[b-b5nzvkyxz2] {
        border-color: #2f9e44;
        background: #f4fcf5;
        box-shadow: 0 0 0 4px #b2f2bb, 3px 3px 0 #2b8a3e;
        animation: focus-pulse-b-b5nzvkyxz2 1.2s ease-out 2;
    }

@keyframes focus-pulse-b-b5nzvkyxz2 {
    50% { box-shadow: 0 0 0 9px #d3f9d8, 3px 3px 0 #2b8a3e; }
}

    .pattern h3[b-b5nzvkyxz2] { font-size: 1.1rem; margin: 0; }
    .pattern p[b-b5nzvkyxz2] { margin: 0; }
    .pattern .example[b-b5nzvkyxz2] { color: #6b6b6b; font-style: italic; }

.point-actions[b-b5nzvkyxz2] {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    column-gap: 1.1rem;
}

    .point-actions .watch[b-b5nzvkyxz2] { margin-top: 0; }
    .watch.practice[b-b5nzvkyxz2] { color: #2b8a3e; }

.watch[b-b5nzvkyxz2] {
    margin-top: auto;
    padding-top: .4rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: bold;
    text-decoration: none;
}

.state-box[b-b5nzvkyxz2] { text-align: center; padding: 2.5rem 1rem; color: #6b6b6b; }
    .state-box > i[b-b5nzvkyxz2] { display: block; font-size: 2.25rem; color: #2b2b2b; margin-bottom: .5rem; }

.spinner[b-b5nzvkyxz2] {
    width: 26px; height: 26px; display: inline-block;
    border: 3px solid rgba(0,0,0,.15); border-top-color: #2b2b2b; border-radius: 50%;
    animation: spin-b-b5nzvkyxz2 .8s linear infinite;
}

@keyframes spin-b-b5nzvkyxz2 { to { transform: rotate(360deg); } }

@media (min-width: 640px) {
    .grammar[b-b5nzvkyxz2] { padding: 1.25rem 1rem 3rem; }
    .pattern-grid[b-b5nzvkyxz2] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
    .pattern-grid[b-b5nzvkyxz2] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- The grammar map ---------- */
.g-tabs[b-b5nzvkyxz2] { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
    .g-tabs button[b-b5nzvkyxz2] { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .4rem 1rem; border: 2px solid #2b2b2b; border-radius: 999px; background: #fff; font: inherit; font-weight: bold; cursor: pointer; }
    .g-tabs button.active[b-b5nzvkyxz2] { background: #2b2b2b; color: #fff; }
    .g-tabs small[b-b5nzvkyxz2] { font-weight: normal; opacity: .75; }

.g-levels[b-b5nzvkyxz2] { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.25rem; }
    .g-levels button[b-b5nzvkyxz2] { display: inline-flex; align-items: baseline; gap: .3rem; min-height: 40px; padding: .3rem .8rem; border: 2px dashed #9a9a9a; border-radius: 999px; background: #fff; font: inherit; cursor: pointer; }
    .g-levels button small[b-b5nzvkyxz2] { color: #6b6b6b; }
    .g-levels button.active[b-b5nzvkyxz2] { border-style: solid; border-color: #2b2b2b; background: #fff7d6; font-weight: bold; }

.g-area[b-b5nzvkyxz2] { margin-bottom: 1.75rem; }
    .g-area h2[b-b5nzvkyxz2] { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem; font-size: 1.3rem; margin: 0 0 .25rem; }
    .g-area h2 .fa[b-b5nzvkyxz2] { font-size: 1rem; color: #6b6b6b; font-weight: normal; }
.g-area-desc[b-b5nzvkyxz2] { margin: 0 0 .75rem; color: #6b6b6b; }

.pattern-top[b-b5nzvkyxz2] { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.topic[b-b5nzvkyxz2] { font-size: .8rem; color: #6b6b6b; }
.pattern .fa[b-b5nzvkyxz2] { font-family: Vazirmatn, sans-serif; color: #2b2b2b; }
.fa-toggle[b-b5nzvkyxz2] { align-self: flex-start; padding: .1rem .6rem; border: 1px solid #c9c9c9; border-radius: 999px; background: #fff; font-family: Vazirmatn, sans-serif; font-size: .85rem; cursor: pointer; }
.form[b-b5nzvkyxz2] { margin: 0; padding: .4rem .6rem .4rem 1.4rem; border-radius: 8px; background: #f6f6f4; font-size: .92rem; }
.after[b-b5nzvkyxz2] { font-size: .88rem; color: #6b6b6b; }
    .after a[b-b5nzvkyxz2] { color: inherit; }


/* Brief card: the summary, then the full explanation in a popup. */
.pattern .summary[b-b5nzvkyxz2] { color: #2b2b2b; line-height: 1.5; }

.read-more[b-b5nzvkyxz2] {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 40px;
    padding: .25rem .8rem;
    border: 2px solid #2f9e44;
    border-radius: 999px;
    background: #ebfbee;
    color: #1b5e20;
    font: inherit;
    font-weight: bold;
    cursor: pointer;
}

    .read-more:hover[b-b5nzvkyxz2], .read-more:focus-visible[b-b5nzvkyxz2] { background: #d3f9d8; outline: none; }

/* Lessons of a point */
.lessons[b-b5nzvkyxz2] { display: grid; gap: .35rem; margin: .6rem 0 0; padding: 0; list-style: none; }
    .lessons a[b-b5nzvkyxz2] { display: flex; align-items: center; gap: .55rem; padding: .5rem .65rem; border: 2px solid #2b2b2b; border-radius: 12px 4px 12px 4px; background: #fff9db; color: #2b2b2b; text-decoration: none; }
    .lessons a:hover[b-b5nzvkyxz2], .lessons a:focus-visible[b-b5nzvkyxz2] { background: #fff3bf; outline: none; }
    .lessons a.done[b-b5nzvkyxz2] { background: #ebfbee; border-color: #8ce99a; }
    .lessons .bi[b-b5nzvkyxz2] { flex: 0 0 auto; font-size: 1.2rem; color: #e67700; }
    .lessons a.done .bi[b-b5nzvkyxz2] { color: #2b8a3e; }
    .lessons span[b-b5nzvkyxz2] { display: grid; min-width: 0; }
    .lessons small[b-b5nzvkyxz2] { color: #6b6b6b; line-height: 1.3; }
    .lessons .lesson-go[b-b5nzvkyxz2] { flex: 0 0 auto; margin-left: auto; padding: .1rem .55rem; border-radius: 999px; background: #2b2b2b; color: #fff; font-size: .8rem; font-weight: bold; }
    .lessons a.done .lesson-go[b-b5nzvkyxz2] { background: #fff; color: #2b8a3e; border: 1.5px solid #2b8a3e; }

@media (max-width: 575.98px) {
    .grammar h1[b-b5nzvkyxz2] { font-size: clamp(1.45rem, 6vw, 1.8rem); }
    .today-row[b-b5nzvkyxz2] { align-items: stretch; flex-direction: column; }
    .today-start[b-b5nzvkyxz2] { justify-content: center; white-space: normal; text-align: center; }
    .next-card[b-b5nzvkyxz2] { grid-template-columns: auto minmax(0, 1fr) auto; }
    .next-why[b-b5nzvkyxz2], .pattern .summary[b-b5nzvkyxz2], .lessons small[b-b5nzvkyxz2] { overflow-wrap: anywhere; }
    .lessons a[b-b5nzvkyxz2] { flex-wrap: wrap; }
    .lessons .lesson-go[b-b5nzvkyxz2] { margin-left: 0; }
    .g-tabs button[b-b5nzvkyxz2] { flex: 1 1 auto; justify-content: center; }
    .g-levels button small[b-b5nzvkyxz2] { display: none; }
    .pattern-grid[b-b5nzvkyxz2] { min-width: 0; }
}
/* /Pages/grammar/GrammarGuideView.razor.rz.scp.css */
/* A grammar point's full explanation: sections that open and close, the same hand-drawn look as the site. */

.gv[b-zfvchmi9q4] { display: grid; gap: .75rem; text-align: left; }
    .gv p[b-zfvchmi9q4] { margin: 0; line-height: 1.55; }

.gv-section h3[b-zfvchmi9q4] {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0 0 .35rem;
    font-size: 1rem;
}

    .gv-section h3 .bi[b-zfvchmi9q4], .gv-more summary .bi[b-zfvchmi9q4] { color: #2b8a3e; }

/* How to build it: one row per form. */
.gv-forms[b-zfvchmi9q4] { display: grid; gap: .4rem; }

.gv-form[b-zfvchmi9q4] {
    display: grid;
    grid-template-columns: 1fr;
    gap: .15rem;
    padding: .5rem .65rem;
    border: 1.5px solid #d0d5dd;
    border-radius: 10px 4px 10px 4px;
    background: #fafafa;
}

.gv-form-label[b-zfvchmi9q4] { font-size: .75rem; font-weight: bold; text-transform: uppercase; letter-spacing: .03em; color: #6b6b6b; }

.gv-pattern[b-zfvchmi9q4] {
    font-family: inherit;
    font-weight: bold;
    color: #1b5e20;
    background: none;
    padding: 0;
    overflow-wrap: anywhere;
}

.gv-form-example[b-zfvchmi9q4], .gv-example[b-zfvchmi9q4] { font-style: italic; }

/* Sections that open and close. */
.gv-more[b-zfvchmi9q4] {
    border: 1.5px solid #d0d5dd;
    border-radius: 10px 4px 10px 4px;
    background: #fff;
}

    .gv-more > summary[b-zfvchmi9q4] {
        display: flex;
        align-items: center;
        gap: .4rem;
        min-height: 44px;
        padding: .35rem .7rem;
        font-weight: bold;
        cursor: pointer;
        list-style: none;
    }

        .gv-more > summary[b-zfvchmi9q4]::-webkit-details-marker { display: none; }
        .gv-more > summary[b-zfvchmi9q4]::after { content: "\203A"; margin-left: auto; font-size: 1.3rem; transition: transform .15s; }
        .gv-more[open] > summary[b-zfvchmi9q4]::after { transform: rotate(90deg); }
        .gv-more > summary small[b-zfvchmi9q4] { padding: 0 .4rem; border-radius: 999px; background: #f1f3f5; color: #6b6b6b; font-weight: normal; }

    .gv-more > :not(summary)[b-zfvchmi9q4] { margin: 0 .7rem .7rem; }

.gv-points[b-zfvchmi9q4], .gv-examples[b-zfvchmi9q4], .gv-mistakes[b-zfvchmi9q4] { padding-left: 1.1rem; display: grid; gap: .35rem; }
    .gv-examples small[b-zfvchmi9q4], .gv-mistakes small[b-zfvchmi9q4] { display: block; color: #6b6b6b; }

.gv-scene[b-zfvchmi9q4] {
    margin-left: .3rem;
    padding: 0 .4rem;
    border-radius: 999px;
    background: #e7f5ff;
    color: #1864ab;
    font-size: .7rem;
    font-style: normal;
}

.gv-mistakes[b-zfvchmi9q4] { list-style: none; padding-left: 0; }
    .gv-mistakes li[b-zfvchmi9q4] { padding: .4rem .5rem; border-radius: 8px; background: #fafafa; }
.gv-wrong[b-zfvchmi9q4], .gv-right[b-zfvchmi9q4] { display: block; }
.gv-wrong[b-zfvchmi9q4] { color: #c92a2a; text-decoration: line-through; text-decoration-thickness: 1px; }
.gv-right[b-zfvchmi9q4] { color: #2b8a3e; font-weight: bold; }

.gv-fa[b-zfvchmi9q4] { font-family: Vazirmatn, Tahoma, 'Segoe UI', sans-serif; line-height: 1.9; text-align: right; }

/* The pattern page: everything in one box with a title, closed at first. */
.gv-box[b-zfvchmi9q4] {
    margin-top: .75rem;
    border: 2px solid #2b2b2b;
    border-radius: 12px 4px 12px 4px;
    background: #fff;
    box-shadow: 2px 2px 0 #2b2b2b;
}

    .gv-box > summary[b-zfvchmi9q4] {
        display: flex;
        align-items: center;
        gap: .5rem;
        min-height: 48px;
        padding: .4rem .8rem;
        cursor: pointer;
        list-style: none;
        font-weight: bold;
    }

        .gv-box > summary[b-zfvchmi9q4]::-webkit-details-marker { display: none; }
        .gv-box > summary .bi-journal-text[b-zfvchmi9q4] { color: #2b8a3e; font-size: 1.15rem; }
        .gv-box > summary:hover[b-zfvchmi9q4], .gv-box > summary:focus-visible[b-zfvchmi9q4] { background: #ebfbee; outline: none; }

.gv-box-title[b-zfvchmi9q4] { min-width: 0; overflow-wrap: anywhere; }

.gv[b-zfvchmi9q4], .gv-section[b-zfvchmi9q4], .gv-form[b-zfvchmi9q4], .gv-points li[b-zfvchmi9q4], .gv-examples li[b-zfvchmi9q4] { min-width: 0; overflow-wrap: anywhere; }
.gv-box-of[b-zfvchmi9q4] { font-weight: normal; color: #6b6b6b; }
.gv-box-hint[b-zfvchmi9q4] { margin-left: auto; font-size: .85rem; color: #2b8a3e; white-space: nowrap; }
    .gv-box-hint[b-zfvchmi9q4]::after { content: "Read"; }
.gv-box[open] .gv-box-hint[b-zfvchmi9q4]::after { content: "Hide"; }
.gv-chevron[b-zfvchmi9q4] { transition: transform .15s; }
.gv-box[open] .gv-chevron[b-zfvchmi9q4] { transform: rotate(180deg); }
.gv-box-body[b-zfvchmi9q4] { padding: .25rem .8rem .9rem; border-top: 1px dashed #d0d5dd; }

@media (min-width: 576px) {
    .gv-form[b-zfvchmi9q4] { grid-template-columns: 6.5rem 1fr; align-items: baseline; column-gap: .75rem; }
    .gv-form-example[b-zfvchmi9q4] { grid-column: 2; }
}
/* /Pages/grammar/GrammarLesson.razor.rz.scp.css */
/* One grammar lesson — the same hand-drawn look as practice and review. Mobile first. */

.gl[b-6045vcnmfr] {
    --ink: #2b2b2b;
    --muted: #6b6b6b;
    --paper: #fff;
    --accent: #0d6efd;
    --accent-soft: #e8f0ff;
    --green: #2b8a3e;
    --right: #198754;
    --right-soft: #e9f7ef;
    --wrong: #b02a37;
    --wrong-soft: #fdecec;

    font-family: 'Comic Neue', Vazirmatn, 'Comic Sans MS', sans-serif;
    color: var(--ink);
    max-width: 760px;
    margin: 0 auto;
    padding: .75rem .75rem 3rem;
    min-width: 0;
}

.back-link[b-6045vcnmfr] { display: inline-flex; align-items: center; gap: .3rem; margin-bottom: .5rem; color: var(--muted); font-size: .9rem; text-decoration: none; }

/* ---------- Header ---------- */
.gl-head[b-6045vcnmfr] { margin-bottom: .9rem; }
    .gl-head h1[b-6045vcnmfr] { margin: 0; font-size: 1.8rem; line-height: 1.15; }
.gl-sub[b-6045vcnmfr] { display: flex; align-items: center; gap: .4rem; margin: .3rem 0 0; color: var(--muted); }
    .gl-sub .level[b-6045vcnmfr] { padding: 0 .45rem; border: 1.5px solid var(--ink); border-radius: 6px; color: var(--ink); font-size: .8rem; font-weight: bold; }
.gl-goal[b-6045vcnmfr] { display: flex; gap: .45rem; margin: .6rem 0 0; padding: .55rem .75rem; border-radius: 10px; background: #fff9db; line-height: 1.4; }
    .gl-goal .bi[b-6045vcnmfr] { color: #e67700; }
    .gl-goal.done[b-6045vcnmfr] { justify-content: center; margin: .8rem auto 0; max-width: 480px; }
.gl-preview[b-6045vcnmfr] { margin: .6rem 0 0; padding: .45rem .7rem; border: 1.5px dashed #845ef7; border-radius: 10px; background: #f3f0ff; color: #5f3dc4; font-size: .9rem; }

/* ---------- Stages and progress ---------- */
.gl-stages[b-6045vcnmfr] { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .6rem; padding: 0; list-style: none; }
    .gl-stages li[b-6045vcnmfr] { padding: .15rem .6rem; border: 1.5px solid #ced4da; border-radius: 999px; color: var(--muted); font-size: .82rem; }
    .gl-stages li.now[b-6045vcnmfr] { border-color: var(--ink); background: var(--ink); color: #fff; font-weight: bold; }
    .gl-stages li.done[b-6045vcnmfr] { border-color: #8ce99a; background: #ebfbee; color: #237a35; }

.progress-row[b-6045vcnmfr] { display: flex; align-items: center; gap: .6rem; margin-bottom: .75rem; font-size: .85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
    .progress-row .bar[b-6045vcnmfr] { flex: 1; height: 8px; background: #eee; border-radius: 999px; overflow: hidden; }
    .progress-row .bar div[b-6045vcnmfr] { height: 100%; background: var(--green); transition: width .3s; }

/* ---------- The step card ---------- */
.gl-card[b-6045vcnmfr] {
    display: flex;
    flex-direction: column;
    gap: .8rem;
    padding: 1rem;
    border: 2px solid var(--ink);
    border-radius: 16px 6px 18px 8px;
    background: #fff;
    box-shadow: 3px 3px 0 var(--ink);
    animation: slide-in-b-6045vcnmfr .2s ease-out;
    min-width: 0;
}

.gl-kind[b-6045vcnmfr] { margin: 0; color: var(--muted); font-size: .85rem; font-weight: bold; text-transform: uppercase; letter-spacing: .04em; }
.gl-prompt[b-6045vcnmfr] { margin: 0; font-size: 1.15rem; font-weight: bold; }
.gl-text[b-6045vcnmfr] { margin: 0; font-size: 1.08rem; line-height: 1.55; }
.gl-pattern[b-6045vcnmfr] { margin: 0; padding: .6rem .8rem; border: 2px dashed var(--green); border-radius: 10px; background: #f4fce3; font-size: 1.15rem; font-weight: bold; text-align: center; }
.gl-example[b-6045vcnmfr] { margin: 0; color: #364fc7; font-style: italic; }
.gl-context[b-6045vcnmfr] { margin: 0; padding: .6rem .8rem; border-left: 4px solid var(--accent); background: var(--accent-soft); font-size: 1.1rem; line-height: 1.5; }
.gl-note[b-6045vcnmfr] { margin: 0; color: var(--muted); font-size: .85rem; }

.gl-gap[b-6045vcnmfr] { margin: 0; font-size: 1.25rem; line-height: 2.2; text-align: center; overflow-wrap: anywhere; }
    .gl-gap input[b-6045vcnmfr] {
        max-width: 100%;
        height: 2.4rem;
        margin: 0 .2rem;
        padding: 0 .4rem;
        border: none;
        border-bottom: 3px solid var(--accent);
        border-radius: 6px 6px 0 0;
        background: var(--accent-soft);
        font: inherit;
        font-size: 1.1rem; /* ≥16px: no zoom on iOS */
        text-align: center;
        outline: none;
    }
    .gl-gap input:focus[b-6045vcnmfr] { background: #dbe7ff; }

.gl-input[b-6045vcnmfr] {
    width: 100%;
    padding: .55rem .7rem;
    border: 2px solid var(--ink);
    border-radius: 10px 4px 10px 4px;
    font: inherit;
    font-size: 1.05rem;
    resize: vertical;
}
    .gl-input:focus[b-6045vcnmfr] { outline: 3px solid var(--accent); outline-offset: 1px; }

.gl-choices[b-6045vcnmfr] { display: grid; gap: .5rem; }
.choice[b-6045vcnmfr] {
    min-height: 52px;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .8rem;
    border: 2px solid var(--ink);
    border-radius: 12px 4px 12px 4px;
    background: #fff;
    font: inherit;
    font-size: 1rem;
    text-align: left;
    color: var(--ink);
    cursor: pointer;
}
    .choice:hover:not(:disabled)[b-6045vcnmfr] { background: var(--accent-soft); }
    .choice:disabled[b-6045vcnmfr] { cursor: default; }
    .choice.right[b-6045vcnmfr] { border-color: var(--right); background: var(--right-soft); color: #146c43; font-weight: bold; }
    .choice.wrong[b-6045vcnmfr] { border-color: var(--wrong); background: var(--wrong-soft); color: var(--wrong); animation: shake-b-6045vcnmfr .3s; }
    .choice.dim[b-6045vcnmfr] { opacity: .45; }

kbd[b-6045vcnmfr] { font-family: inherit; font-size: .7rem; padding: 0 .3rem; border: 1px solid currentColor; border-radius: 4px; opacity: .7; }

.answer-row[b-6045vcnmfr] { min-height: 60px; display: flex; flex-wrap: wrap; align-content: flex-start; gap: .4rem; padding: .5rem; border-bottom: 2px dashed var(--accent); }
.placeholder[b-6045vcnmfr] { color: #9a9a9a; align-self: center; }
.tile-bank[b-6045vcnmfr] { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; }
.tile[b-6045vcnmfr] {
    min-height: 44px;
    padding: 0 .8rem;
    border: 2px solid var(--ink);
    border-radius: 10px 4px 10px 4px;
    background: #fff;
    box-shadow: 2px 2px 0 var(--ink);
    font: inherit;
    font-size: 1.05rem;
    color: var(--ink);
    cursor: pointer;
}
    .tile.placed[b-6045vcnmfr] { box-shadow: none; background: var(--accent-soft); }
    .tile:disabled[b-6045vcnmfr] { cursor: default; opacity: .35; }
    .tile.placed:disabled[b-6045vcnmfr] { opacity: 1; }
.is-right .tile.placed[b-6045vcnmfr] { background: var(--right-soft); border-color: var(--right); }
.is-wrong .tile.placed[b-6045vcnmfr] { background: var(--wrong-soft); border-color: var(--wrong); }

.gl-actions[b-6045vcnmfr] { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .6rem; }
    .gl-actions .gl-hint[b-6045vcnmfr] { flex: 1 1 100%; }

.gl-hint[b-6045vcnmfr] { margin: 0; padding: .5rem .7rem; border-radius: 10px; background: #fff4d6; color: #7a5600; }
    .gl-hint.try[b-6045vcnmfr] { border-left: 4px solid #f59f00; font-weight: bold; }
    .gl-hint.error[b-6045vcnmfr] { background: var(--wrong-soft); color: var(--wrong); }

.gl-feedback[b-6045vcnmfr] { display: grid; gap: .45rem; padding: .8rem; border-radius: 12px; background: var(--right-soft); animation: pop-in-b-6045vcnmfr .2s ease-out; }
    .gl-feedback.wrong[b-6045vcnmfr] { background: var(--wrong-soft); }
    .gl-feedback p[b-6045vcnmfr] { margin: 0; }
    .gl-feedback .verdict[b-6045vcnmfr] { font-size: 1.2rem; font-weight: bold; color: #146c43; }
    .gl-feedback.wrong .verdict[b-6045vcnmfr] { color: var(--wrong); }
    .gl-feedback .answer[b-6045vcnmfr] { font-size: 1.1rem; font-weight: bold; }
    .gl-feedback .small[b-6045vcnmfr] { font-size: .9rem; color: var(--muted); }
    .gl-feedback .models[b-6045vcnmfr] { margin: 0; padding-left: 1.2rem; }

.link-btn[b-6045vcnmfr] { min-height: 40px; display: inline-flex; align-items: center; gap: .3rem; margin-right: auto; padding: 0 .3rem; border: none; background: transparent; font: inherit; font-weight: bold; color: var(--accent); cursor: pointer; }

/* ---------- States and the end ---------- */
.state-box[b-6045vcnmfr] { text-align: center; padding: 2rem 1rem; color: var(--muted); }
    .state-box > i[b-6045vcnmfr], .done-icon[b-6045vcnmfr] { display: block; font-size: 2.5rem; color: var(--ink); margin-bottom: .5rem; }

.spinner[b-6045vcnmfr] { display: inline-block; width: 2rem; height: 2rem; border: 3px solid #ddd; border-top-color: var(--ink); border-radius: 50%; animation: spin-b-6045vcnmfr .8s linear infinite; }
    .spinner.small[b-6045vcnmfr] { width: 1rem; height: 1rem; border-width: 2px; border-top-color: #fff; }

.round-summary[b-6045vcnmfr] { text-align: center; padding: 1.5rem 1rem; border: 2px solid var(--ink); border-radius: 16px 6px 18px 8px; background: #fffdf3; box-shadow: 3px 3px 0 var(--ink); animation: pop-in-b-6045vcnmfr .25s ease-out; }
    .round-summary h2[b-6045vcnmfr] { font-size: 1.5rem; }
    .round-summary .bi-trophy[b-6045vcnmfr] { color: #e0a800; }
.score[b-6045vcnmfr] { font-size: 1.1rem; margin: .2rem 0; }
    .score strong[b-6045vcnmfr] { font-size: 1.5rem; }
.score-split[b-6045vcnmfr] { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: .2rem 0 .4rem; font-size: .9rem; }
    .score-split:empty[b-6045vcnmfr] { display: none; }
    .score-split span[b-6045vcnmfr] { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .6rem; border-radius: 999px; }
    .score-split .helped[b-6045vcnmfr] { background: #fff4d6; color: #7a5600; }
    .score-split .wrong[b-6045vcnmfr] { background: #ffe8e8; color: #9b2c2c; }
.saved-note[b-6045vcnmfr] { margin: .9rem 0 0; font-size: .88rem; color: var(--muted); }
    .saved-note a[b-6045vcnmfr] { color: inherit; }
.actions[b-6045vcnmfr] { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 1.25rem; }

.btn-sketch[b-6045vcnmfr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 44px;
    padding: .45rem 1rem;
    font: inherit;
    font-weight: bold;
    color: var(--ink);
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 10px 4px 10px 4px;
    box-shadow: 2px 2px 0 var(--ink);
    text-decoration: none;
    cursor: pointer;
}
    .btn-sketch.primary[b-6045vcnmfr] { background: var(--ink); color: #fff; }
    .btn-sketch.big[b-6045vcnmfr] { min-height: 52px; font-size: 1.1rem; padding: 0 1.5rem; }
    .btn-sketch:disabled[b-6045vcnmfr] { opacity: .5; cursor: not-allowed; }

.choice:focus-visible[b-6045vcnmfr], .tile:focus-visible[b-6045vcnmfr], .btn-sketch:focus-visible[b-6045vcnmfr], .link-btn:focus-visible[b-6045vcnmfr] { outline: 3px solid var(--accent); outline-offset: 2px; }

@keyframes slide-in-b-6045vcnmfr { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes pop-in-b-6045vcnmfr { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@keyframes shake-b-6045vcnmfr { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes spin-b-6045vcnmfr { to { transform: rotate(360deg); } }

@media (max-width: 575.98px) {
    .gl-actions .btn-sketch.big[b-6045vcnmfr] { flex: 1 1 100%; }
    kbd[b-6045vcnmfr] { display: none; }
    .gl-head h1[b-6045vcnmfr] { font-size: clamp(1.4rem, 6vw, 1.8rem); overflow-wrap: anywhere; }
    .gl-pattern[b-6045vcnmfr], .gl-context[b-6045vcnmfr], .gl-text[b-6045vcnmfr], .gl-example[b-6045vcnmfr], .gl-feedback[b-6045vcnmfr], .gl-prompt[b-6045vcnmfr] { overflow-wrap: anywhere; }
    .gl-card[b-6045vcnmfr] { padding: .8rem; }
    .gl-actions[b-6045vcnmfr], .actions[b-6045vcnmfr] { align-items: stretch; }
    .actions > *[b-6045vcnmfr] { flex: 1 1 100%; }
}

@media (min-width: 576px) {
    .gl-card[b-6045vcnmfr] { padding: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
    .gl-card[b-6045vcnmfr], .gl-feedback[b-6045vcnmfr], .choice.wrong[b-6045vcnmfr], .round-summary[b-6045vcnmfr] { animation: none; }
}
/* /Pages/grammar/GrammarPopup.razor.rz.scp.css */
/* A grammar point in a popup. Full screen on phones, a card in the middle on wider screens. */

.gp-overlay[b-ujoedci0bg] {
    position: fixed;
    inset: 0;
    z-index: 1060;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(20, 20, 20, .45);
    backdrop-filter: blur(3px);
    animation: gp-fade-b-ujoedci0bg .15s ease-out;
}

.gp-dialog[b-ujoedci0bg] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: 92vh;
    max-height: 92dvh;
    min-width: 0;
    font-family: 'Comic Neue', Vazirmatn, 'Comic Sans MS', sans-serif;
    color: #2b2b2b;
    background: #fffdf3;
    border: 2px solid #2b2b2b;
    border-bottom: none;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -4px 0 #2b2b2b;
    outline: none;
    animation: gp-up-b-ujoedci0bg .2s ease-out;
}

.gp-head[b-ujoedci0bg] {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .8rem 1rem .6rem;
    border-bottom: 1px dashed #d0d5dd;
}

    .gp-head h2[b-ujoedci0bg] { flex: 1; min-width: 0; margin: 0; font-size: 1.25rem; overflow-wrap: anywhere; }

.gp-level[b-ujoedci0bg] { padding: .1rem .5rem; border-radius: 999px; background: #2b2b2b; color: #fff; font-size: .8rem; font-weight: bold; }

.gp-close[b-ujoedci0bg] {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border: 2px solid #2b2b2b;
    border-radius: 50%;
    background: #fff;
    font-size: 1rem;
    cursor: pointer;
}

    .gp-close:hover[b-ujoedci0bg], .gp-close:focus-visible[b-ujoedci0bg] { background: #f1f3f5; outline: none; }

.gp-body[b-ujoedci0bg] {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding: .9rem 1rem 1rem;
    display: grid;
    gap: .9rem;
    align-content: start;
}

.gp-summary[b-ujoedci0bg] { margin: 0; font-size: 1.08rem; line-height: 1.5; }

.gp-scene[b-ujoedci0bg], .gp-learn[b-ujoedci0bg] { display: grid; gap: .65rem; }
.gp-scene[b-ujoedci0bg] { padding: .75rem; border: 1.5px solid #a9e8b4; border-radius: 14px 5px 14px 5px; background: rgba(235, 251, 238, .65); }
.gp-section-head[b-ujoedci0bg], .gp-section-head > div[b-ujoedci0bg] { display: flex; align-items: center; gap: .55rem; }
.gp-section-head[b-ujoedci0bg] { justify-content: space-between; }
.gp-section-head h3[b-ujoedci0bg] { margin: 0; font-size: 1rem; }
.gp-section-head small[b-ujoedci0bg] { display: block; margin-top: .08rem; color: #6b6b6b; line-height: 1.25; }
.gp-step[b-ujoedci0bg] { flex: 0 0 auto; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #2b8a3e; color: #fff; font-weight: bold; }
.gp-next-scene[b-ujoedci0bg] { flex: 0 0 auto; min-height: 36px; padding: .2rem .6rem; border: 1.5px solid #2b8a3e; border-radius: 999px; background: #fff; color: #237a35; font: inherit; font-weight: bold; cursor: pointer; }
.gp-next-scene:focus-visible[b-ujoedci0bg] { outline: 3px solid #0d6efd; outline-offset: 2px; }

.gp-state[b-ujoedci0bg] { display: flex; align-items: center; gap: .5rem; padding: 1.5rem 0; color: #6b6b6b; }

.gp-spinner[b-ujoedci0bg] {
    width: 22px; height: 22px; display: inline-block;
    border: 3px solid rgba(0, 0, 0, .15); border-top-color: #2b2b2b; border-radius: 50%;
    animation: gp-spin-b-ujoedci0bg .8s linear infinite;
}

.gp-lines h3[b-ujoedci0bg] { display: flex; align-items: center; gap: .4rem; margin: 0 0 .4rem; font-size: 1rem; }
    .gp-lines h3 .bi[b-ujoedci0bg] { color: #2b8a3e; }
    .gp-lines h3 small[b-ujoedci0bg] { font-weight: normal; color: #6b6b6b; }
.gp-lines ul[b-ujoedci0bg] { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }

.gp-line[b-ujoedci0bg] {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    width: 100%;
    min-height: 44px;
    padding: .45rem .6rem;
    border: 1.5px solid #d0d5dd;
    border-radius: 10px 4px 10px 4px;
    background: #fff;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

    .gp-line:hover:not(:disabled)[b-ujoedci0bg], .gp-line:focus-visible[b-ujoedci0bg] { border-color: #2f9e44; background: #ebfbee; outline: none; }
    .gp-line:disabled[b-ujoedci0bg] { cursor: default; }
    .gp-line .bi[b-ujoedci0bg] { color: #2b8a3e; font-size: 1.15rem; line-height: 1.3; }
    .gp-line mark[b-ujoedci0bg] { background: #d3f9d8; color: #1b5e20; font-weight: bold; padding: 0 .1em; border-radius: 3px; }

.gp-link-btn[b-ujoedci0bg] { margin-top: .3rem; border: none; background: none; padding: 0; color: #2b8a3e; font: inherit; text-decoration: underline; cursor: pointer; }

.gp-foot[b-ujoedci0bg] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: flex-end;
    padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
    border-top: 1px dashed #d0d5dd;
}

.gp-btn[b-ujoedci0bg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: 44px;
    padding: .4rem 1rem;
    border: 2px solid #2b2b2b;
    border-radius: 10px 4px 10px 4px;
    background: #fff;
    box-shadow: 2px 2px 0 #2b2b2b;
    color: #2b2b2b;
    font-weight: bold;
    text-decoration: none;
}

.gp-btn-step[b-ujoedci0bg] { display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; background: #fff; color: #2b2b2b; font-size: .75rem; }

    .gp-btn.primary[b-ujoedci0bg] { background: #2b2b2b; color: #fff; }
    .gp-btn:focus-visible[b-ujoedci0bg] { outline: 3px solid #0d6efd; outline-offset: 2px; }

@keyframes gp-fade-b-ujoedci0bg { from { opacity: 0; } }
@keyframes gp-up-b-ujoedci0bg { from { transform: translateY(24px); opacity: 0; } }
@keyframes gp-spin-b-ujoedci0bg { to { transform: rotate(360deg); } }

@media (min-width: 640px) {
    .gp-overlay[b-ujoedci0bg] { align-items: center; padding: 1.5rem; }
    .gp-dialog[b-ujoedci0bg] { max-width: 720px; max-height: 88vh; border-bottom: 2px solid #2b2b2b; border-radius: 18px 6px 20px 8px; box-shadow: 4px 4px 0 #2b2b2b; }
}

@media (max-width: 480px) {
    .gp-section-head[b-ujoedci0bg] { align-items: flex-start; flex-wrap: wrap; }
    .gp-next-scene[b-ujoedci0bg] { font-size: .82rem; }
    .gp-foot .gp-btn[b-ujoedci0bg] { flex: 1 1 100%; }
    .gp-dialog[b-ujoedci0bg] { max-height: 100dvh; }
    .gp-line span[b-ujoedci0bg], .gp-summary[b-ujoedci0bg], .gp-body[b-ujoedci0bg] { overflow-wrap: anywhere; }
}
/* /Pages/grammar/GrammarPractice.razor.rz.scp.css */
/* Grammar practice — the same hand-drawn look as the review page. Mobile first. */

.gp[b-2ix45ln52k] {
    --ink: #2b2b2b;
    --muted: #6b6b6b;
    --paper: #fff;
    --accent: #0d6efd;
    --green: #2b8a3e;

    font-family: 'Comic Neue', Vazirmatn, 'Comic Sans MS', sans-serif;
    color: var(--ink);
    max-width: 760px;
    margin: 0 auto;
    padding: .75rem .75rem 3rem;
    min-width: 0;
}

.back-link[b-2ix45ln52k] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-bottom: .5rem;
    color: var(--muted);
    font-size: .9rem;
    text-decoration: none;
}

.gp-head[b-2ix45ln52k] { margin-bottom: 1rem; }
    .gp-head h1[b-2ix45ln52k] { margin: 0; font-size: 1.8rem; }
    .gp-head h1 .bi[b-2ix45ln52k] { color: var(--green); }
.sub[b-2ix45ln52k] { margin: .2rem 0 0; color: var(--muted); font-size: 1.05rem; }

.progress-row[b-2ix45ln52k] {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .75rem;
    font-size: .85rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

    .progress-row .bar[b-2ix45ln52k] { flex: 1; height: 8px; background: #eee; border-radius: 999px; overflow: hidden; }
    .progress-row .bar div[b-2ix45ln52k] { height: 100%; background: var(--green); transition: width .3s; }

.follow-up[b-2ix45ln52k] { margin: 0 0 .6rem; padding: .45rem .75rem; border-left: 4px solid #f59f00; border-radius: 8px; background: #fff4d6; color: #7a5600; font-weight: bold; }

.state-box[b-2ix45ln52k] {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--muted);
}

    .state-box > i[b-2ix45ln52k], .done-icon[b-2ix45ln52k] { display: block; font-size: 2.5rem; color: var(--ink); margin-bottom: .5rem; }

.spinner[b-2ix45ln52k] {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    border: 3px solid #ddd;
    border-top-color: var(--ink);
    border-radius: 50%;
    animation: spin-b-2ix45ln52k .8s linear infinite;
}

.round-summary[b-2ix45ln52k] {
    text-align: center;
    padding: 1.5rem 1rem;
    border: 2px solid var(--ink);
    border-radius: 16px 6px 18px 8px;
    background: #fffdf3;
    box-shadow: 3px 3px 0 var(--ink);
    animation: pop-in-b-2ix45ln52k .25s ease-out;
}

    .round-summary h2[b-2ix45ln52k] { font-size: 1.5rem; }
    .round-summary .bi-trophy[b-2ix45ln52k] { color: #e0a800; }
    .score[b-2ix45ln52k] { font-size: 1.1rem; }
    .score strong[b-2ix45ln52k] { font-size: 1.5rem; }
    .score-split[b-2ix45ln52k] { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: .2rem 0 .6rem; font-size: .9rem; }
        .score-split:empty[b-2ix45ln52k] { display: none; }
        .score-split span[b-2ix45ln52k] { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .6rem; border-radius: 999px; }
        .score-split .helped[b-2ix45ln52k] { background: #fff4d6; color: #7a5600; }
        .score-split .wrong[b-2ix45ln52k] { background: #ffe8e8; color: #9b2c2c; }
    .count small[b-2ix45ln52k] { color: #8a6d1f; font-weight: normal; }

.points[b-2ix45ln52k] {
    list-style: none;
    margin: 1rem auto 0;
    padding: 0;
    max-width: 480px;
    text-align: left;
}

    .points li[b-2ix45ln52k] {
        display: flex;
        align-items: center;
        gap: .5rem;
        padding: .45rem .2rem;
        border-bottom: 1px dashed #ddd;
    }

    .points a[b-2ix45ln52k] { flex: 1; min-width: 0; color: var(--ink); overflow-wrap: anywhere; }
    .points .count[b-2ix45ln52k] { color: var(--muted); font-variant-numeric: tabular-nums; }
    .points .all-right .bi[b-2ix45ln52k] { color: var(--green); }
    .points .to-work .bi[b-2ix45ln52k] { color: #e8590c; }

    .points .mastered[b-2ix45ln52k] {
        flex: 0 0 auto;
        padding: 0 .45rem;
        border-radius: 999px;
        background: #fff3bf;
        color: #8a6100;
        font-size: .78rem;
        font-weight: bold;
    }

.saved-note[b-2ix45ln52k] { margin: .9rem 0 0; font-size: .88rem; color: var(--muted); }
    .saved-note a[b-2ix45ln52k] { color: inherit; }

.actions[b-2ix45ln52k] { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 1.25rem; }

.btn-sketch[b-2ix45ln52k] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 44px;
    padding: .45rem 1rem;
    font: inherit;
    font-weight: bold;
    color: var(--ink);
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 10px 4px 10px 4px;
    box-shadow: 2px 2px 0 var(--ink);
    text-decoration: none;
    cursor: pointer;
}

    .btn-sketch.primary[b-2ix45ln52k] { background: var(--ink); color: #fff; }
    .btn-sketch.big[b-2ix45ln52k] { min-height: 52px; font-size: 1.1rem; padding: 0 1.5rem; }
    .btn-sketch:focus-visible[b-2ix45ln52k] { outline: 3px solid var(--accent); outline-offset: 2px; }

@keyframes pop-in-b-2ix45ln52k { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@keyframes spin-b-2ix45ln52k { to { transform: rotate(360deg); } }

@media (min-width: 576px) {
    .gp[b-2ix45ln52k] { padding: 1.25rem 1rem 3rem; }
}

.mixed-note[b-2ix45ln52k] { display: inline-flex; align-items: center; gap: .35rem; margin: .45rem 0 0; padding: .2rem .65rem; border-radius: 999px; background: #f3f0ff; color: #5f3dc4; font-size: .9rem; font-weight: bold; }
@media (max-width: 575.98px) {
    .gp-head h1[b-2ix45ln52k] { font-size: clamp(1.4rem, 6vw, 1.8rem); overflow-wrap: anywhere; }
    .mixed-note[b-2ix45ln52k] { display: flex; width: 100%; border-radius: 10px; overflow-wrap: anywhere; }
    .actions > *[b-2ix45ln52k] { flex: 1 1 100%; }
    .points li[b-2ix45ln52k] { min-width: 0; }
}
/* /Pages/grammar/GrammarScenePlayer.razor.rz.scp.css */
.gsp[b-j6r3gqm41l] { display: grid; gap: .5rem; min-width: 0; }
.gsp-video[b-j6r3gqm41l] { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border: 2px solid #2b2b2b; border-radius: 12px 5px 12px 5px; background: #111; }
.gsp-video video[b-j6r3gqm41l] { display: block; width: 100%; height: 100%; object-fit: contain; background: #111; }
.gsp-play[b-j6r3gqm41l] { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 58px; height: 58px; border: 2px solid #fff; border-radius: 50%; background: #2b8a3e; color: #fff; font-size: 2rem; cursor: pointer; box-shadow: 0 3px 12px rgba(0,0,0,.35); }
.gsp-loading[b-j6r3gqm41l] { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .7rem; border-radius: 999px; background: rgba(0,0,0,.75); color: #fff; }
.gsp-tools[b-j6r3gqm41l] { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.gsp-tools button[b-j6r3gqm41l] { min-height: 36px; padding: .2rem .65rem; border: 1.5px solid #69db7c; border-radius: 999px; background: #fff; color: #237a35; font: inherit; font-weight: bold; cursor: pointer; }
.gsp-tools button:focus-visible[b-j6r3gqm41l], .gsp-play:focus-visible[b-j6r3gqm41l] { outline: 3px solid #0d6efd; outline-offset: 2px; }
.gsp-tools small[b-j6r3gqm41l] { margin-left: auto; color: #6b6b6b; }
.gsp blockquote[b-j6r3gqm41l] { margin: 0; padding: .65rem .75rem; border-left: 4px solid #51cf66; background: #ebfbee; line-height: 1.55; overflow-wrap: anywhere; }
.gsp mark[b-j6r3gqm41l] { padding: 0 .12rem; border-radius: 3px; background: #b2f2bb; color: #155724; font-weight: bold; }
.gsp-transcript[b-j6r3gqm41l] { justify-self: start; min-height: 36px; padding: .2rem .7rem; border: 1.5px dashed #868e96; border-radius: 999px; background: #fff; color: #495057; font: inherit; cursor: pointer; }
.gsp-message[b-j6r3gqm41l] { margin: 0; color: #a61e4d; font-size: .9rem; }

@media (max-width: 420px) {
    .gsp-tools small[b-j6r3gqm41l] { flex-basis: 100%; margin-left: 0; }
}
/* /Pages/lesson/GuidedPractice.razor.rz.scp.css */
/* One grammar lesson — the same hand-drawn look as practice and review. Mobile first. */

.gl[b-rkyz29exi9] {
    --ink: #2b2b2b;
    --muted: #6b6b6b;
    --paper: #fff;
    --accent: #0d6efd;
    --accent-soft: #e8f0ff;
    --green: #2b8a3e;
    --right: #198754;
    --right-soft: #e9f7ef;
    --wrong: #b02a37;
    --wrong-soft: #fdecec;

    font-family: 'Comic Neue', Vazirmatn, 'Comic Sans MS', sans-serif;
    color: var(--ink);
    max-width: 760px;
    margin: 0 auto;
    padding: .75rem .75rem 3rem;
}

.back-link[b-rkyz29exi9] { display: inline-flex; align-items: center; gap: .3rem; margin-bottom: .5rem; color: var(--muted); font-size: .9rem; text-decoration: none; }

/* ---------- Header ---------- */
.gl-head[b-rkyz29exi9] { margin-bottom: .9rem; }
    .gl-head h1[b-rkyz29exi9] { margin: 0; font-size: 1.8rem; line-height: 1.15; }
.gl-sub[b-rkyz29exi9] { display: flex; align-items: center; gap: .4rem; margin: .3rem 0 0; color: var(--muted); }
    .gl-sub .level[b-rkyz29exi9] { padding: 0 .45rem; border: 1.5px solid var(--ink); border-radius: 6px; color: var(--ink); font-size: .8rem; font-weight: bold; }
.gl-goal[b-rkyz29exi9] { display: flex; gap: .45rem; margin: .6rem 0 0; padding: .55rem .75rem; border-radius: 10px; background: #fff9db; line-height: 1.4; }
    .gl-goal .bi[b-rkyz29exi9] { color: #e67700; }
    .gl-goal.done[b-rkyz29exi9] { justify-content: center; margin: .8rem auto 0; max-width: 480px; }
.gl-preview[b-rkyz29exi9] { margin: .6rem 0 0; padding: .45rem .7rem; border: 1.5px dashed #845ef7; border-radius: 10px; background: #f3f0ff; color: #5f3dc4; font-size: .9rem; }

/* ---------- Stages and progress ---------- */
.gl-stages[b-rkyz29exi9] { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .6rem; padding: 0; list-style: none; }
    .gl-stages li[b-rkyz29exi9] { padding: .15rem .6rem; border: 1.5px solid #ced4da; border-radius: 999px; color: var(--muted); font-size: .82rem; }
    .gl-stages li.now[b-rkyz29exi9] { border-color: var(--ink); background: var(--ink); color: #fff; font-weight: bold; }
    .gl-stages li.done[b-rkyz29exi9] { border-color: #8ce99a; background: #ebfbee; color: #237a35; }

.progress-row[b-rkyz29exi9] { display: flex; align-items: center; gap: .6rem; margin-bottom: .75rem; font-size: .85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
    .progress-row .bar[b-rkyz29exi9] { flex: 1; height: 8px; background: #eee; border-radius: 999px; overflow: hidden; }
    .progress-row .bar div[b-rkyz29exi9] { height: 100%; background: var(--green); transition: width .3s; }

/* ---------- The step card ---------- */
.gl-card[b-rkyz29exi9] {
    display: flex;
    flex-direction: column;
    gap: .8rem;
    padding: 1rem;
    border: 2px solid var(--ink);
    border-radius: 16px 6px 18px 8px;
    background: #fff;
    box-shadow: 3px 3px 0 var(--ink);
    animation: slide-in-b-rkyz29exi9 .2s ease-out;
}

.gl-kind[b-rkyz29exi9] { margin: 0; color: var(--muted); font-size: .85rem; font-weight: bold; text-transform: uppercase; letter-spacing: .04em; }
.gl-prompt[b-rkyz29exi9] { margin: 0; font-size: 1.15rem; font-weight: bold; }
.gl-text[b-rkyz29exi9] { margin: 0; font-size: 1.08rem; line-height: 1.55; }
.gl-pattern[b-rkyz29exi9] { margin: 0; padding: .6rem .8rem; border: 2px dashed var(--green); border-radius: 10px; background: #f4fce3; font-size: 1.15rem; font-weight: bold; text-align: center; }
.gl-example[b-rkyz29exi9] { margin: 0; color: #364fc7; font-style: italic; }
.gl-context[b-rkyz29exi9] { margin: 0; padding: .6rem .8rem; border-left: 4px solid var(--accent); background: var(--accent-soft); font-size: 1.1rem; line-height: 1.5; }
.gl-note[b-rkyz29exi9] { margin: 0; color: var(--muted); font-size: .85rem; }

.gl-gap[b-rkyz29exi9] { margin: 0; font-size: 1.25rem; line-height: 2.2; text-align: center; overflow-wrap: anywhere; }
    .gl-gap input[b-rkyz29exi9] {
        max-width: 100%;
        height: 2.4rem;
        margin: 0 .2rem;
        padding: 0 .4rem;
        border: none;
        border-bottom: 3px solid var(--accent);
        border-radius: 6px 6px 0 0;
        background: var(--accent-soft);
        font: inherit;
        font-size: 1.1rem; /* ≥16px: no zoom on iOS */
        text-align: center;
        outline: none;
    }
    .gl-gap input:focus[b-rkyz29exi9] { background: #dbe7ff; }

.gl-input[b-rkyz29exi9] {
    width: 100%;
    padding: .55rem .7rem;
    border: 2px solid var(--ink);
    border-radius: 10px 4px 10px 4px;
    font: inherit;
    font-size: 1.05rem;
    resize: vertical;
}
    .gl-input:focus[b-rkyz29exi9] { outline: 3px solid var(--accent); outline-offset: 1px; }

.gl-choices[b-rkyz29exi9] { display: grid; gap: .5rem; }
.choice[b-rkyz29exi9] {
    min-height: 52px;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .8rem;
    border: 2px solid var(--ink);
    border-radius: 12px 4px 12px 4px;
    background: #fff;
    font: inherit;
    font-size: 1rem;
    text-align: left;
    color: var(--ink);
    cursor: pointer;
}
    .choice:hover:not(:disabled)[b-rkyz29exi9] { background: var(--accent-soft); }
    .choice:disabled[b-rkyz29exi9] { cursor: default; }
    .choice.right[b-rkyz29exi9] { border-color: var(--right); background: var(--right-soft); color: #146c43; font-weight: bold; }
    .choice.wrong[b-rkyz29exi9] { border-color: var(--wrong); background: var(--wrong-soft); color: var(--wrong); animation: shake-b-rkyz29exi9 .3s; }
    .choice.dim[b-rkyz29exi9] { opacity: .45; }

kbd[b-rkyz29exi9] { font-family: inherit; font-size: .7rem; padding: 0 .3rem; border: 1px solid currentColor; border-radius: 4px; opacity: .7; }

.answer-row[b-rkyz29exi9] { min-height: 60px; display: flex; flex-wrap: wrap; align-content: flex-start; gap: .4rem; padding: .5rem; border-bottom: 2px dashed var(--accent); }
.placeholder[b-rkyz29exi9] { color: #9a9a9a; align-self: center; }
.tile-bank[b-rkyz29exi9] { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; }
.tile[b-rkyz29exi9] {
    min-height: 44px;
    padding: 0 .8rem;
    border: 2px solid var(--ink);
    border-radius: 10px 4px 10px 4px;
    background: #fff;
    box-shadow: 2px 2px 0 var(--ink);
    font: inherit;
    font-size: 1.05rem;
    color: var(--ink);
    cursor: pointer;
}
    .tile.placed[b-rkyz29exi9] { box-shadow: none; background: var(--accent-soft); }
    .tile:disabled[b-rkyz29exi9] { cursor: default; opacity: .35; }
    .tile.placed:disabled[b-rkyz29exi9] { opacity: 1; }
.is-right .tile.placed[b-rkyz29exi9] { background: var(--right-soft); border-color: var(--right); }
.is-wrong .tile.placed[b-rkyz29exi9] { background: var(--wrong-soft); border-color: var(--wrong); }

.gl-actions[b-rkyz29exi9] { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .6rem; }
    .gl-actions .gl-hint[b-rkyz29exi9] { flex: 1 1 100%; }

.gl-hint[b-rkyz29exi9] { margin: 0; padding: .5rem .7rem; border-radius: 10px; background: #fff4d6; color: #7a5600; }
    .gl-hint.try[b-rkyz29exi9] { border-left: 4px solid #f59f00; font-weight: bold; }
    .gl-hint.error[b-rkyz29exi9] { background: var(--wrong-soft); color: var(--wrong); }

.gl-feedback[b-rkyz29exi9] { display: grid; gap: .45rem; padding: .8rem; border-radius: 12px; background: var(--right-soft); animation: pop-in-b-rkyz29exi9 .2s ease-out; }
    .gl-feedback.wrong[b-rkyz29exi9] { background: var(--wrong-soft); }
    .gl-feedback p[b-rkyz29exi9] { margin: 0; }
    .gl-feedback .verdict[b-rkyz29exi9] { font-size: 1.2rem; font-weight: bold; color: #146c43; }
    .gl-feedback.wrong .verdict[b-rkyz29exi9] { color: var(--wrong); }
    .gl-feedback .answer[b-rkyz29exi9] { font-size: 1.1rem; font-weight: bold; }
    .gl-feedback .small[b-rkyz29exi9] { font-size: .9rem; color: var(--muted); }
    .gl-feedback .models[b-rkyz29exi9] { margin: 0; padding-left: 1.2rem; }

.link-btn[b-rkyz29exi9] { min-height: 40px; display: inline-flex; align-items: center; gap: .3rem; margin-right: auto; padding: 0 .3rem; border: none; background: transparent; font: inherit; font-weight: bold; color: var(--accent); cursor: pointer; }

/* ---------- States and the end ---------- */
.state-box[b-rkyz29exi9] { text-align: center; padding: 2rem 1rem; color: var(--muted); }
    .state-box > i[b-rkyz29exi9], .done-icon[b-rkyz29exi9] { display: block; font-size: 2.5rem; color: var(--ink); margin-bottom: .5rem; }

.spinner[b-rkyz29exi9] { display: inline-block; width: 2rem; height: 2rem; border: 3px solid #ddd; border-top-color: var(--ink); border-radius: 50%; animation: spin-b-rkyz29exi9 .8s linear infinite; }
    .spinner.small[b-rkyz29exi9] { width: 1rem; height: 1rem; border-width: 2px; border-top-color: #fff; }

.round-summary[b-rkyz29exi9] { text-align: center; padding: 1.5rem 1rem; border: 2px solid var(--ink); border-radius: 16px 6px 18px 8px; background: #fffdf3; box-shadow: 3px 3px 0 var(--ink); animation: pop-in-b-rkyz29exi9 .25s ease-out; }
    .round-summary h2[b-rkyz29exi9] { font-size: 1.5rem; }
    .round-summary .bi-trophy[b-rkyz29exi9] { color: #e0a800; }
.score[b-rkyz29exi9] { font-size: 1.1rem; margin: .2rem 0; }
    .score strong[b-rkyz29exi9] { font-size: 1.5rem; }
.score-split[b-rkyz29exi9] { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: .2rem 0 .4rem; font-size: .9rem; }
    .score-split:empty[b-rkyz29exi9] { display: none; }
    .score-split span[b-rkyz29exi9] { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .6rem; border-radius: 999px; }
    .score-split .helped[b-rkyz29exi9] { background: #fff4d6; color: #7a5600; }
    .score-split .wrong[b-rkyz29exi9] { background: #ffe8e8; color: #9b2c2c; }
.saved-note[b-rkyz29exi9] { margin: .9rem 0 0; font-size: .88rem; color: var(--muted); }
    .saved-note a[b-rkyz29exi9] { color: inherit; }
.actions[b-rkyz29exi9] { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 1.25rem; }

.btn-sketch[b-rkyz29exi9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 44px;
    padding: .45rem 1rem;
    font: inherit;
    font-weight: bold;
    color: var(--ink);
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 10px 4px 10px 4px;
    box-shadow: 2px 2px 0 var(--ink);
    text-decoration: none;
    cursor: pointer;
}
    .btn-sketch.primary[b-rkyz29exi9] { background: var(--ink); color: #fff; }
    .btn-sketch.big[b-rkyz29exi9] { min-height: 52px; font-size: 1.1rem; padding: 0 1.5rem; }
    .btn-sketch:disabled[b-rkyz29exi9] { opacity: .5; cursor: not-allowed; }

.choice:focus-visible[b-rkyz29exi9], .tile:focus-visible[b-rkyz29exi9], .btn-sketch:focus-visible[b-rkyz29exi9], .link-btn:focus-visible[b-rkyz29exi9] { outline: 3px solid var(--accent); outline-offset: 2px; }

@keyframes slide-in-b-rkyz29exi9 { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes pop-in-b-rkyz29exi9 { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@keyframes shake-b-rkyz29exi9 { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes spin-b-rkyz29exi9 { to { transform: rotate(360deg); } }

@media (max-width: 575.98px) {
    .gl-actions .btn-sketch.big[b-rkyz29exi9] { flex: 1 1 100%; }
    kbd[b-rkyz29exi9] { display: none; }
}

@media (min-width: 576px) {
    .gl-card[b-rkyz29exi9] { padding: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
    .gl-card[b-rkyz29exi9], .gl-feedback[b-rkyz29exi9], .choice.wrong[b-rkyz29exi9], .round-summary[b-rkyz29exi9] { animation: none; }
}

/* ---------- Scene lesson additions ---------- */
.sl-term[b-rkyz29exi9] { margin: 0; font-size: 1.45rem; font-weight: bold; color: #364fc7; }

.sl-targets[b-rkyz29exi9] { margin: 1rem auto .5rem; max-width: 520px; text-align: left; }
.sl-targets-title[b-rkyz29exi9] { margin: 0 0 .4rem; font-weight: bold; }
.sl-targets ul[b-rkyz29exi9] { margin: 0; padding: 0; list-style: none; display: grid; gap: .4rem; }
.sl-targets label[b-rkyz29exi9] { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .5rem; padding: .5rem .65rem; border: 1.5px solid #d9d9d9; border-radius: 10px; background: #fff; cursor: pointer; }
.sl-targets input[b-rkyz29exi9] { align-self: center; width: 1.1rem; height: 1.1rem; }
.sl-target-term[b-rkyz29exi9] { font-weight: bold; }
.sl-target-meaning[b-rkyz29exi9] { flex: 1 1 200px; color: var(--muted); font-size: .9rem; }
.sl-outcome[b-rkyz29exi9] { padding: 0 .45rem; border-radius: 999px; font-size: .75rem; font-weight: bold; }
    .sl-outcome.own[b-rkyz29exi9] { background: #d3f9d8; color: #2b8a3e; }
    .sl-outcome.helped[b-rkyz29exi9] { background: #fff3bf; color: #8a5a00; }
    .sl-outcome.wrong[b-rkyz29exi9] { background: #ffe3e3; color: #c92a2a; }
.sl-limit[b-rkyz29exi9] { display: block; margin-top: .35rem; color: #8a5a00; }
    .sl-limit a[b-rkyz29exi9] { margin-left: .3rem; font-weight: bold; }
/* /Pages/MyPlan.razor.rz.scp.css */
.my-plan[b-3fml1p2blt] { max-width: 720px; margin: 0 auto; }

.page-head h1[b-3fml1p2blt] { margin: 0; }
.page-head .sub[b-3fml1p2blt] { color: #6b6b6b; margin: .25rem 0 1rem; }

.plan-card[b-3fml1p2blt] {
    border: 2px solid #2b2b2b;
    border-radius: 14px 6px 14px 6px;
    background: #fff;
    box-shadow: 3px 3px 0 #2b2b2b;
    padding: 1.1rem 1.25rem;
}

.plan-title[b-3fml1p2blt] { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.plan-title h2[b-3fml1p2blt] { margin: 0; font-size: 1.5rem; }
.badge-sketch[b-3fml1p2blt] { border: 2px dashed #2b2b2b; border-radius: 8px; padding: .1rem .5rem; font-size: .85rem; font-weight: bold; }
.plan-desc[b-3fml1p2blt] { color: #555; margin: .4rem 0 0; }

.meters[b-3fml1p2blt] { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .7rem; }
.meter[b-3fml1p2blt] { display: grid; grid-template-columns: 1fr auto; gap: .25rem .75rem; align-items: center; }
.meter-label[b-3fml1p2blt] { font-weight: bold; }
.meter-label .bi[b-3fml1p2blt] { color: #0d6efd; margin-right: .3rem; }
.meter-value[b-3fml1p2blt] { font-variant-numeric: tabular-nums; }
.meter-value small[b-3fml1p2blt] { color: #198754; font-weight: bold; margin-left: .3rem; }
.meter-bar[b-3fml1p2blt] { grid-column: 1 / -1; height: 10px; border: 2px solid #2b2b2b; border-radius: 6px; overflow: hidden; background: #f3f3f3; }
.meter-bar > span[b-3fml1p2blt] { display: block; height: 100%; background: #0d6efd; }
.meter.near .meter-bar > span[b-3fml1p2blt] { background: #f0ad00; }
.meter.full .meter-bar > span[b-3fml1p2blt] { background: #dc3545; }
.meter.full .meter-value[b-3fml1p2blt] { color: #b02a37; font-weight: bold; }

.features[b-3fml1p2blt] { list-style: none; padding: 0; margin: 1.1rem 0 0; display: grid; gap: .35rem; }
.features .yes .bi[b-3fml1p2blt] { color: #198754; }
.features .no[b-3fml1p2blt] { color: #8a8a8a; }
.features .bi[b-3fml1p2blt] { margin-right: .35rem; }

.plan-note[b-3fml1p2blt] { margin: 1rem 0 0; font-size: .85rem; color: #6b6b6b; }

.gift-card[b-3fml1p2blt] { margin-top: 1rem; }
.gift-card h2[b-3fml1p2blt] { margin: 0 0 .6rem; font-size: 1.2rem; }
.gift-card h2 .bi[b-3fml1p2blt] { color: #d63384; }
.gift-form[b-3fml1p2blt] { display: flex; gap: .5rem; flex-wrap: wrap; }
.gift-form input[b-3fml1p2blt] {
    flex: 1 1 220px;
    min-width: 0;
    border: 2px solid #2b2b2b;
    border-radius: 8px;
    padding: .45rem .7rem;
    font: inherit;
    font-family: ui-monospace, Consolas, monospace;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.gift-form input[b-3fml1p2blt]::placeholder { text-transform: none; color: #b3b3b3; }
.gift-ok[b-3fml1p2blt] { color: #146c43; font-weight: bold; margin: 0 0 .7rem; }
.gift-error[b-3fml1p2blt] { color: #b02a37; margin: .5rem 0 0; }
.gift-hint[b-3fml1p2blt] { margin: .6rem 0 0; }
.gift-hint .bi[b-3fml1p2blt] { color: #d63384; }
.upgrade-info[b-3fml1p2blt] { margin-top: 1rem; padding-top: .8rem; border-top: 1px dashed #d7d7d7; }
.upgrade-info p[b-3fml1p2blt] { margin: 0 0 .6rem; white-space: pre-line; unicode-bidi: plaintext; }
.btn-sketch[b-3fml1p2blt] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border: 2px solid #2b2b2b;
    border-radius: 10px 4px 10px 4px;
    background: #ffd84d;
    box-shadow: 2px 2px 0 #2b2b2b;
    padding: .4rem .9rem;
    font: inherit;
    font-weight: bold;
    color: #2b2b2b;
    text-decoration: none;
    cursor: pointer;
}
.btn-sketch:disabled[b-3fml1p2blt] { opacity: .55; cursor: not-allowed; box-shadow: none; }

.buy-card[b-3fml1p2blt] { margin-top: 1rem; }
.buy-card h2[b-3fml1p2blt] { margin: 0 0 .6rem; font-size: 1.2rem; }
.buy-card h2 .bi[b-3fml1p2blt] { color: #0d6efd; }
.buy-test[b-3fml1p2blt] { margin: 0 0 .6rem; color: #85520f; font-size: .9rem; }
.buy-list[b-3fml1p2blt] { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.buy-list li[b-3fml1p2blt] { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: .75rem; padding: .55rem 0; border-top: 1px dashed #d7d7d7; }
.buy-list li:first-child[b-3fml1p2blt] { border-top: none; }
.buy-price[b-3fml1p2blt] { font-weight: bold; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 480px) {
    .buy-list li[b-3fml1p2blt] { grid-template-columns: 1fr auto; }
    .buy-list li .btn-sketch[b-3fml1p2blt] { grid-column: 1 / -1; justify-content: center; }
}
.buy-extra[b-3fml1p2blt] { display: block; margin-top: .1rem; color: #0a4fb4; font-size: .8rem; font-weight: normal; }
/* /Pages/myvideos/MyVideos.razor.rz.scp.css */
/* My videos. The site's sketchy cards: ink borders, uneven corners, hard shadows. */

.mv[b-gbxnrfrr6v] { --ink: #2b2b2b; --muted: #6b6b6b; --accent: #0d6efd; --ok: #146c43; --bad: #b02a37;
      max-width: 860px; margin: 0 auto; padding: 1rem .9rem 3rem; color: var(--ink); }

.mv-head h1[b-gbxnrfrr6v] { display: flex; align-items: center; gap: .5rem; margin: .5rem 0 .25rem; font-size: 1.8rem; }
.mv-head p[b-gbxnrfrr6v] { margin: 0 0 1rem; color: var(--muted); }
.mv-head strong[b-gbxnrfrr6v] { color: var(--ink); }

.mv-card[b-gbxnrfrr6v] { margin-bottom: 1rem; padding: 1rem 1.1rem; border: 2px solid var(--ink); border-radius: 14px 4px 14px 4px; background: #fff; box-shadow: 3px 3px 0 var(--ink); }
.mv-card h2[b-gbxnrfrr6v] { display: flex; align-items: center; gap: .45rem; margin: 0 0 .75rem; font-size: 1.2rem; }

.mv-notice[b-gbxnrfrr6v] { display: flex; gap: .4rem; align-items: flex-start; margin: 0 0 1rem; padding: .6rem .8rem; border-radius: 10px; background: #e9f7ef; color: var(--ok); }
    .mv-notice.error[b-gbxnrfrr6v] { background: #fdecec; color: #842029; }

/* ---------- Steps ---------- */
.mv-steps[b-gbxnrfrr6v] { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.mv-steps > li[b-gbxnrfrr6v] { padding: .75rem; border: 2px dashed #c9c9c9; border-radius: 12px; }
    .mv-steps > li.done[b-gbxnrfrr6v] { border-style: solid; border-color: #9fd3b6; background: #f6fcf8; }
.mv-step-head[b-gbxnrfrr6v] { display: flex; align-items: center; gap: .75rem; }
    .mv-step-head > div[b-gbxnrfrr6v] { flex: 1; display: grid; }
    .mv-step-head small[b-gbxnrfrr6v] { color: var(--muted); font-size: .82rem; }
.mv-step-no[b-gbxnrfrr6v] { display: grid; place-items: center; flex: 0 0 30px; height: 30px; border-radius: 50%; background: var(--ink); color: #fff; font-weight: bold; }
.mv-steps > li.done .mv-step-no[b-gbxnrfrr6v] { background: var(--ok); }

.mv-file[b-gbxnrfrr6v] { display: grid; gap: .3rem; margin: .6rem 0 0 2.6rem; font-size: .9rem; }
.mv-file-name[b-gbxnrfrr6v] { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .35rem; word-break: break-all; }
    .mv-file-name small[b-gbxnrfrr6v] { color: var(--muted); }
.mv-check[b-gbxnrfrr6v] { display: inline-flex; align-items: center; gap: .35rem; color: var(--muted); }
    .mv-check.ok[b-gbxnrfrr6v] { color: var(--ok); }
.mv-warn[b-gbxnrfrr6v] { margin: .25rem 0 0; padding: .5rem .7rem; border-radius: 8px; background: #fff3cd; color: #7a4a0c; font-size: .88rem; }
    .mv-warn.error[b-gbxnrfrr6v] { background: #fdecec; color: #842029; }

.mv-form[b-gbxnrfrr6v] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin: .6rem 0 0 2.6rem; }
    .mv-form label[b-gbxnrfrr6v] { display: grid; gap: .2rem; }
    .mv-form label > span[b-gbxnrfrr6v] { font-size: .8rem; font-weight: bold; color: var(--muted); }
    .mv-form input[b-gbxnrfrr6v] { width: 100%; min-height: 40px; padding: .4rem .6rem; border: 2px solid var(--ink); border-radius: 8px; font: inherit; }
    .mv-form input:focus[b-gbxnrfrr6v] { outline: 3px solid #cfe2ff; border-color: var(--accent); }
.mv-wide[b-gbxnrfrr6v] { grid-column: 1 / -1; }
.mv-kind[b-gbxnrfrr6v] { grid-column: 1 / -1; display: flex; gap: .4rem; }
    .mv-kind label[b-gbxnrfrr6v] { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .8rem; border: 2px solid var(--ink); border-radius: 999px; cursor: pointer; font-size: .9rem; }
    .mv-kind label.active[b-gbxnrfrr6v] { background: var(--ink); color: #fff; }
    .mv-kind label[b-gbxnrfrr6v] { position: relative; overflow: hidden; }
    .mv-kind input[b-gbxnrfrr6v] { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
    .mv-kind label:focus-within[b-gbxnrfrr6v] { outline: 3px solid #cfe2ff; }

.mv-add-actions[b-gbxnrfrr6v] { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .75rem; margin-top: 1rem; }
.mv-hint[b-gbxnrfrr6v] { margin-right: auto; color: var(--muted); }

/* ---------- Buttons ---------- */
.btn-sketch[b-gbxnrfrr6v] { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-height: 40px; padding: .3rem .9rem;
              border: 2px solid var(--ink); border-radius: 12px 4px 12px 4px; background: #fff; color: var(--ink);
              box-shadow: 2px 2px 0 var(--ink); font: inherit; font-weight: bold; cursor: pointer; white-space: nowrap; text-decoration: none; }
    .btn-sketch.primary[b-gbxnrfrr6v] { background: var(--ink); color: #fff; }
    .btn-sketch.big[b-gbxnrfrr6v] { min-height: 48px; padding: .4rem 1.3rem; font-size: 1.05rem; }
    .btn-sketch:disabled[b-gbxnrfrr6v] { opacity: .45; cursor: not-allowed; box-shadow: none; }
    .btn-sketch:focus-visible[b-gbxnrfrr6v], .icon-btn:focus-visible[b-gbxnrfrr6v], .chip:focus-visible[b-gbxnrfrr6v] { outline: 3px solid var(--accent); outline-offset: 2px; }
.icon-btn[b-gbxnrfrr6v] { width: 40px; height: 40px; border: none; border-radius: 50%; background: transparent; cursor: pointer; font-size: 1.05rem; }
    .icon-btn:hover[b-gbxnrfrr6v] { background: #fdecec; color: var(--bad); }

/* ---------- The list ---------- */
.mv-list-head[b-gbxnrfrr6v] { display: flex; align-items: baseline; justify-content: space-between; }
    .mv-list-head small[b-gbxnrfrr6v] { color: var(--muted); }
.mv-empty[b-gbxnrfrr6v] { margin: 0; color: var(--muted); }
.mv-show + .mv-show[b-gbxnrfrr6v] { margin-top: 1rem; }
.mv-show h3[b-gbxnrfrr6v] { display: flex; align-items: center; gap: .6rem; margin: 0 0 .4rem; font-size: 1.05rem; }
.mv-items[b-gbxnrfrr6v] { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.mv-item[b-gbxnrfrr6v] { display: grid; grid-template-columns: 1fr auto; gap: .5rem; align-items: center; padding: .6rem .75rem; border: 2px solid #e2e2e2; border-radius: 10px; }
    .mv-item.open[b-gbxnrfrr6v] { border-color: var(--ink); }
.mv-item-main[b-gbxnrfrr6v] { display: grid; gap: .2rem; min-width: 0; }
    .mv-item-main small[b-gbxnrfrr6v] { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; color: var(--muted); }
.mv-file-meta[b-gbxnrfrr6v] { word-break: break-all; }
.mv-item-actions[b-gbxnrfrr6v] { display: flex; align-items: center; gap: .3rem; }

.chip[b-gbxnrfrr6v] { display: inline-flex; align-items: center; gap: .25rem; padding: .05rem .5rem; border-radius: 999px; background: #eee; color: #444; font-size: .78rem; border: none; font-family: inherit; }
    .chip.ok[b-gbxnrfrr6v] { background: #e9f7ef; color: var(--ok); }
    .chip.warn[b-gbxnrfrr6v] { background: #fff3cd; color: #7a4a0c; }
    .chip.bad[b-gbxnrfrr6v] { background: #fdecec; color: var(--bad); }
    button.chip[b-gbxnrfrr6v] { padding: .2rem .6rem; border: 2px solid var(--ink); background: #fff; color: var(--ink); cursor: pointer; font-size: .85rem; }

.mv-mismatch[b-gbxnrfrr6v], .mv-player[b-gbxnrfrr6v] { grid-column: 1 / -1; }
.mv-mismatch[b-gbxnrfrr6v] { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .6rem; border-radius: 8px; background: #fff3cd; }
    .mv-mismatch p[b-gbxnrfrr6v] { margin: 0; flex-basis: 100%; color: #7a4a0c; font-size: .9rem; }


.mv-help summary[b-gbxnrfrr6v] { cursor: pointer; font-weight: bold; }
.mv-help p[b-gbxnrfrr6v] { margin: .6rem 0 0; color: #444; font-size: .92rem; }

@media (max-width: 600px) {
    .mv-step-head[b-gbxnrfrr6v] { flex-wrap: wrap; }
    .mv-file[b-gbxnrfrr6v], .mv-form[b-gbxnrfrr6v] { margin-left: 0; }
    .mv-form[b-gbxnrfrr6v] { grid-template-columns: 1fr 1fr; }
    .mv-item[b-gbxnrfrr6v] { grid-template-columns: 1fr; }
    .mv-item-actions[b-gbxnrfrr6v] { justify-content: flex-end; }
}

/* ---------- Search ---------- */
.mv-search[b-gbxnrfrr6v] { display: grid; gap: .6rem; }
.mv-search-box[b-gbxnrfrr6v] { display: flex; align-items: center; gap: .5rem; padding: .3rem .3rem .3rem .8rem; border: 2px solid var(--ink); border-radius: 999px; background: #fff; }
    .mv-search-box input[b-gbxnrfrr6v] { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 1.05rem; background: transparent; }
    .mv-search-box .btn-sketch[b-gbxnrfrr6v] { border-radius: 999px; }
.mv-scope[b-gbxnrfrr6v] { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .9rem; }
    .mv-scope > span[b-gbxnrfrr6v] { color: var(--muted); margin-right: .2rem; }
    .mv-scope label[b-gbxnrfrr6v] { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .7rem; border: 2px solid #c9c9c9; border-radius: 999px; cursor: pointer; }
    .mv-scope label.active[b-gbxnrfrr6v] { border-color: var(--ink); background: var(--ink); color: #fff; }
    .mv-scope label[b-gbxnrfrr6v] { position: relative; overflow: hidden; }
    .mv-scope input[b-gbxnrfrr6v] { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
    .mv-scope label:focus-within[b-gbxnrfrr6v] { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Plan usage ---------- */
.mv-usage[b-gbxnrfrr6v] { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 0 0 1rem; padding: .6rem .9rem; border: 2px dashed #c9c9c9; border-radius: 12px; }
    .mv-usage.blocked[b-gbxnrfrr6v] { border-color: #e0b0b5; background: #fdf6f6; }
.mv-usage-text[b-gbxnrfrr6v] { display: grid; }
    .mv-usage-text small[b-gbxnrfrr6v] { color: var(--muted); font-size: .82rem; }
.mv-meter[b-gbxnrfrr6v] { flex: 1; min-width: 120px; height: 10px; border-radius: 999px; background: #eee; overflow: hidden; }
    .mv-meter span[b-gbxnrfrr6v] { display: block; height: 100%; background: var(--accent); }
    .mv-usage.blocked .mv-meter span[b-gbxnrfrr6v] { background: var(--bad); }
.mv-locked p[b-gbxnrfrr6v] { margin: 0 0 .75rem; color: var(--muted); }

/* ---------- Timing chip ---------- */
.chip.timing[b-gbxnrfrr6v] { background: #e8f0ff; color: #0a4fb4; }
.chip-x[b-gbxnrfrr6v] { margin-left: .15rem; padding: 0 .35rem; border: 0; border-radius: 999px; background: #fff; color: #0a4fb4; font: inherit; font-size: .75rem; cursor: pointer; }
    .chip-x:hover[b-gbxnrfrr6v] { text-decoration: underline; }

/* ---------- Languages ---------- */
.mv-second[b-gbxnrfrr6v] { margin: .6rem 0 0 2.6rem; }
.mv-second-row[b-gbxnrfrr6v] { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .9rem; }
.mv-add-second[b-gbxnrfrr6v] { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .35rem; padding: .35rem .7rem; border: 2px dashed #c9c9c9; border-radius: 10px; background: #fff; color: var(--ink); font: inherit; font-size: .9rem; cursor: pointer; text-align: left; }
    .mv-add-second:hover[b-gbxnrfrr6v] { border-color: var(--accent); color: var(--accent); }
    .mv-add-second small[b-gbxnrfrr6v] { color: var(--muted); }
.mv-inline-select[b-gbxnrfrr6v] { display: inline-flex; align-items: center; gap: .35rem; }
.mv-lang-grid[b-gbxnrfrr6v] { display: grid; grid-template-columns: 1fr; gap: .75rem; margin-top: .6rem; }
    .mv-lang-grid label[b-gbxnrfrr6v] { display: grid; gap: .3rem; font-size: .9rem; }
    .mv-lang-grid label > span[b-gbxnrfrr6v] { font-weight: bold; }
    .mv-lang-grid small[b-gbxnrfrr6v] { font-weight: normal; color: var(--muted); }
.mv select[b-gbxnrfrr6v] { min-height: 38px; padding: .2rem .5rem; border: 2px solid var(--ink); border-radius: 8px; background: #fff; font: inherit; }
.mv-guess[b-gbxnrfrr6v] { color: var(--accent) !important; }
.mv-lang-explain[b-gbxnrfrr6v] { margin-top: .6rem; padding: .55rem .75rem; border-radius: 10px; background: #eef4ff; color: #0a4fb4; font-size: .88rem; }
.mv-lang-edit[b-gbxnrfrr6v] { display: grid; gap: .6rem; margin-top: .75rem; padding: .75rem; border: 2px solid #c9d8f5; border-radius: 12px; background: #fafcff; }
.mv-lang-actions[b-gbxnrfrr6v] { display: flex; flex-wrap: wrap; gap: .5rem; }
.mv-pending[b-gbxnrfrr6v] { padding: .5rem; border-radius: 8px; background: #fff8e1; }
.chip.lang[b-gbxnrfrr6v] { background: #f1f1f1; }
@media (min-width: 640px) { .mv-lang-grid[b-gbxnrfrr6v] { grid-template-columns: 1fr 1fr; } }

/* ---------- Narrow screens ---------- */
.mv-item > *[b-gbxnrfrr6v] { min-width: 0; }
.mv-lang-edit[b-gbxnrfrr6v], .mv-mismatch[b-gbxnrfrr6v] { grid-column: 1 / -1; }
.mv-item-actions[b-gbxnrfrr6v] { flex-wrap: wrap; }
.mv-search[b-gbxnrfrr6v] { min-width: 0; grid-template-columns: minmax(0, 1fr); }
    .mv-search-box input[b-gbxnrfrr6v] { width: auto; }
    .mv-search-box .btn-sketch[b-gbxnrfrr6v] { flex-shrink: 0; }

/* Subtitles found online */
.mv-find[b-gbxnrfrr6v] { display: grid; gap: .5rem; margin: .6rem 0 0 2.6rem; font-size: .9rem; }
.mv-find-head[b-gbxnrfrr6v] { display: flex; gap: .45rem; align-items: flex-start; margin: 0; }
    .mv-find-head.ok[b-gbxnrfrr6v] { color: var(--ok); font-weight: 600; }
    .mv-find-head small[b-gbxnrfrr6v] { display: block; font-weight: normal; color: var(--muted); }
.mv-find > .btn-sketch[b-gbxnrfrr6v] { justify-self: start; }
.mv-find-list[b-gbxnrfrr6v] { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
    .mv-find-list li[b-gbxnrfrr6v] { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .4rem .6rem; border: 1px dashed var(--muted); border-radius: 8px; }
.mv-find-name[b-gbxnrfrr6v] { word-break: break-all; }
    .mv-find-name small[b-gbxnrfrr6v] { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; color: var(--muted); margin-top: .15rem; }
.mv-find .mv-warn small[b-gbxnrfrr6v] { display: block; margin-top: .3rem; }
.mv-link[b-gbxnrfrr6v] { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; cursor: pointer; font: inherit; }
@media (max-width: 640px) { .mv-find[b-gbxnrfrr6v] { margin-left: 0; } }
.mv-find-translation[b-gbxnrfrr6v] { margin-left: 0; margin-top: .7rem; }
.mv-find-actions[b-gbxnrfrr6v] { display: flex; flex-wrap: wrap; gap: .4rem; }
.mv-find-list li.in-use[b-gbxnrfrr6v] { border-style: solid; border-color: var(--ok); }
.mv-ai-offer[b-gbxnrfrr6v] { display: grid; gap: .25rem; justify-items: start; }
    .mv-ai-offer small[b-gbxnrfrr6v] { color: var(--muted); }

/* ---------- Subtitle step: one card for what's chosen, one list to change it ---------- */
.mv-step-body[b-gbxnrfrr6v] { display: grid; gap: .6rem; margin: .7rem 0 0 2.6rem; font-size: .92rem; }
.mv-quiet[b-gbxnrfrr6v] { margin: 0; color: var(--muted); }
.btn-sketch.small[b-gbxnrfrr6v] { min-height: 34px; padding: .2rem .75rem; font-size: .88rem; box-shadow: 2px 2px 0 var(--ink); }
.mv-banner[b-gbxnrfrr6v] { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .5rem .7rem; border-radius: 10px; background: #eef4ff; color: #1e3a8a; }
    .mv-banner span[b-gbxnrfrr6v] { flex: 1; min-width: 12rem; }

.mv-sub[b-gbxnrfrr6v] { display: grid; gap: .55rem; padding: .75rem .85rem; border: 2px solid var(--ink); border-radius: 12px 4px 12px 4px; background: #fff; }
.mv-sub-main[b-gbxnrfrr6v] { display: flex; gap: .7rem; align-items: flex-start; }
.mv-sub-icon[b-gbxnrfrr6v] { flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: #f1f1f1; font-size: 1.2rem; }
.mv-sub-text[b-gbxnrfrr6v] { display: grid; gap: .2rem; min-width: 0; }
.mv-sub-name[b-gbxnrfrr6v] { word-break: break-word; line-height: 1.3; }
.mv-sub-meta[b-gbxnrfrr6v] { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; color: var(--muted); font-size: .82rem; }
.mv-sub-note[b-gbxnrfrr6v] { margin: 0; display: flex; gap: .4rem; align-items: center; color: var(--muted); }
    .mv-sub-note.ok[b-gbxnrfrr6v] { color: var(--ok); }
.mv-sub-actions[b-gbxnrfrr6v] { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.mv-sub-hint[b-gbxnrfrr6v] { color: var(--muted); font-size: .82rem; line-height: 1.4; }

.tag[b-gbxnrfrr6v] { display: inline-flex; align-items: center; gap: .2rem; padding: .05rem .5rem; border-radius: 999px; background: #f1f1f1; color: var(--ink); font-size: .78rem; font-weight: 600; white-space: nowrap; }
    .tag.ok[b-gbxnrfrr6v] { background: #e3f4ea; color: var(--ok); }
    .tag.warn[b-gbxnrfrr6v] { background: #fff3cd; color: #7a4a0c; }
    .tag.bad[b-gbxnrfrr6v] { background: #fdecec; color: var(--bad); }

.mv-picker[b-gbxnrfrr6v] { display: grid; gap: .6rem; padding: .75rem .85rem; border-radius: 12px; background: #f6f6f4; }
.mv-more[b-gbxnrfrr6v] { justify-self: start; font-size: .88rem; }
.mv-picker-head[b-gbxnrfrr6v] { display: flex; gap: .5rem; align-items: flex-start; margin: 0; }
    .mv-picker-head small[b-gbxnrfrr6v] { display: block; color: var(--muted); }
    .mv-picker-head .ok[b-gbxnrfrr6v] { color: var(--ok); }
.mv-options[b-gbxnrfrr6v] { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
    .mv-options li[b-gbxnrfrr6v] { display: flex; align-items: center; justify-content: space-between; gap: .7rem; padding: .5rem .65rem; border: 1.5px solid #d6d6d6; border-radius: 10px; background: #fff; }
    .mv-options li.in-use[b-gbxnrfrr6v] { border-color: var(--ok); background: #f6fcf8; }
    .mv-options li.dim[b-gbxnrfrr6v] { opacity: .6; }
.mv-option-text[b-gbxnrfrr6v] { display: grid; gap: .2rem; min-width: 0; }
.mv-option-name[b-gbxnrfrr6v] { word-break: break-word; font-weight: 600; }

.mv-select-row[b-gbxnrfrr6v] { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
    .mv-select-row > span[b-gbxnrfrr6v] { font-weight: bold; color: var(--muted); font-size: .85rem; }
.mv-form select[b-gbxnrfrr6v], .mv-select-row select[b-gbxnrfrr6v] { min-height: 40px; padding: .35rem .6rem; border: 2px solid var(--ink); border-radius: 8px; font: inherit; background: #fff; }
.mv-form select[b-gbxnrfrr6v] { width: 100%; }

@media (max-width: 640px) {
    .mv-step-body[b-gbxnrfrr6v] { margin-left: 0; }
    .mv-options li[b-gbxnrfrr6v] { flex-direction: column; align-items: stretch; }
    .mv-options li > .btn-sketch[b-gbxnrfrr6v], .mv-options li > .tag[b-gbxnrfrr6v] { align-self: flex-start; }
}

.mv-banner.ok[b-gbxnrfrr6v] { background: #e9f7ef; color: var(--ok); }
.mv-guess.ai[b-gbxnrfrr6v] { color: var(--ok); }
/* /Pages/PaymentResult.razor.rz.scp.css */
.pay-result[b-fgtz17vot9] { max-width: 560px; margin: 1rem auto; }

.plan-card[b-fgtz17vot9] {
    border: 2px solid #2b2b2b;
    border-radius: 14px 6px 14px 6px;
    background: #fff;
    box-shadow: 3px 3px 0 #2b2b2b;
    padding: 1.2rem 1.4rem;
}

h1[b-fgtz17vot9] { font-size: 1.6rem; margin: 0 0 .5rem; display: flex; align-items: center; gap: .5rem; }
.result-paid h1 .bi[b-fgtz17vot9] { color: #198754; }
.result-paid_not_applied h1 .bi[b-fgtz17vot9] { color: #f0ad00; }
.result-failed h1 .bi[b-fgtz17vot9], .result-cancelled h1 .bi[b-fgtz17vot9] { color: #b02a37; }
.result-lead[b-fgtz17vot9] { font-size: 1.05rem; }

.result-facts[b-fgtz17vot9] { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; margin: 1rem 0; padding: .8rem 0; border-top: 1px dashed #d7d7d7; border-bottom: 1px dashed #d7d7d7; }
.result-facts dt[b-fgtz17vot9] { color: #6b6b6b; font-weight: normal; }
.result-facts dd[b-fgtz17vot9] { margin: 0; font-weight: bold; font-variant-numeric: tabular-nums; }
.result-facts .ref[b-fgtz17vot9] { font-family: ui-monospace, Consolas, monospace; letter-spacing: .03em; }

.result-actions[b-fgtz17vot9] { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 0; }

.btn-sketch[b-fgtz17vot9] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border: 2px solid #2b2b2b;
    border-radius: 10px 4px 10px 4px;
    background: #ffd84d;
    box-shadow: 2px 2px 0 #2b2b2b;
    padding: .4rem .9rem;
    font-weight: bold;
    color: #2b2b2b;
    text-decoration: none;
}

.spinner[b-fgtz17vot9] {
    width: 22px;
    height: 22px;
    border: 3px solid rgba(0, 0, 0, .15);
    border-top-color: #2b2b2b;
    border-radius: 50%;
    animation: pr-spin-b-fgtz17vot9 .8s linear infinite;
    flex: 0 0 auto;
}

@keyframes pr-spin-b-fgtz17vot9 { to { transform: rotate(360deg); } }
/* /Pages/phrase/PhraseScenePlayer.razor.rz.scp.css */
.psp[b-xj04x3abjb] { display: grid; gap: .45rem; }
.psp-video[b-xj04x3abjb] { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border: 2px solid #2b2b2b; border-radius: 12px 5px 12px 5px; background: #111; }
.psp-video video[b-xj04x3abjb] { display: block; width: 100%; height: 100%; object-fit: contain; background: #111; }
.psp-play[b-xj04x3abjb] { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 58px; height: 58px; border: 2px solid #fff; border-radius: 50%; background: #7c3aed; color: #fff; font-size: 2rem; cursor: pointer; box-shadow: 0 3px 12px rgba(0,0,0,.35); }
.psp-loading[b-xj04x3abjb] { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .7rem; border-radius: 999px; background: rgba(0,0,0,.75); color: #fff; }
.psp-tools[b-xj04x3abjb] { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.psp-tools button[b-xj04x3abjb] { min-height: 36px; padding: .2rem .65rem; border: 1.5px solid #a78bfa; border-radius: 999px; background: #fff; color: #6d28d9; font: inherit; font-weight: bold; cursor: pointer; }
.psp-tools small[b-xj04x3abjb] { margin-left: auto; color: #6b6b6b; }
.psp blockquote[b-xj04x3abjb] { margin: 0; padding: .6rem .7rem; border-left: 4px solid #a78bfa; background: #f5f3ff; line-height: 1.5; }
.psp mark[b-xj04x3abjb] { padding: 0 .12rem; border-radius: 3px; background: #ddd6fe; color: #4c1d95; font-weight: bold; }
.psp-message[b-xj04x3abjb] { margin: 0; color: #a61e4d; font-size: .9rem; }
/* /Pages/phrase/PhrasesList.razor.rz.scp.css */
/* Phrases page — mobile first: the base styles are the phone layout; wider screens add columns.
   Same hand-drawn look as the Browse and Listen pages. */

.phrases[b-dcmvvho6gx] {
    --ink: #2b2b2b;
    --muted: #6b6b6b;
    --paper: #fff;
    --accent: #0d6efd;
    --accent-soft: #e8f0ff;
    --gold: #e0a800;

    font-family: 'Comic Neue', Vazirmatn, 'Comic Sans MS', sans-serif;
    color: var(--ink);
    max-width: 1100px;
    margin: 0 auto;
    padding: 1rem .75rem 3rem;
}

.back-link[b-dcmvvho6gx] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 44px;
    color: var(--ink);
    text-decoration: none;
    font-weight: bold;
}

    .back-link:hover[b-dcmvvho6gx] { color: var(--accent); }

/* ---------- Header ---------- */
.page-head[b-dcmvvho6gx] {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-bottom: 1rem;
}

    .page-head h1[b-dcmvvho6gx] {
        font-size: 1.7rem;
        margin: 0;
    }

.episode-line[b-dcmvvho6gx] {
    margin: .2rem 0 0;
    color: var(--muted);
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    align-items: baseline;
}

    .episode-line strong[b-dcmvvho6gx] { color: var(--ink); }

.code[b-dcmvvho6gx] {
    border: 2px dashed var(--ink);
    border-radius: 8px;
    padding: 0 .4rem;
    font-weight: bold;
    color: var(--ink);
}

/* ---------- Buttons ---------- */
.btn-sketch[b-dcmvvho6gx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 44px;
    padding: .45rem 1rem;
    font: inherit;
    font-weight: bold;
    color: var(--ink);
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 10px 4px 10px 4px;
    box-shadow: 2px 2px 0 var(--ink);
    text-decoration: none;
    cursor: pointer;
}

    .btn-sketch:hover[b-dcmvvho6gx] { background: var(--accent-soft); }

    .btn-sketch.primary[b-dcmvvho6gx] {
        background: var(--ink);
        color: #fff;
    }

        .btn-sketch.primary:hover[b-dcmvvho6gx] { background: var(--accent); border-color: var(--accent); }

.icon-btn[b-dcmvvho6gx] {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid transparent;
    border-radius: 50%;
    background: transparent;
    color: var(--ink);
    font-size: 1.25rem;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

    .icon-btn:hover[b-dcmvvho6gx] { background: var(--accent-soft); }
    .icon-btn:disabled[b-dcmvvho6gx] { opacity: .5; cursor: wait; }

    .icon-btn.bookmark.saved[b-dcmvvho6gx] { color: var(--gold); }

.btn-sketch:focus-visible[b-dcmvvho6gx], .icon-btn:focus-visible[b-dcmvvho6gx], .chip:focus-visible[b-dcmvvho6gx],
.segmented button:focus-visible[b-dcmvvho6gx], .reveal:focus-visible[b-dcmvvho6gx], .watch-toggle:focus-visible[b-dcmvvho6gx] {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

/* ---------- Login prompt ---------- */
.login-prompt[b-dcmvvho6gx] {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .5rem .5rem 1rem;
    margin-bottom: 1rem;
    border: 2px solid var(--gold);
    border-radius: 12px;
    background: #fff8e1;
}

    .login-prompt > i[b-dcmvvho6gx] { color: var(--gold); font-size: 1.2rem; }
    .login-prompt span[b-dcmvvho6gx] { flex: 1; }
    .login-prompt a[b-dcmvvho6gx] { font-weight: bold; }

/* ---------- Toolbar ---------- */
.toolbar[b-dcmvvho6gx] {
    display: grid;
    gap: .75rem;
    margin-bottom: 1rem;
}

.search-box[b-dcmvvho6gx] {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 44px;
    padding: 0 .9rem;
    border: 2px solid var(--ink);
    border-radius: 12px 4px 12px 4px;
    background: var(--paper);
}

    .search-box input[b-dcmvvho6gx] {
        flex: 1;
        min-width: 0;
        border: none;
        outline: none;
        background: transparent;
        font: inherit;
        font-size: 1rem; /* 16px stops iOS from zooming in on focus */
    }

    .search-box:focus-within[b-dcmvvho6gx] { box-shadow: 0 0 0 3px var(--accent-soft); }

.toolbar-row[b-dcmvvho6gx] {
    display: grid;
    gap: .75rem;
}

/* Study mode: equal-width segments that fit a phone screen. */
.segmented[b-dcmvvho6gx] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 2px solid var(--ink);
    border-radius: 12px;
    overflow: hidden;
    background: var(--paper);
}

    .segmented button[b-dcmvvho6gx] {
        min-height: 44px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .1rem;
        padding: .3rem .25rem;
        border: none;
        border-left: 2px solid var(--ink);
        background: transparent;
        font: inherit;
        font-size: .8rem;
        line-height: 1.1;
        color: var(--ink);
        cursor: pointer;
    }

        .segmented button:first-child[b-dcmvvho6gx] { border-left: none; }
        .segmented button i[b-dcmvvho6gx] { font-size: 1.05rem; }
        .segmented button.active[b-dcmvvho6gx] { background: var(--ink); color: #fff; }

.chips[b-dcmvvho6gx] {
    display: flex;
    gap: .5rem;
}

.chip[b-dcmvvho6gx] {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: 0 .9rem;
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: var(--paper);
    font: inherit;
    color: var(--ink);
    cursor: pointer;
}

    .chip span[b-dcmvvho6gx] {
        font-size: .75rem;
        padding: 0 .4rem;
        border-radius: 999px;
        background: rgba(0, 0, 0, .08);
    }

    .chip.active[b-dcmvvho6gx] { background: var(--ink); color: #fff; }
    .chip.active span[b-dcmvvho6gx] { background: rgba(255, 255, 255, .2); }
    .chip .bi-bookmark-fill[b-dcmvvho6gx] { color: var(--gold); }

.mode-hint[b-dcmvvho6gx] {
    margin: 0;
    font-size: .9rem;
    color: var(--muted);
}

    .mode-hint i[b-dcmvvho6gx] { color: var(--gold); }

/* ---------- Cards ---------- */
.phrase-grid[b-dcmvvho6gx] {
    display: grid;
    grid-template-columns: 1fr;
    gap: .9rem;
}

.phrase-card[b-dcmvvho6gx] {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    min-width: 0;
    padding: 1rem;
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 16px 6px 18px 8px;
    box-shadow: 2px 2px 0 var(--ink);
}

    /* The scene needs the full width, so it spans every column. */
    .phrase-card.watching[b-dcmvvho6gx] { grid-column: 1 / -1; }

.card-head[b-dcmvvho6gx] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem;
}

.term[b-dcmvvho6gx] {
    margin: .35rem 0 0;
    font-size: 1.35rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.masked[b-dcmvvho6gx] {
    letter-spacing: .2em;
    color: var(--muted);
}

.card-tools[b-dcmvvho6gx] {
    display: flex;
    margin: -.35rem -.5rem 0 0;
}

.translation[b-dcmvvho6gx] {
    margin: 0;
    font-family: Vazirmatn, Tahoma, 'Segoe UI', sans-serif;
    font-size: 1.05rem;
    color: var(--accent);
}

.meaning[b-dcmvvho6gx] {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
}

.context[b-dcmvvho6gx] {
    margin: 0;
    padding: .5rem .75rem;
    border-left: 4px solid var(--accent-soft);
    background: #fafafa;
    border-radius: 0 8px 8px 0;
    font-style: italic;
    color: #444;
    overflow-wrap: anywhere;
}

    .context mark[b-dcmvvho6gx] {
        background: #fff3b0;
        padding: 0 .1em;
        border-radius: 3px;
        font-style: normal;
        font-weight: bold;
    }

    .context .blank[b-dcmvvho6gx] {
        font-style: normal;
        letter-spacing: .1em;
        color: var(--muted);
    }

.structure[b-dcmvvho6gx] {
    margin: 0;
    font-size: .9rem;
    color: var(--muted);
}

    .structure i[b-dcmvvho6gx] { color: var(--gold); }

.reveal[b-dcmvvho6gx] {
    align-self: flex-start;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: 0 1rem;
    border: 2px dashed var(--ink);
    border-radius: 10px;
    background: transparent;
    font: inherit;
    color: var(--ink);
    cursor: pointer;
}

    .reveal:hover[b-dcmvvho6gx] { background: var(--accent-soft); border-style: solid; }

.card-foot[b-dcmvvho6gx] {
    margin-top: auto;
    padding-top: .4rem;
    border-top: 2px dashed #e1e1e1;
}

.watch-toggle[b-dcmvvho6gx] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: 0;
    border: none;
    background: transparent;
    font: inherit;
    font-weight: bold;
    color: var(--accent);
    cursor: pointer;
}

    .watch-toggle:disabled[b-dcmvvho6gx] { color: var(--muted); cursor: not-allowed; }

.scene[b-dcmvvho6gx] { margin-top: .25rem; scroll-margin-top: 5rem; }

/* Keep the player inside the card on phones, with only a hairline of the card visible at each side. */
@media (max-width: 819.98px) {
    .phrase-card.watching .scene[b-dcmvvho6gx] {
        margin-right: calc(-1rem + 4px);
        margin-left: calc(-1rem + 4px);
    }
}

/* ---------- States ---------- */
.state-box[b-dcmvvho6gx] {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--muted);
}

    .state-box.small[b-dcmvvho6gx] { padding: 1.5rem 1rem; }

    .state-box > i[b-dcmvvho6gx] {
        display: block;
        font-size: 2.25rem;
        margin-bottom: .5rem;
        color: var(--ink);
    }

.skeleton-card[b-dcmvvho6gx] {
    box-shadow: none;
    border-color: #e3e3e3;
}

.skeleton[b-dcmvvho6gx] {
    height: 14px;
    border-radius: 6px;
    background: linear-gradient(90deg, #eee 25%, #f6f6f6 50%, #eee 75%);
    background-size: 200% 100%;
    animation: shimmer-b-dcmvvho6gx 1.2s infinite;
}

    .skeleton.short[b-dcmvvho6gx] { width: 40%; height: 20px; }

@keyframes shimmer-b-dcmvvho6gx {
    to { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .skeleton[b-dcmvvho6gx] { animation: none; }
    .icon-btn[b-dcmvvho6gx] { transition: none; }
}

/* ---------- Larger phones / small tablets ---------- */
@media (min-width: 576px) {
    .phrases[b-dcmvvho6gx] { padding: 1.5rem 1rem 3rem; }

    .page-head[b-dcmvvho6gx] {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }

        .page-head h1[b-dcmvvho6gx] { font-size: 2rem; }

    .segmented button[b-dcmvvho6gx] {
        flex-direction: row;
        gap: .4rem;
        font-size: .9rem;
    }
}

/* ---------- Tablets and up: two columns of cards ---------- */
@media (min-width: 768px) {
    .toolbar-row[b-dcmvvho6gx] {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

    .phrase-grid[b-dcmvvho6gx] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Study path: finish this step ---------- */
.finish-step[b-dcmvvho6gx] {
    margin-top: 1.5rem;
    padding: 1rem;
    border: 2px dashed var(--ink);
    border-radius: 16px;
    background: #fffdf3;
    text-align: center;
}

    .finish-step p[b-dcmvvho6gx] { margin: 0 0 .75rem; }
    .finish-step .bi-check-circle-fill[b-dcmvvho6gx] { color: #198754; }

/* ---------- What saving did ---------- */
.save-note[b-dcmvvho6gx] {
    margin: .25rem 0 .75rem;
    padding: .5rem .75rem;
    border-radius: 8px;
    background: rgba(25, 135, 84, .08);
    color: #146c43;
    font-size: .92rem;
}
    .save-note.warn[b-dcmvvho6gx] { background: rgba(255, 193, 7, .14); color: #7a5600; }
    .save-note a[b-dcmvvho6gx] { margin-left: .35rem; font-weight: 600; }

/* Collocations (marked by the teacher in the lesson studio). */
.phrase-card.collocation[b-dcmvvho6gx] { border-left: 6px solid #0c8599; }
.kind-tag[b-dcmvvho6gx] {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-bottom: -.2rem;
    padding: 0 .5rem;
    border-radius: 999px;
    background: #e3f6f8;
    color: #0c8599;
    font-size: .75rem;
    font-weight: bold;
}
.chip.colloc .bi[b-dcmvvho6gx] { color: #0c8599; }
.chip.colloc.active .bi[b-dcmvvho6gx] { color: #fff; }

/* Match the calm, compact saved-words design while keeping the phrase study tools. */
.phrases[b-dcmvvho6gx] {
    --ink: #25364a;
    --muted: #697787;
    --accent: #315d94;
    --accent-soft: #eaf1fb;
    --gold: #c28a18;
    max-width: 1180px;
    padding: 1.2rem .8rem 3rem;
}
.back-link[b-dcmvvho6gx] { color: var(--muted); font-size: .92rem; }
.page-head[b-dcmvvho6gx] { align-items: center; margin: .3rem 0 1.25rem; }
.page-head h1[b-dcmvvho6gx] { margin: .12rem 0 .25rem; font-size: clamp(1.8rem, 3vw, 2.35rem); letter-spacing: -.025em; }
.page-eyebrow[b-dcmvvho6gx] { margin: 0; color: var(--accent); font-size: .78rem; font-weight: 700; letter-spacing: .055em; text-transform: uppercase; }
.episode-line[b-dcmvvho6gx] { margin-top: 0; }
.code[b-dcmvvho6gx] { padding: .05rem .4rem; border: 1px solid #c4d1e0; border-radius: 7px; background: #f5f8fc; }
.btn-sketch[b-dcmvvho6gx] { border: 1px solid #cbd5e1; border-radius: 11px; box-shadow: none; transition: background .15s, box-shadow .15s; }
.btn-sketch:hover[b-dcmvvho6gx] { background: var(--accent-soft); box-shadow: 0 3px 10px #25364a12; }
.btn-sketch.primary[b-dcmvvho6gx] { border-color: var(--accent); background: var(--accent); }
.btn-sketch.primary:hover[b-dcmvvho6gx] { border-color: #244977; background: #244977; }
.icon-btn[b-dcmvvho6gx] { display: inline-grid; place-items: center; border: 0; border-radius: 10px; color: var(--muted); font-size: 1.1rem; }
.icon-btn:hover[b-dcmvvho6gx] { color: var(--accent); background: #ffffffb3; }
.icon-btn svg[b-dcmvvho6gx] { width: 20px; height: 20px; }
.login-prompt[b-dcmvvho6gx] { border: 1px solid #ead9a9; background: #fffbeb; }
.toolbar[b-dcmvvho6gx] { gap: .7rem; padding: .9rem; border: 1px solid #e3e8ef; border-radius: 15px; background: #fff; }
.search-box[b-dcmvvho6gx] { border: 1px solid #dce3ec; border-radius: 10px; background: #f8fafc; color: var(--muted); }
.search-box:focus-within[b-dcmvvho6gx] { border-color: var(--accent); box-shadow: 0 0 0 3px #315d9414; }
.segmented[b-dcmvvho6gx] { padding: .25rem; gap: .2rem; border: 1px solid #e1e6ed; border-radius: 12px; background: #f1f4f8; }
.segmented button[b-dcmvvho6gx] { border: 0; border-radius: 8px; color: var(--muted); }
.segmented button:first-child[b-dcmvvho6gx] { border: 0; }
.segmented button.active[b-dcmvvho6gx] { color: var(--accent); background: #fff; box-shadow: 0 2px 6px #25364a12; }
.chips[b-dcmvvho6gx] { flex-wrap: wrap; }
.chip[b-dcmvvho6gx] { min-height: 38px; padding-inline: .8rem; border: 1px solid #d8e0e9; background: #f8fafc; color: #536477; }
.chip:hover:not(.active)[b-dcmvvho6gx] { border-color: #9bb6d7; background: #eef4fc; }
.chip.active[b-dcmvvho6gx] { border-color: var(--accent); background: var(--accent); }
.mode-hint[b-dcmvvho6gx] { padding: .15rem .25rem; }
.result-line[b-dcmvvho6gx] { margin: 0; color: var(--muted); font-size: .83rem; }
.save-note[b-dcmvvho6gx] { border: 1px solid #cfe6dd; border-radius: 10px; background: #f1faf6; }
.phrase-grid[b-dcmvvho6gx] { gap: 1rem; align-items: stretch; }
.phrase-card[b-dcmvvho6gx] { gap: .65rem; padding: 1rem; border: 1px solid #dce3ec; border-radius: 16px 16px 16px 5px; box-shadow: 0 3px 12px #25364a08; transition: transform .19s cubic-bezier(.2,.75,.25,1), box-shadow .2s, border-color .2s; }
.phrase-card:hover[b-dcmvvho6gx] { border-color: #b8c9de; box-shadow: 0 7px 22px #25364a10; }
.phrase-card.collocation[b-dcmvvho6gx] { border-left: 5px solid #0c8599; }
.kind-tag[b-dcmvvho6gx] { margin-bottom: 0; padding: .1rem .55rem; }
.term[b-dcmvvho6gx] { margin: 0; font-size: 1.35rem; letter-spacing: -.015em; }
.card-tools[b-dcmvvho6gx] { margin: -.35rem -.35rem 0 0; }
.translation[b-dcmvvho6gx] { color: var(--accent); font-size: 1rem; }
.meaning[b-dcmvvho6gx] { font-size: .97rem; }
.context[b-dcmvvho6gx] { padding: .55rem .75rem; border-left: 3px solid #b5c9e3; border-radius: 0 8px 8px 0; background: #f8fafc; color: #596b7f; font-size: .91rem; }
.context mark[b-dcmvvho6gx] { background: #e5eef9; color: var(--ink); }
.structure i[b-dcmvvho6gx] { color: var(--accent); }
.reveal[b-dcmvvho6gx] { border: 1px solid #b9c8da; border-radius: 9px; color: var(--accent); font-weight: 700; }
.reveal:hover[b-dcmvvho6gx] { border-style: solid; }
.card-foot[b-dcmvvho6gx] { padding-top: .65rem; border-top: 1px solid #25364a12; }
.watch-toggle[b-dcmvvho6gx] { min-height: 42px; padding: .35rem .65rem; border-radius: 8px; background: #f8fafc; }
.watch-toggle:hover:not(:disabled)[b-dcmvvho6gx] { background: var(--accent-soft); }
.watch-toggle svg[b-dcmvvho6gx] { width: 20px; height: 20px; flex: 0 0 auto; }
.finish-step[b-dcmvvho6gx] { border: 1px solid #dce3ec; border-radius: 15px; background: #fffdf5; }
.state-box > i[b-dcmvvho6gx] { color: #8da7c5; }
.skeleton-card[b-dcmvvho6gx] { border-color: #e3e8ef; }

.phrase-viewer[b-dcmvvho6gx] { width: min(900px, calc(100vw - 32px)); max-width: none; max-height: min(760px, calc(100dvh - 32px)); padding: 0; border: 1px solid #c6d4e4; border-radius: 19px; overflow: hidden; background: #fff; color: var(--ink); box-shadow: 0 25px 90px #14243b40; }
.phrase-viewer[b-dcmvvho6gx]::backdrop { background: #10243b80; backdrop-filter: blur(4px); }
.phrase-viewer[open][b-dcmvvho6gx] { animation: phrase-viewer-in-b-dcmvvho6gx .18s ease-out; }
.viewer-content[b-dcmvvho6gx] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-height: min(758px, calc(100dvh - 34px)); }
.viewer-head[b-dcmvvho6gx] { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; padding: 1rem 1.1rem .75rem; border-bottom: 1px solid #e5ebf2; }
.viewer-head > div[b-dcmvvho6gx] { min-width: 0; }
.viewer-head h2[b-dcmvvho6gx] { margin: .2rem 0 0; font-size: 1.4rem; overflow-wrap: anywhere; }
.viewer-translation[b-dcmvvho6gx] { margin: .2rem 0 0; color: var(--accent); font-family: Vazirmatn, Tahoma, sans-serif; font-size: .85rem; text-align: left; }
.viewer-close[b-dcmvvho6gx] { flex: 0 0 auto; }
.viewer-player[b-dcmvvho6gx] { min-width: 0; min-height: 0; padding: .85rem 1rem; overflow-y: auto; overscroll-behavior: contain; }
.viewer-foot[b-dcmvvho6gx] { display: flex; align-items: center; justify-content: space-between; gap: .4rem; padding: .55rem .8rem; border-top: 1px solid #e5ebf2; background: #f8fafc; }
.viewer-foot > span[b-dcmvvho6gx] { flex: 0 0 auto; color: var(--muted); font-size: .8rem; }
.viewer-step[b-dcmvvho6gx] { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-height: 40px; padding: .3rem .5rem; border: 0; border-radius: 8px; background: transparent; color: var(--accent); font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; }
.viewer-step:hover:not(:disabled)[b-dcmvvho6gx] { background: var(--accent-soft); }
.viewer-step:disabled[b-dcmvvho6gx] { color: #9ba5b0; cursor: default; }
.viewer-step:focus-visible[b-dcmvvho6gx] { outline: 3px solid #80a9d9; outline-offset: 2px; }
@keyframes phrase-viewer-in-b-dcmvvho6gx { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }

@media (min-width: 1080px) { .phrase-grid[b-dcmvvho6gx] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 575.98px) {
    .phrases[b-dcmvvho6gx] { padding-inline: .55rem; }
    .page-head[b-dcmvvho6gx] { align-items: stretch; }
    .page-head > .btn-sketch[b-dcmvvho6gx] { width: 100%; }
    .toolbar[b-dcmvvho6gx] { padding: .7rem; }
    .segmented button[b-dcmvvho6gx] { font-size: .76rem; }
    .chips[b-dcmvvho6gx] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .chip[b-dcmvvho6gx] { justify-content: center; padding-inline: .5rem; }
    .chip:first-child:last-child[b-dcmvvho6gx], .chip:nth-child(3)[b-dcmvvho6gx] { grid-column: 1 / -1; }
    .phrase-viewer[b-dcmvvho6gx] { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); border-radius: 14px; }
    .viewer-content[b-dcmvvho6gx] { max-height: calc(100dvh - 18px); }
    .viewer-head[b-dcmvvho6gx] { padding: .8rem .75rem .6rem; }
    .viewer-head h2[b-dcmvvho6gx] { font-size: 1.2rem; }
    .viewer-player[b-dcmvvho6gx] { padding: .65rem; }
    .viewer-foot[b-dcmvvho6gx] { padding-inline: .35rem; }
    .viewer-step[b-dcmvvho6gx] { padding-inline: .25rem; font-size: .77rem; }
}
@media (prefers-reduced-motion: reduce) { .phrase-card[b-dcmvvho6gx], .btn-sketch[b-dcmvvho6gx] { transition: none; } .phrase-viewer[open][b-dcmvvho6gx] { animation: none; } }
/* /Pages/playAudio/AudioTrackPlayer.razor.rz.scp.css */
.track[b-eajz6zv0if] {
    border: 2px solid #2b2b2b;
    border-radius: 14px 6px 16px 8px;
    background: #fff;
    box-shadow: 2px 2px 0 #2b2b2b;
    padding: 1rem 1.1rem;
    transition: box-shadow .15s ease;
}

    .track.playing[b-eajz6zv0if] {
        box-shadow: 4px 4px 0 #0d6efd;
        border-color: #0d6efd;
    }

.track-head[b-eajz6zv0if] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: .75rem;
}

.track-title[b-eajz6zv0if] {
    margin: 0;
    font-size: 1.15rem;
}

.track-hint[b-eajz6zv0if] {
    margin: .15rem 0 0;
    font-size: .85rem;
    color: #6b6b6b;
}

.track-time[b-eajz6zv0if] {
    font-variant-numeric: tabular-nums;
    color: #6b6b6b;
    white-space: nowrap;
}

.track-unavailable[b-eajz6zv0if] {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .75rem 1rem;
    border: 2px dashed #bdbdbd;
    border-radius: 10px;
    color: #6b6b6b;
}

    .track-unavailable.error[b-eajz6zv0if] {
        border-color: #dc3545;
        color: #b02a37;
        margin-bottom: .75rem;
    }

.track-skeleton[b-eajz6zv0if] {
    height: 44px;
    border-radius: 10px;
    background: linear-gradient(90deg, #eee 25%, #f6f6f6 50%, #eee 75%);
    background-size: 200% 100%;
    animation: shimmer-b-eajz6zv0if 1.2s infinite;
}

@keyframes shimmer-b-eajz6zv0if {
    to { background-position: -200% 0; }
}

.controls[b-eajz6zv0if] {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.ctrl[b-eajz6zv0if] {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #2b2b2b;
    border-radius: 50%;
    background: #fff;
    color: #2b2b2b;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

    .ctrl:hover[b-eajz6zv0if] { background: #e8f0ff; }

    .ctrl.play[b-eajz6zv0if] {
        width: 48px;
        height: 48px;
        background: #2b2b2b;
        color: #fff;
        font-size: 1.4rem;
    }

        .ctrl.play:hover[b-eajz6zv0if] { background: #0d6efd; border-color: #0d6efd; }

    .ctrl.small[b-eajz6zv0if] {
        width: 34px;
        height: 34px;
        font-size: .95rem;
        border-width: 1px;
    }

    .ctrl:focus-visible[b-eajz6zv0if], .progress-track:focus-visible[b-eajz6zv0if], .volume:focus-visible[b-eajz6zv0if] {
        outline: 3px solid #0d6efd;
        outline-offset: 2px;
    }

.progress-track[b-eajz6zv0if] {
    flex: 1;
    height: 10px;
    border: 2px solid #2b2b2b;
    border-radius: 999px;
    background: #f1f1f1;
    cursor: pointer;
    overflow: hidden;
    margin: 0 .25rem;
}

.progress-fill[b-eajz6zv0if] {
    height: 100%;
    background: #0d6efd;
    transition: width .2s linear;
}

.volume[b-eajz6zv0if] {
    width: 90px;
    accent-color: #0d6efd;
}

@media (prefers-reduced-motion: reduce) {
    .track-skeleton[b-eajz6zv0if] { animation: none; }
    .progress-fill[b-eajz6zv0if] { transition: none; }
}

@media (max-width: 576px) {
    /* Phone: the position bar gets its own row above the buttons (it used to sit under a wide volume slider
       that looked like the position bar), and the buttons are big enough for a thumb. */
    .controls[b-eajz6zv0if] { flex-wrap: wrap; justify-content: center; gap: .6rem; }
    .progress-track[b-eajz6zv0if] { order: -1; flex: 1 1 100%; height: 16px; margin: 0 0 .35rem; }
    .ctrl[b-eajz6zv0if] { width: 46px; height: 46px; }
    .ctrl.play[b-eajz6zv0if] { width: 56px; height: 56px; font-size: 1.6rem; }
    .ctrl.small[b-eajz6zv0if] { width: 40px; height: 40px; }
    .volume[b-eajz6zv0if] { flex: 0 1 90px; }
    .track[b-eajz6zv0if] { padding: .85rem .8rem; }
    .track-head[b-eajz6zv0if] { gap: .5rem; }
}

/* Phones and tablets change the volume with their own buttons (iPhones ignore this slider): mute is enough. */
@media (pointer: coarse) {
    .volume[b-eajz6zv0if] { display: none; }
}
/* /Pages/playAudio/DictationPanel.razor.rz.scp.css */
/* "Type what you hear": the same hand-drawn look as the rest of the Listen page. */
.dictation[b-bn0j6l2so4] { display: flex; flex-direction: column; gap: .75rem; }

.dict-empty[b-bn0j6l2so4] { margin: 0; color: #6b6b6b; }
.dict-skeleton[b-bn0j6l2so4] { height: 140px; border-radius: 12px; background: linear-gradient(90deg, #f3efe0, #fbf8ec, #f3efe0); background-size: 200% 100%; animation: dict-shine-b-bn0j6l2so4 1.2s infinite; }
@keyframes dict-shine-b-bn0j6l2so4 { to { background-position: -200% 0; } }

.dict-top[b-bn0j6l2so4] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.dict-count[b-bn0j6l2so4] { color: #6b6b6b; }
    .dict-count strong[b-bn0j6l2so4] { color: #2b2b2b; }

.dict-voice[b-bn0j6l2so4] { display: inline-flex; border: 2px solid #2b2b2b; border-radius: 10px; overflow: hidden; }
    .dict-voice button[b-bn0j6l2so4] {
        min-height: 36px; padding: 0 .7rem; border: 0; background: #fff; font: inherit; font-weight: bold; color: #2b2b2b; cursor: pointer;
        display: inline-flex; align-items: center; gap: .3rem;
    }
        .dict-voice button + button[b-bn0j6l2so4] { border-left: 2px solid #2b2b2b; }
        .dict-voice button.on[b-bn0j6l2so4] { background: #2b2b2b; color: #fff; }
        .dict-voice button:focus-visible[b-bn0j6l2so4] { outline: 3px solid #0d6efd; outline-offset: -3px; }

.dict-progress[b-bn0j6l2so4] { height: 6px; border-radius: 3px; background: #ece6cf; overflow: hidden; }
    .dict-progress span[b-bn0j6l2so4] { display: block; height: 100%; background: #2b2b2b; transition: width .2s; }

.dict-controls[b-bn0j6l2so4] { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

.dict-ctrl[b-bn0j6l2so4] {
    min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    padding: 0 .75rem; border: 2px solid #2b2b2b; border-radius: 10px 4px 10px 4px; background: #fff;
    box-shadow: 2px 2px 0 #2b2b2b; font: inherit; font-weight: bold; color: #2b2b2b; cursor: pointer;
}
    .dict-ctrl:hover[b-bn0j6l2so4] { background: #e8f0ff; }
    .dict-ctrl:focus-visible[b-bn0j6l2so4] { outline: 3px solid #0d6efd; outline-offset: 2px; }
    .dict-ctrl.play[b-bn0j6l2so4] { flex: 1 1 10rem; background: #ffe680; font-size: 1.05rem; }
        .dict-ctrl.play:hover[b-bn0j6l2so4] { background: #ffdb4d; }
    .dict-ctrl.speed.on[b-bn0j6l2so4] { background: #2b2b2b; color: #fff; }

.dict-answer[b-bn0j6l2so4] { display: flex; gap: .5rem; }

.dict-input[b-bn0j6l2so4] {
    flex: 1; min-width: 0; min-height: 52px; padding: .5rem .8rem; border: 2px solid #2b2b2b; border-radius: 12px 6px 12px 6px;
    background: #fff; font: inherit; font-size: 1.2rem; color: #2b2b2b;
}
    .dict-input:focus[b-bn0j6l2so4] { outline: 3px solid #0d6efd; outline-offset: 1px; }
    .dict-input.done[b-bn0j6l2so4] { background: #f6f3e6; color: #6b6b6b; }

.dict-submit[b-bn0j6l2so4] {
    min-height: 52px; padding: 0 1.1rem; border: 2px solid #2b2b2b; border-radius: 10px 4px 10px 4px; background: #2b2b2b; color: #fff;
    font: inherit; font-weight: bold; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem;
}
    .dict-submit:hover[b-bn0j6l2so4] { background: #0d6efd; border-color: #0d6efd; }
    .dict-submit:focus-visible[b-bn0j6l2so4] { outline: 3px solid #0d6efd; outline-offset: 2px; }

.dict-keys[b-bn0j6l2so4] { margin: -.25rem 0 0; font-size: .85rem; color: #6b6b6b; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; }
    .dict-keys kbd[b-bn0j6l2so4] { border: 1px solid #bbb; border-bottom-width: 2px; border-radius: 4px; padding: 0 .3rem; background: #fff; color: #2b2b2b; font: inherit; font-size: .8rem; }

.link-btn[b-bn0j6l2so4] { border: 0; background: none; padding: 0; font: inherit; color: #0d6efd; cursor: pointer; text-decoration: underline; display: inline-flex; align-items: center; gap: .25rem; }
    .link-btn:focus-visible[b-bn0j6l2so4] { outline: 2px solid #0d6efd; outline-offset: 2px; }

.dict-hint[b-bn0j6l2so4] { margin: 0; font-family: ui-monospace, Consolas, monospace; font-size: 1.05rem; letter-spacing: .05em; color: #a16207; }
.dict-message[b-bn0j6l2so4] { margin: 0; color: #a16207; }

.dict-feedback[b-bn0j6l2so4] { display: flex; flex-direction: column; gap: .5rem; padding: .8rem 1rem; border: 2px dashed #2b2b2b; border-radius: 12px; background: #fff; }
    .dict-feedback.finished[b-bn0j6l2so4] { border-style: solid; }

.dict-verdict[b-bn0j6l2so4] { margin: 0; font-weight: bold; }
    .dict-verdict.good[b-bn0j6l2so4] { color: #15803d; }

.dict-line[b-bn0j6l2so4] { margin: 0; font-size: 1.3rem; line-height: 2.1; }

/* One word of the comparison. */
.w[b-bn0j6l2so4] { border-radius: 6px; padding: .05rem .2rem; white-space: nowrap; }
    .w.ok[b-bn0j6l2so4] { color: #15803d; }
    .w.spell[b-bn0j6l2so4], .w.form[b-bn0j6l2so4] { color: #15803d; text-decoration: underline dotted #d97706 2px; text-underline-offset: 4px; cursor: help; }
    .w.form[b-bn0j6l2so4] { text-decoration-color: #2563eb; }
    .w.bad[b-bn0j6l2so4] { background: #fee2e2; color: #b91c1c; }
    .w.gap[b-bn0j6l2so4] { background: #fef3c7; color: #92400e; }
    .w.extra[b-bn0j6l2so4] { color: #9a9a9a; }
    .w.moved[b-bn0j6l2so4] { background: #ffedd5; color: #c2410c; cursor: help; }
    .w.moved-from[b-bn0j6l2so4] { color: #c2410c; opacity: .6; }
    .w s[b-bn0j6l2so4] { text-decoration-thickness: 2px; }
    .w ins[b-bn0j6l2so4] { text-decoration: none; font-weight: bold; margin-left: .25rem; }
    .w.gap ins[b-bn0j6l2so4] { margin-left: 0; }
    .w .blank[b-bn0j6l2so4] { letter-spacing: .1em; }

.part[b-bn0j6l2so4] {
    width: 28px; height: 28px; margin-left: .2rem; padding: 0; border: 2px solid currentColor; border-radius: 50%;
    background: #fff; color: inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; font-size: .9rem;
}
    .part:focus-visible[b-bn0j6l2so4] { outline: 3px solid #0d6efd; outline-offset: 1px; }

.dict-score[b-bn0j6l2so4] { margin: 0; color: #2b2b2b; }
    .dict-score .muted[b-bn0j6l2so4] { color: #6b6b6b; }
.dict-legend[b-bn0j6l2so4] { margin: 0; font-size: .85rem; color: #6b6b6b; line-height: 1.9; }
    .dict-legend .w[b-bn0j6l2so4] { font-size: .85rem; }
.dict-note[b-bn0j6l2so4] { margin: 0; font-size: .95rem; color: #374151; }
    .dict-note i[b-bn0j6l2so4] { color: #2563eb; }

.dict-tips[b-bn0j6l2so4] { display: flex; flex-direction: column; gap: .5rem; margin-top: .25rem; padding-top: .6rem; border-top: 2px dotted #ccc; }
    .dict-tips h3[b-bn0j6l2so4] { margin: 0; font-size: 1rem; }
.dict-tip p[b-bn0j6l2so4] { margin: 0 0 .35rem; }
.dict-tip-tools[b-bn0j6l2so4] { display: flex; flex-wrap: wrap; gap: .4rem; }

.chip[b-bn0j6l2so4] {
    min-height: 36px; display: inline-flex; align-items: center; gap: .3rem; padding: 0 .7rem; border: 2px solid #2b2b2b; border-radius: 999px;
    background: #fff; font: inherit; font-size: .9rem; color: #2b2b2b; cursor: pointer;
}
    .chip:hover[b-bn0j6l2so4] { background: #e8f0ff; }
    .chip.saved[b-bn0j6l2so4] { cursor: default; border-color: #15803d; color: #15803d; }
    .chip small[b-bn0j6l2so4] { color: #6b6b6b; }

.dict-practise[b-bn0j6l2so4] { margin: 0; font-size: .95rem; color: #374151; }
.dict-save-note[b-bn0j6l2so4] { margin: 0; font-size: .85rem; color: #a16207; }

.dict-stats[b-bn0j6l2so4] { display: flex; flex-direction: column; gap: .35rem; padding-top: .6rem; border-top: 2px dotted #ccc; font-size: .9rem; color: #374151; }
    .dict-stats p[b-bn0j6l2so4] { margin: 0; }
.dict-missed[b-bn0j6l2so4] { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
    .dict-missed .chip[b-bn0j6l2so4] { cursor: default; }

@media (max-width: 520px) {
    .dict-line[b-bn0j6l2so4] { font-size: 1.15rem; }
    .dict-ctrl.play span[b-bn0j6l2so4] { font-size: .95rem; }
    .dict-submit[b-bn0j6l2so4] { padding: 0 .9rem; }

    /* Phone: the typing box comes first and takes the whole width (it used to share a row with Check, which left
       little room to type). Under it: Play and Check side by side, then previous / next / speed.
       The two groups dissolve into one grid so their parts can be placed row by row. */
    .dictation[b-bn0j6l2so4] { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .6rem .5rem; }
    .dictation > *[b-bn0j6l2so4] { grid-column: 1 / -1; order: 4; }
    .dictation > .dict-top[b-bn0j6l2so4], .dictation > .dict-progress[b-bn0j6l2so4] { order: 0; }
    .dict-controls[b-bn0j6l2so4], .dict-answer[b-bn0j6l2so4] { display: contents; }

    .dict-input[b-bn0j6l2so4] { grid-column: 1 / -1; order: 1; min-height: 56px; font-size: 1.15rem; }
    .dict-ctrl.play[b-bn0j6l2so4] { grid-column: span 4; order: 2; min-height: 52px; }
    .dict-submit[b-bn0j6l2so4] { grid-column: span 2; order: 2; min-height: 52px; justify-content: center; padding: 0 .5rem; }
    .dict-ctrl[b-bn0j6l2so4] { grid-column: span 2; order: 3; min-width: 0; }
}

/* Keyboard shortcuts mean nothing on a touch screen. */
@media (hover: none) {
    .dict-kbd[b-bn0j6l2so4] { display: none; }
}
/* /Pages/playAudio/PlayAudio.razor.rz.scp.css */
.listen[b-s5d0wpjizi] {
    font-family: 'Comic Neue', Vazirmatn, 'Comic Sans MS', sans-serif;
    color: #2b2b2b;
    max-width: 860px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
}

.back-link[b-s5d0wpjizi] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: #2b2b2b;
    text-decoration: none;
    font-weight: bold;
    margin-bottom: 1rem;
}

    .back-link:hover[b-s5d0wpjizi] { color: #0d6efd; }

.listen-header h1[b-s5d0wpjizi] {
    font-size: 2rem;
    margin: 0;
}

.episode-line[b-s5d0wpjizi] {
    margin: .25rem 0 1.25rem;
    color: #6b6b6b;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-items: baseline;
}

    .episode-line strong[b-s5d0wpjizi] { color: #2b2b2b; }

.code[b-s5d0wpjizi] {
    border: 2px dashed #2b2b2b;
    border-radius: 8px;
    padding: 0 .4rem;
    font-weight: bold;
    color: #2b2b2b;
}

/* The line being spoken: the focus of the page. */
.subtitle-card[b-s5d0wpjizi] {
    display: flex;
    flex-direction: column;
    gap: .9rem;
    min-height: 110px;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    border: 2px solid #2b2b2b;
    border-radius: 18px 8px 22px 10px;
    background: #fffdf3;
    box-shadow: 3px 3px 0 #2b2b2b;
}

.subtitle-text[b-s5d0wpjizi] {
    flex: 1;
    margin: 0;
    font-size: 1.45rem;
    line-height: 1.6;
}

    /* Placeholder while nothing is playing (the element is filled by JavaScript). */
    .subtitle-text:empty:not(.has-started)[b-s5d0wpjizi]::before {
        content: attr(data-placeholder);
        color: #9a9a9a;
        font-size: 1rem;
    }

    /* Words are created by audio-player.js, so ::deep is needed to reach them. */
    .subtitle-text[b-s5d0wpjizi]  .clickable-word {
        cursor: pointer;
        color: #0d6efd;
        border-radius: 4px;
        padding: 0 1px;
    }

        .subtitle-text[b-s5d0wpjizi]  .clickable-word:hover,
        .subtitle-text[b-s5d0wpjizi]  .clickable-word:focus-visible {
            background: #e8f0ff;
            outline: none;
        }

        .subtitle-text[b-s5d0wpjizi]  .clickable-word.current-word {
            font-weight: bold;
            text-decoration: underline;
            text-decoration-thickness: 2px;
        }

        /* "Read slowly": words wait in grey and light up one by one. */
        .subtitle-text[b-s5d0wpjizi]  .clickable-word.reading { color: #8a8a8a; }
        .subtitle-text[b-s5d0wpjizi]  .clickable-word.reading.current-word { color: #2b2b2b; background: #ffe680; text-decoration: none; }

/* Repeat / Slower / Read slowly */
.line-tools[b-s5d0wpjizi] { display: flex; flex-wrap: wrap; gap: .5rem; padding-top: .6rem; }

.tool[b-s5d0wpjizi] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: 0 .9rem;
    border: 2px solid #2b2b2b;
    border-radius: 10px 4px 10px 4px;
    background: #fff;
    box-shadow: 2px 2px 0 #2b2b2b;
    font: inherit;
    font-weight: bold;
    color: #2b2b2b;
    cursor: pointer;
}

    .tool:hover[b-s5d0wpjizi] { background: #fff1a8; }
    .tool.active[b-s5d0wpjizi] { background: #2b2b2b; color: #fff; }
    .tool:focus-visible[b-s5d0wpjizi] { outline: 3px solid #0d6efd; outline-offset: 2px; }

.tool-hint[b-s5d0wpjizi] { margin: 0; font-size: .9rem; color: #a16207; }

.tracks[b-s5d0wpjizi] {
    display: grid;
    gap: 1rem;
}

.btn-sketch[b-s5d0wpjizi] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font: inherit;
    padding: .45rem .9rem;
    border: 2px solid #2b2b2b;
    border-radius: 10px 4px 10px 4px;
    background: #fff;
    color: #2b2b2b;
    box-shadow: 2px 2px 0 #2b2b2b;
    cursor: pointer;
    text-decoration: none;
}

    .btn-sketch:hover[b-s5d0wpjizi] { background: #e8f0ff; }

    .btn-sketch:focus-visible[b-s5d0wpjizi] {
        outline: 3px solid #0d6efd;
        outline-offset: 2px;
    }

.state-box[b-s5d0wpjizi] {
    text-align: center;
    padding: 2.5rem 1rem;
    color: #6b6b6b;
}

    .state-box i[b-s5d0wpjizi] {
        font-size: 2.25rem;
        display: block;
        margin-bottom: .5rem;
        color: #2b2b2b;
    }

@media (max-width: 576px) {
    .listen-header h1[b-s5d0wpjizi] { font-size: 1.6rem; }

    .line-tools .tool[b-s5d0wpjizi] { flex: 1 1 auto; justify-content: center; padding: 0 .6rem; }

    .subtitle-text[b-s5d0wpjizi] { font-size: 1.2rem; }
}

/* ---------- Study path: finish this step ---------- */
.finish-step[b-s5d0wpjizi] {
    margin-top: 1.25rem;
    padding: 1rem;
    border: 2px dashed #2b2b2b;
    border-radius: 16px;
    background: #fffdf3;
    text-align: center;
}

    .finish-step p[b-s5d0wpjizi] { margin: 0 0 .75rem; }
    .finish-step .bi-check-circle-fill[b-s5d0wpjizi] { color: #198754; }
    .finish-step .login-note[b-s5d0wpjizi] { margin: .5rem 0 0; font-size: .9rem; }

/* "Read slowly" while the voice is being prepared */
.tool-spinner[b-s5d0wpjizi] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: tool-spin-b-s5d0wpjizi .8s linear infinite;
}

@keyframes tool-spin-b-s5d0wpjizi { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .tool-spinner[b-s5d0wpjizi] { animation-duration: 2s; }
}


/* Toolbar over selected subtitle text (position from audio-player.js, in screen coordinates). */
.selection-tools[b-s5d0wpjizi] {
    position: fixed;
    z-index: 1050;
    display: flex;
    gap: 2px;
    padding: 4px;
    background: #2b2b2b;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}

    .selection-tools.above[b-s5d0wpjizi] { transform: translate(-50%, -100%); }
    .selection-tools.below[b-s5d0wpjizi] { transform: translate(-50%, 0); }

    /* Small arrow pointing at the selection. */
    .selection-tools[b-s5d0wpjizi]::after {
        content: "";
        position: absolute;
        left: 50%;
        margin-left: -6px;
        border: 6px solid transparent;
    }

    .selection-tools.above[b-s5d0wpjizi]::after { top: 100%; border-top-color: #2b2b2b; }
    .selection-tools.below[b-s5d0wpjizi]::after { bottom: 100%; border-bottom-color: #2b2b2b; }

    .selection-tools button[b-s5d0wpjizi] {
        width: 40px;
        height: 36px;
        display: grid;
        place-items: center;
        border: none;
        border-radius: 7px;
        background: transparent;
        color: #fff;
        font-size: 1.15rem;
        cursor: pointer;
    }

        .selection-tools button:hover[b-s5d0wpjizi],
        .selection-tools button:focus-visible[b-s5d0wpjizi] {
            background: #4a4a4a;
            outline: none;
        }

/* Hidden while typing; these have their own display rules, which would beat the hidden attribute. */
.subtitle-text[hidden][b-s5d0wpjizi], .line-tools[hidden][b-s5d0wpjizi], .tracks[hidden][b-s5d0wpjizi] { display: none; }
/* /Pages/practice/CollapsedTools.razor.rz.scp.css */
.collapsed-tools[b-zzseyf6y3b] { margin-top: .6rem; min-width: 0; }

.ct-head[b-zzseyf6y3b] {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .7rem;
    border: 1px solid #d5dbe5;
    border-radius: 12px;
    background: #f6f8fb;
    color: #2b2b2b;
    font: inherit;
    font-size: .9rem;
    text-align: left;
    cursor: pointer;
}

    .ct-head:hover[b-zzseyf6y3b] { background: #edf2ff; border-color: #b8c4e0; }
    .ct-head:focus-visible[b-zzseyf6y3b] { outline: 3px solid #4263eb; outline-offset: 2px; }

.collapsed-tools.open .ct-head[b-zzseyf6y3b] { border-radius: 12px 12px 0 0; background: #edf2ff; border-color: #b8c4e0; }

.ct-icon[b-zzseyf6y3b] { color: #4263eb; }
.ct-title[b-zzseyf6y3b] { font-weight: bold; white-space: nowrap; }

/* What is on while the tools are closed: "0.75× · Loop". */
.ct-status[b-zzseyf6y3b] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: .1rem .5rem;
    border-radius: 999px;
    background: #2b2b2b;
    color: #fff;
    font-size: .78rem;
}

.ct-action[b-zzseyf6y3b] { margin-left: auto; display: inline-flex; align-items: center; gap: .25rem; color: #4263eb; font-size: .82rem; white-space: nowrap; }
.ct-chevron[b-zzseyf6y3b] { transition: transform .15s ease; }
.collapsed-tools.open .ct-chevron[b-zzseyf6y3b] { transform: rotate(180deg); }

.ct-body[b-zzseyf6y3b] {
    padding: .1rem .6rem .7rem;
    border: 1px solid #b8c4e0;
    border-top: 0;
    border-radius: 0 0 12px 12px;
    background: #fbfcff;
}

@media (max-width: 400px) {
    .ct-head[b-zzseyf6y3b] { padding-inline: .55rem; gap: .4rem; }
    .ct-title[b-zzseyf6y3b] { white-space: normal; line-height: 1.2; }
}

@media (prefers-reduced-motion: reduce) { .ct-chevron[b-zzseyf6y3b] { transition: none; } }
/* /Pages/practice/ShadowingPanel.razor.rz.scp.css */
.shadowing[b-80qu2r82ty] {
    margin-top: .75rem;
    padding: .9rem;
    border: 2px dashed #2b2b2b;
    border-radius: 12px;
    background: #fffdf3;
}

.shadow-head[b-80qu2r82ty] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
}

    .shadow-head h3[b-80qu2r82ty] { margin: 0; font-size: 1.05rem; }

.icon-btn[b-80qu2r82ty] {
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    flex: 0 0 auto;
}

    .icon-btn:hover[b-80qu2r82ty] { background: #e8f0ff; }

.steps[b-80qu2r82ty] {
    margin: .5rem 0 0;
    padding-left: 1.25rem;
    display: grid;
    gap: .5rem;
}

    .steps li[b-80qu2r82ty] { padding-left: .25rem; }

.btn-mini[b-80qu2r82ty], .btn-record[b-80qu2r82ty] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: 0 .9rem;
    border: 2px solid #2b2b2b;
    border-radius: 10px 4px 10px 4px;
    background: #fff;
    font: inherit;
    cursor: pointer;
    justify-content: center;
    max-width: 100%;
    white-space: normal;
}

.btn-record[b-80qu2r82ty] { background: #2b2b2b; color: #fff; }
    .btn-record.recording[b-80qu2r82ty] { background: #dc3545; border-color: #dc3545; }
    .btn-record:disabled[b-80qu2r82ty] { opacity: .6; }

.dot[b-80qu2r82ty] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    animation: pulse-b-80qu2r82ty 1s infinite;
}

@keyframes pulse-b-80qu2r82ty { 50% { opacity: .3; } }

.hint[b-80qu2r82ty] { margin: .35rem 0 0; color: #6b6b6b; }

.note[b-80qu2r82ty] { margin: .5rem 0 0; color: #6b6b6b; font-size: .9rem; }
    .note.error[b-80qu2r82ty] { color: #b02a37; }
    .note.warn[b-80qu2r82ty] { color: #8a5a00; }

.result[b-80qu2r82ty] { margin-top: .75rem; }

.score[b-80qu2r82ty] {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    flex-wrap: wrap;
}

    .score strong[b-80qu2r82ty] { font-size: 1.8rem; }
    .score.great strong[b-80qu2r82ty] { color: #198754; }
    .score.good strong[b-80qu2r82ty] { color: #b07d00; }
    .score.low strong[b-80qu2r82ty] { color: #b02a37; }

.words[b-80qu2r82ty] { font-size: 1.15rem; line-height: 1.7; margin: .4rem 0; }
    .words .hit[b-80qu2r82ty] { color: #198754; }
    .words .miss[b-80qu2r82ty] { color: #b02a37; text-decoration: underline wavy; }

.heard[b-80qu2r82ty] { font-size: .85rem; color: #6b6b6b; margin: 0 0 .5rem; }

.compare[b-80qu2r82ty] { display: flex; flex-wrap: wrap; gap: .5rem; }

.target-line[b-80qu2r82ty] { margin: .65rem 0; padding: .65rem .75rem; border-left: 4px solid #4263eb; background: #edf2ff; font-size: 1.08rem; overflow-wrap: anywhere; }
.word-check[b-80qu2r82ty] { display: flex; align-items: center; gap: .5rem; min-height: 44px; margin-top: .35rem; cursor: pointer; }
.word-check input[b-80qu2r82ty] { width: 18px; height: 18px; flex: 0 0 auto; accent-color: #4263eb; }
.privacy-note[b-80qu2r82ty] { margin: 0; color: #6b6b6b; font-size: .8rem; }
.recording-row[b-80qu2r82ty] { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.recording-time[b-80qu2r82ty] { font-variant-numeric: tabular-nums; color: #6b6b6b; }
.level[b-80qu2r82ty] { flex: 1 1 120px; max-width: 220px; height: 10px; border: 1px solid #2b2b2b; border-radius: 6px; background: #fff; overflow: hidden; }
.level > span[b-80qu2r82ty] { display: block; width: 0; height: 100%; background: #198754; transition: width .08s linear; }
.practise[b-80qu2r82ty] { margin: 0 0 .4rem; font-size: .95rem; }
.checking[b-80qu2r82ty] { display: flex; align-items: center; gap: .5rem; }
.spinner[b-80qu2r82ty] { width: 16px; height: 16px; flex: 0 0 auto; border: 2px solid #c9c9c9; border-top-color: #4263eb; border-radius: 50%; animation: spin-b-80qu2r82ty .8s linear infinite; }
@keyframes spin-b-80qu2r82ty { to { transform: rotate(360deg); } }
.my-recording[b-80qu2r82ty] { display: block; width: 100%; max-width: 100%; height: 44px; margin: .75rem 0; }
.shadowing[b-80qu2r82ty], .steps li[b-80qu2r82ty], .result[b-80qu2r82ty], .score > span[b-80qu2r82ty] { min-width: 0; }
.heard[b-80qu2r82ty], .words[b-80qu2r82ty] { overflow-wrap: anywhere; }
.btn-mini:disabled[b-80qu2r82ty] { opacity: .6; cursor: default; }
.icon-btn:focus-visible[b-80qu2r82ty], .btn-mini:focus-visible[b-80qu2r82ty], .btn-record:focus-visible[b-80qu2r82ty] { outline: 3px solid #4263eb; outline-offset: 2px; }

@media (max-width: 575.98px) {
    .shadowing[b-80qu2r82ty] { padding: .7rem; }
    .steps[b-80qu2r82ty] { padding-left: 1.15rem; }
    .compare .btn-mini[b-80qu2r82ty] { flex: 1 1 100%; }
    .steps .btn-mini[b-80qu2r82ty], .steps .btn-record[b-80qu2r82ty] { width: 100%; padding: .4rem .55rem; }
    .recording-row[b-80qu2r82ty] { align-items: stretch; }
    .recording-time[b-80qu2r82ty] { width: 100%; text-align: center; }
}

@media (max-width: 575.98px) { .level[b-80qu2r82ty] { flex-basis: 100%; max-width: none; } }

@media (prefers-reduced-motion: reduce) { .dot[b-80qu2r82ty] { animation: none; } .spinner[b-80qu2r82ty] { animation-duration: 2.4s; } }
/* /Pages/question/AnswerReview.razor.rz.scp.css */
.review[b-0sofld2bu0] { margin-top: 1.5rem; }

.review-head[b-0sofld2bu0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .75rem;
}

    .review-head h2[b-0sofld2bu0] { font-size: 1.3rem; margin: 0; }

.filter[b-0sofld2bu0] {
    display: inline-flex;
    border: 2px solid #2b2b2b;
    border-radius: 999px;
    overflow: hidden;
}

    .filter button[b-0sofld2bu0] {
        min-height: 40px;
        padding: 0 .8rem;
        border: none;
        background: #fff;
        font: inherit;
        cursor: pointer;
    }

        .filter button + button[b-0sofld2bu0] { border-left: 2px solid #2b2b2b; }
        .filter button.active[b-0sofld2bu0] { background: #2b2b2b; color: #fff; }
        .filter button span[b-0sofld2bu0] { font-size: .75rem; opacity: .75; margin-left: .2rem; }
        .filter button:focus-visible[b-0sofld2bu0] { outline: 3px solid #0d6efd; outline-offset: -3px; }

.none[b-0sofld2bu0] { color: #6b6b6b; text-align: center; padding: 1rem; }

.items[b-0sofld2bu0] { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }

.item[b-0sofld2bu0] {
    padding: 1rem;
    border: 2px solid #2b2b2b;
    border-left-width: 6px;
    border-radius: 14px 6px 16px 8px;
    background: #fff;
}

    .item.right[b-0sofld2bu0] { border-left-color: #198754; }
    .item.wrong[b-0sofld2bu0] { border-left-color: #dc3545; }

.item-head[b-0sofld2bu0] { display: flex; align-items: center; gap: .6rem; }

.number[b-0sofld2bu0] {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #2b2b2b;
    color: #fff;
    font-weight: bold;
    font-size: .85rem;
}

.verdict[b-0sofld2bu0] { font-weight: bold; font-size: .9rem; }
.item.right .verdict[b-0sofld2bu0] { color: #198754; }
.item.wrong .verdict[b-0sofld2bu0] { color: #b02a37; }

.question[b-0sofld2bu0] { margin: .6rem 0; font-size: 1.05rem; font-weight: bold; }

.options[b-0sofld2bu0] { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }

    .options li[b-0sofld2bu0] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .5rem;
        padding: .45rem .6rem;
        border-radius: 8px;
        background: #fafafa;
        font-size: .95rem;
    }

        .options li.correct[b-0sofld2bu0] { background: #e8f6ee; }
        .options li.mine-wrong[b-0sofld2bu0] { background: #fdecec; }

.letter[b-0sofld2bu0] {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 2px solid #2b2b2b;
    font-size: .75rem;
    font-weight: bold;
}

.options li.correct .letter[b-0sofld2bu0] { background: #198754; border-color: #198754; color: #fff; }
.options li.mine-wrong .letter[b-0sofld2bu0] { background: #dc3545; border-color: #dc3545; color: #fff; }

.text[b-0sofld2bu0] { flex: 1; min-width: 0; }

.tag[b-0sofld2bu0] { font-size: .75rem; font-weight: bold; padding: .05rem .45rem; border-radius: 999px; }
    .tag.ok[b-0sofld2bu0] { background: #198754; color: #fff; }
    .tag.no[b-0sofld2bu0] { background: #dc3545; color: #fff; }

.explanation[b-0sofld2bu0] {
    margin: .6rem 0 0;
    padding: .5rem .7rem;
    border-radius: 8px;
    background: #fffdf3;
    color: #444;
    font-size: .95rem;
}

    .explanation .bi-lightbulb[b-0sofld2bu0] { color: #e0a800; }
/* /Pages/question/Questions.razor.rz.scp.css */
/* Quiz — mobile first, same hand-drawn look as the rest of the site. */

.quiz[b-dic41rnj15] {
    --ink: #2b2b2b;
    --muted: #6b6b6b;
    --paper: #fff;
    --accent: #0d6efd;
    --accent-soft: #e8f0ff;
    --yellow: #ffcc00;
    --green: #198754;
    --red: #dc3545;

    font-family: 'Comic Neue', Vazirmatn, 'Comic Sans MS', sans-serif;
    color: var(--ink);
    max-width: 760px;
    margin: 0 auto;
    padding: .5rem .75rem 3rem;
    outline: none;
}

.top-links[b-dic41rnj15] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    margin-bottom: .75rem;
}

.back-link[b-dic41rnj15], .history-link[b-dic41rnj15] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 44px;
    color: var(--ink);
    text-decoration: none;
    font-weight: bold;
}

    .back-link:hover[b-dic41rnj15], .history-link:hover[b-dic41rnj15] { color: var(--accent); }
    .history-link span[b-dic41rnj15] { display: none; }

.card[b-dic41rnj15] {
    padding: 1.1rem;
    border: 2px solid var(--ink);
    border-radius: 16px 6px 18px 8px;
    background: var(--paper);
    box-shadow: 3px 3px 0 var(--ink);
}

.btn-sketch[b-dic41rnj15] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 44px;
    padding: .45rem 1rem;
    font: inherit;
    font-weight: bold;
    color: var(--ink);
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 10px 4px 10px 4px;
    box-shadow: 2px 2px 0 var(--ink);
    text-decoration: none;
    cursor: pointer;
}

    .btn-sketch:hover:not(:disabled)[b-dic41rnj15] { background: var(--accent-soft); }
    .btn-sketch.primary[b-dic41rnj15] { background: var(--ink); color: #fff; }
        .btn-sketch.primary:hover:not(:disabled)[b-dic41rnj15] { background: var(--accent); border-color: var(--accent); }
    .btn-sketch.big[b-dic41rnj15] { min-height: 54px; padding: 0 1.6rem; font-size: 1.1rem; }
    .btn-sketch:disabled[b-dic41rnj15] { opacity: .4; cursor: not-allowed; box-shadow: none; }

/* ---------- States ---------- */
.state-box[b-dic41rnj15] { text-align: center; padding: 2.5rem 1rem; color: var(--muted); }
    .state-box > i[b-dic41rnj15] { display: block; font-size: 2.5rem; color: var(--ink); margin-bottom: .5rem; }
    .state-box h1[b-dic41rnj15] { font-size: 1.5rem; color: var(--ink); }

.spinner[b-dic41rnj15] {
    width: 28px; height: 28px; display: inline-block;
    border: 3px solid rgba(0,0,0,.15); border-top-color: var(--ink); border-radius: 50%;
    animation: spin-b-dic41rnj15 .8s linear infinite;
}

.spinner.small[b-dic41rnj15] { width: 14px; height: 14px; border-width: 2px; vertical-align: -2px; margin-right: .35rem; }

@keyframes spin-b-dic41rnj15 { to { transform: rotate(360deg); } }

/* ---------- Intro ---------- */
.intro[b-dic41rnj15] { text-align: center; }

.intro-icon[b-dic41rnj15] {
    width: 64px;
    height: 64px;
    margin: 0 auto .5rem;
    display: grid;
    place-items: center;
    border: 2px solid var(--ink);
    border-radius: 50%;
    background: var(--yellow);
    font-size: 1.8rem;
}

.eyebrow[b-dic41rnj15] { margin: 0; color: var(--muted); display: flex; justify-content: center; gap: .5rem; align-items: center; }
.code[b-dic41rnj15] { border: 2px dashed var(--ink); border-radius: 8px; padding: 0 .4rem; font-weight: bold; color: var(--ink); }

.intro h1[b-dic41rnj15] { font-size: 1.6rem; margin: .4rem 0 1rem; }

.intro-facts[b-dic41rnj15] {
    list-style: none;
    margin: 0 auto 1rem;
    padding: 0;
    display: grid;
    gap: .4rem;
    max-width: 26rem;
    text-align: left;
}

    .intro-facts i[b-dic41rnj15] { color: var(--accent); margin-right: .4rem; }

.best[b-dic41rnj15] { margin: 0 0 .75rem; }
.login-note[b-dic41rnj15] { margin: 0 0 1rem; color: var(--muted); }

/* ---------- Playing ---------- */
.dots[b-dic41rnj15] {
    display: flex;
    gap: .35rem;
    overflow-x: auto;
    padding: .25rem .1rem .6rem;
    scrollbar-width: thin;
}

.dot[b-dic41rnj15] {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border: 2px solid var(--ink);
    border-radius: 50%;
    background: var(--paper);
    font: inherit;
    font-size: .85rem;
    cursor: pointer;
}

    .dot.right[b-dic41rnj15] { background: var(--green); border-color: var(--green); color: #fff; }
    .dot.wrong[b-dic41rnj15] { background: var(--red); border-color: var(--red); color: #fff; }
    .dot.current[b-dic41rnj15] { box-shadow: 0 0 0 3px var(--yellow); }

.q-meta[b-dic41rnj15] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .9rem;
    color: var(--muted);
}

.difficulty[b-dic41rnj15] { font-size: .75rem; font-weight: bold; padding: .05rem .5rem; border-radius: 999px; background: #e8f6ee; color: #146c43; }
    .difficulty.d2[b-dic41rnj15] { background: #fff3cd; color: #8a6100; }
    .difficulty.d3[b-dic41rnj15] { background: #fdecec; color: #b02a37; }

.q-text[b-dic41rnj15] { font-size: 1.3rem; line-height: 1.4; margin: .6rem 0 1rem; }

.options[b-dic41rnj15] { display: grid; gap: .55rem; }

.option[b-dic41rnj15] {
    display: flex;
    align-items: center;
    gap: .7rem;
    width: 100%;
    min-height: 56px;
    padding: .6rem .8rem;
    text-align: left;
    border: 2px solid var(--ink);
    border-radius: 12px 4px 12px 4px;
    background: var(--paper);
    font: inherit;
    font-size: 1.02rem;
    color: var(--ink);
    cursor: pointer;
    transition: transform .1s ease, background .15s ease;
}

    .option:hover:not(:disabled)[b-dic41rnj15] { background: var(--accent-soft); transform: translate(-1px, -1px); }
    .option:disabled[b-dic41rnj15] { cursor: default; }
    .option.right[b-dic41rnj15] { background: #e8f6ee; border-color: var(--green); }
    .option.wrong[b-dic41rnj15] { background: #fdecec; border-color: var(--red); }
    .option.dim[b-dic41rnj15] { opacity: .55; }

.letter[b-dic41rnj15] {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: 2px solid var(--ink);
    border-radius: 50%;
    font-weight: bold;
}

.option.right .letter[b-dic41rnj15] { background: var(--green); border-color: var(--green); color: #fff; }
.option.wrong .letter[b-dic41rnj15] { background: var(--red); border-color: var(--red); color: #fff; }

.text[b-dic41rnj15] { flex: 1; min-width: 0; overflow-wrap: anywhere; }

.mark[b-dic41rnj15] { font-size: 1.3rem; }
.option.right .mark[b-dic41rnj15] { color: var(--green); }
.option.wrong .mark[b-dic41rnj15] { color: var(--red); }

.feedback[b-dic41rnj15] {
    margin-top: .9rem;
    padding: .75rem .9rem;
    border-radius: 12px;
    border: 2px solid;
}

    .feedback.right[b-dic41rnj15] { border-color: var(--green); background: #f2fbf6; }
    .feedback.wrong[b-dic41rnj15] { border-color: var(--red); background: #fff6f6; }
    .feedback p[b-dic41rnj15] { margin: .4rem 0 0; }
    .feedback .bi-lightbulb[b-dic41rnj15] { color: #e0a800; }

.hint[b-dic41rnj15] { margin: .9rem 0 0; font-size: .85rem; color: var(--muted); text-align: center; }

.confirm[b-dic41rnj15] {
    margin-top: .9rem;
    padding: .9rem;
    border: 2px dashed var(--ink);
    border-radius: 12px;
    background: #fffdf3;
}

    .confirm p[b-dic41rnj15] { margin: 0 0 .6rem; }
    .confirm div[b-dic41rnj15] { display: flex; flex-wrap: wrap; gap: .5rem; }

.error-note[b-dic41rnj15] { margin: .75rem 0 0; color: #b02a37; text-align: center; }

.nav[b-dic41rnj15] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: .5rem;
    margin-top: 1rem;
}

    .nav .btn-sketch span[b-dic41rnj15] { display: none; } /* phones: arrow only for "Previous" */

.answered-count[b-dic41rnj15] { text-align: center; color: var(--muted); font-size: .85rem; }

/* ---------- Results ---------- */
.result-card[b-dic41rnj15] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
}

    .result-card h1[b-dic41rnj15] { font-size: 1.7rem; margin: 0; }

.result-sub[b-dic41rnj15] { margin: .3rem 0; font-size: 1.1rem; }
.badge-best[b-dic41rnj15] { margin: .3rem 0; font-weight: bold; color: #a16207; }
    .badge-best i[b-dic41rnj15] { color: #f59e0b; }
.saved[b-dic41rnj15] { margin: .3rem 0 0; color: var(--muted); font-size: .9rem; }

.result-actions[b-dic41rnj15] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem;
    margin-top: 1rem;
}

    .result-actions .btn-sketch[b-dic41rnj15] { flex: 1 1 100%; }

/* Focus for keyboard users */
.btn-sketch:focus-visible[b-dic41rnj15], .option:focus-visible[b-dic41rnj15], .dot:focus-visible[b-dic41rnj15], .back-link:focus-visible[b-dic41rnj15], .history-link:focus-visible[b-dic41rnj15] {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

@media (min-width: 576px) {
    .quiz[b-dic41rnj15] { padding: 1rem 1rem 3rem; }
    .history-link span[b-dic41rnj15] { display: inline; }
    .card[b-dic41rnj15] { padding: 1.4rem; }
    .q-text[b-dic41rnj15] { font-size: 1.45rem; }
    .nav .btn-sketch span[b-dic41rnj15] { display: inline; }
    .result-card[b-dic41rnj15] { flex-direction: row; text-align: left; }
    .result-actions .btn-sketch[b-dic41rnj15] { flex: 0 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
    .spinner[b-dic41rnj15] { animation-duration: 2s; }
    .option[b-dic41rnj15] { transition: none; }
}
/* /Pages/question/ScoreRing.razor.rz.scp.css */
.ring[b-jqk1bp24t4] {
    position: relative;
    width: 150px;
    height: 150px;
    flex: 0 0 auto;
}

    .ring.small[b-jqk1bp24t4] { width: 56px; height: 56px; }

    .ring svg[b-jqk1bp24t4] { width: 100%; height: 100%; transform: rotate(-90deg); }

.track[b-jqk1bp24t4] { fill: none; stroke: #eee; stroke-width: 12; }

.value[b-jqk1bp24t4] {
    fill: none;
    stroke-width: 12;
    stroke-linecap: round;
    transition: stroke-dashoffset .8s ease;
}

.ring.great .value[b-jqk1bp24t4] { stroke: #198754; }
.ring.okay .value[b-jqk1bp24t4] { stroke: #f59e0b; }
.ring.low .value[b-jqk1bp24t4] { stroke: #dc3545; }

.label[b-jqk1bp24t4] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.1;
}

    .label strong[b-jqk1bp24t4] { font-size: 2rem; }
    .label small[b-jqk1bp24t4] { font-size: .8rem; color: #6b6b6b; }

.ring.small .label strong[b-jqk1bp24t4] { font-size: .95rem; }

@media (prefers-reduced-motion: reduce) {
    .value[b-jqk1bp24t4] { transition: none; }
}
/* /Pages/Reminders.razor.rz.scp.css */
.reminders[b-8gjy7snfkf] { max-width: 640px; margin: 0 auto; display: grid; gap: 1rem; }

.page-head h1[b-8gjy7snfkf] { margin: 0; }
.page-head .sub[b-8gjy7snfkf] { color: #6b6b6b; margin: .25rem 0 0; }

.r-card[b-8gjy7snfkf] {
    border: 2px solid #2b2b2b;
    border-radius: 14px 6px 14px 6px;
    background: #fff;
    box-shadow: 3px 3px 0 #2b2b2b;
    padding: 1rem 1.2rem;
}

    .r-card h2[b-8gjy7snfkf] { margin: 0 0 .5rem; font-size: 1.2rem; }
    .r-card h2 .bi-telegram[b-8gjy7snfkf] { color: #229ed9; }
    .r-card p[b-8gjy7snfkf] { margin: 0 0 .6rem; }

.r-ok[b-8gjy7snfkf] { color: #146c43; }
.r-error[b-8gjy7snfkf] { color: #b02a37; margin: 0; }
.r-steps[b-8gjy7snfkf] { margin: 0 0 .6rem; padding-left: 1.2rem; }
.r-wait[b-8gjy7snfkf] { display: flex; align-items: center; gap: .5rem; margin: .7rem 0 .2rem; color: #555; }

.r-toggle[b-8gjy7snfkf] { display: flex; gap: .7rem; align-items: flex-start; padding: .55rem 0; border-top: 1px dashed #d7d7d7; cursor: pointer; }
    .r-toggle:first-of-type[b-8gjy7snfkf] { border-top: none; }
    .r-toggle input[b-8gjy7snfkf] { width: 20px; height: 20px; margin-top: .15rem; accent-color: #0d6efd; }
    .r-toggle strong[b-8gjy7snfkf], .r-toggle small[b-8gjy7snfkf] { display: block; }
    .r-toggle small[b-8gjy7snfkf] { color: #6b6b6b; }

.r-hour[b-8gjy7snfkf] { display: flex; align-items: center; gap: .75rem; padding-top: .6rem; border-top: 1px dashed #d7d7d7; }
    .r-hour small[b-8gjy7snfkf] { color: #6b6b6b; }
    .r-hour select[b-8gjy7snfkf] { border: 2px solid #2b2b2b; border-radius: 8px; padding: .3rem .5rem; font: inherit; }

/* Text-style button ("Disconnect", "Cancel") and the waiting spinner (the sign-in card's versions are scoped to it). */
.link-btn[b-8gjy7snfkf] {
    border: none;
    background: transparent;
    padding: 0;
    font: inherit;
    font-weight: bold;
    color: #0d6efd;
    text-decoration: underline;
    cursor: pointer;
}

    .link-btn:disabled[b-8gjy7snfkf] { opacity: .6; cursor: wait; }

.spinner[b-8gjy7snfkf] {
    width: 18px;
    height: 18px;
    border: 3px solid rgba(0, 0, 0, .15);
    border-top-color: #2b2b2b;
    border-radius: 50%;
    animation: r-spin-b-8gjy7snfkf .8s linear infinite;
}

@keyframes r-spin-b-8gjy7snfkf { to { transform: rotate(360deg); } }
/* /Pages/review/CardRepair.razor.rz.scp.css */
.repair[b-790kz2saxz] { display: grid; gap: .5rem; margin-top: .6rem; padding: .75rem .85rem; border: 2px dashed #c9c9c9; border-radius: 12px; background: #fffdf3; text-align: left; }
.repair-title[b-790kz2saxz] { margin: 0; font-weight: bold; }
.repair-choices[b-790kz2saxz] { display: flex; flex-wrap: wrap; gap: .35rem; }
    .repair-choices .chip[b-790kz2saxz] { padding: .2rem .65rem; border: 2px solid #2b2b2b; border-radius: 999px; background: #fff; font: inherit; font-size: .85rem; cursor: pointer; }
    .repair-choices .chip.active[b-790kz2saxz] { background: #2b2b2b; color: #fff; }
.repair-help[b-790kz2saxz] { margin: 0; font-size: .85rem; color: #6b6b6b; }
.repair label[b-790kz2saxz] { display: grid; gap: .2rem; font-size: .85rem; }
    .repair label.tick[b-790kz2saxz] { display: flex; align-items: flex-start; gap: .4rem; }
.repair input:not([type=checkbox])[b-790kz2saxz], .repair textarea[b-790kz2saxz] { width: 100%; padding: .35rem .5rem; border: 2px solid #2b2b2b; border-radius: 8px; font: inherit; }
.repair .btn-sketch[b-790kz2saxz] { justify-self: start; }
.repair-scenes[b-790kz2saxz] { display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; font-size: .9rem; }
    .repair-scenes li[b-790kz2saxz] { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; }
    .repair-scenes small[b-790kz2saxz] { color: #6b6b6b; }
    .repair-scenes .link-btn[b-790kz2saxz] { flex: none; padding: 0; border: 0; background: none; color: #b02a37; font: inherit; font-size: .85rem; text-decoration: underline; cursor: pointer; }
    .repair-scenes .link-btn:disabled[b-790kz2saxz] { color: #aaa; cursor: default; }
.repair-done[b-790kz2saxz] { margin: 0; color: #18704c; font-size: .9rem; }
.repair-error[b-790kz2saxz] { margin: 0; color: #b02a37; font-size: .9rem; }
/* /Pages/review/ExerciseCard.razor.rz.scp.css */
/* One practice exercise — mobile first, hand-drawn style. */

.exercise[b-2kd038ssw5] {
    --ink: #2b2b2b;
    --muted: #6b6b6b;
    --accent: #0d6efd;
    --accent-soft: #e8f0ff;
    --right: #198754;
    --right-soft: #e9f7ef;
    --wrong: #b02a37;
    --wrong-soft: #fdecec;

    display: flex;
    flex-direction: column;
    gap: .8rem;
    padding: 1rem;
    border: 2px solid var(--ink);
    border-radius: 16px 6px 18px 8px;
    background: #fff;
    box-shadow: 3px 3px 0 var(--ink);
    outline: none;
    animation: slide-in-b-2kd038ssw5 .25s ease-out;
}

    .exercise.is-right[b-2kd038ssw5] { box-shadow: 3px 3px 0 var(--right); }
    .exercise.is-wrong[b-2kd038ssw5] { box-shadow: 3px 3px 0 var(--wrong); }

.kind[b-2kd038ssw5] { margin: 0; font-weight: bold; color: var(--muted); }
    .kind i[b-2kd038ssw5] { color: var(--accent); }

.video-frame[b-2kd038ssw5] {
    position: relative; /* for the "not on this device" note */
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #111;
    border-radius: 10px;
    overflow: hidden;
}

    .video-frame video[b-2kd038ssw5] { width: 100%; height: 100%; object-fit: contain; display: block; }

.scene-tools[b-2kd038ssw5] { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; margin-top: -.4rem; }
    .scene-tools small[b-2kd038ssw5] { margin-left: auto; color: var(--muted); }

.term[b-2kd038ssw5] { margin: .2rem 0; font-size: 2rem; text-align: center; overflow-wrap: anywhere; }

.prompt-fa[b-2kd038ssw5] {
    margin: .3rem 0;
    text-align: center;
    font-family: Vazirmatn, Tahoma, 'Segoe UI', sans-serif;
    font-size: 1.5rem;
    color: var(--accent);
}

/* ---------- Choices ---------- */
.choices[b-2kd038ssw5] { display: grid; gap: .5rem; }

.choice[b-2kd038ssw5] {
    min-height: 52px;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .8rem;
    border: 2px solid var(--ink);
    border-radius: 12px 4px 12px 4px;
    background: #fff;
    font: inherit;
    font-size: 1rem;
    text-align: left;
    color: var(--ink);
    cursor: pointer;
    transition: transform .1s ease;
}

    .choice:hover:not(:disabled)[b-2kd038ssw5] { background: var(--accent-soft); }
    .choice:active:not(:disabled)[b-2kd038ssw5] { transform: scale(.98); }
    .choice:disabled[b-2kd038ssw5] { cursor: default; }
    .choice.right[b-2kd038ssw5] { border-color: var(--right); background: var(--right-soft); color: #146c43; font-weight: bold; }
    .choice.wrong[b-2kd038ssw5] { border-color: var(--wrong); background: var(--wrong-soft); color: var(--wrong); animation: shake-b-2kd038ssw5 .3s; }
    .choice.dim[b-2kd038ssw5] { opacity: .45; }

/* ---------- Listen & type ---------- */
.cloze[b-2kd038ssw5] { display: grid; gap: .6rem; }

.line[b-2kd038ssw5] { margin: 0; font-size: 1.25rem; line-height: 2.2; text-align: center; overflow-wrap: anywhere; }
    .line mark[b-2kd038ssw5] { background: #fff3b0; font-weight: bold; border-radius: 4px; padding: 0 .2rem; }

.gap[b-2kd038ssw5] {
    min-width: 5ch;
    max-width: 100%;
    height: 2.4rem;
    padding: 0 .4rem;
    border: none;
    border-bottom: 3px solid var(--accent);
    background: var(--accent-soft);
    border-radius: 6px 6px 0 0;
    font: inherit;
    font-size: 1.1rem; /* ≥16px: no zoom on iOS */
    text-align: center;
    outline: none;
}

    .gap:focus[b-2kd038ssw5] { background: #dbe7ff; }

.try-again[b-2kd038ssw5] { margin: 0; text-align: center; color: #a16207; }

/* ---------- Build the sentence ---------- */
.answer-row[b-2kd038ssw5] {
    min-height: 60px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: .4rem;
    padding: .5rem;
    border-bottom: 2px dashed #cfcfcf;
}

    .answer-row.open[b-2kd038ssw5] { border-bottom-color: var(--accent); }

.placeholder[b-2kd038ssw5] { color: #9a9a9a; align-self: center; }

.tile-bank[b-2kd038ssw5] { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; }
.check-sentence[b-2kd038ssw5] { display: flex; align-items: center; gap: .3rem; margin: .9rem auto 0; }
    .check-sentence:disabled[b-2kd038ssw5] { opacity: .5; cursor: not-allowed; }

.tile[b-2kd038ssw5] {
    min-height: 44px;
    padding: 0 .8rem;
    border: 2px solid var(--ink);
    border-radius: 10px 4px 10px 4px;
    background: #fff;
    box-shadow: 2px 2px 0 var(--ink);
    font: inherit;
    font-size: 1.05rem;
    color: var(--ink);
    cursor: pointer;
}

    .tile.placed[b-2kd038ssw5] { box-shadow: none; background: var(--accent-soft); }
    .tile.used[b-2kd038ssw5] { visibility: hidden; }
    .tile:disabled[b-2kd038ssw5] { cursor: default; }

.is-right .tile.placed[b-2kd038ssw5] { background: var(--right-soft); border-color: var(--right); }
.is-wrong .tile.placed[b-2kd038ssw5] { background: var(--wrong-soft); border-color: var(--wrong); }

/* ---------- Feedback ---------- */
.feedback[b-2kd038ssw5] {
    display: grid;
    gap: .5rem;
    padding: .8rem;
    border-radius: 12px;
    background: var(--right-soft);
    animation: pop-in-b-2kd038ssw5 .2s ease-out;
}

.is-wrong .feedback[b-2kd038ssw5] { background: var(--wrong-soft); }

.verdict[b-2kd038ssw5] { margin: 0; font-size: 1.2rem; font-weight: bold; color: #146c43; }
.is-wrong .verdict[b-2kd038ssw5] { color: var(--wrong); }

.small[b-2kd038ssw5] { margin: 0; font-size: .95rem; }

.meaning-box[b-2kd038ssw5] { display: grid; gap: .25rem; padding: .6rem .75rem; border-radius: 10px; background: #fff; }
    .meaning-box p[b-2kd038ssw5] { margin: 0; line-height: 1.45; }
.teaching-note[b-2kd038ssw5] { display: flex; gap: .4rem; margin-top: .45rem !important; padding: .5rem .6rem; border-left: 4px solid #f59f00; background: #fff9db; color: #664d03; }
.fb-term[b-2kd038ssw5] { font-size: 1.25rem; font-weight: bold; }
.fa[b-2kd038ssw5] { font-family: Vazirmatn, Tahoma, 'Segoe UI', sans-serif; font-size: 1.15rem; color: var(--accent); }

.context[b-2kd038ssw5] {
    margin: .2rem 0 0;
    padding: .4rem .7rem;
    border-left: 4px solid var(--accent-soft);
    background: #fafafa;
    border-radius: 0 8px 8px 0;
    font-style: italic;
    overflow-wrap: anywhere;
}

    .context mark[b-2kd038ssw5] { background: #fff3b0; font-style: normal; font-weight: bold; border-radius: 3px; }

/* "Which grammar is in this line?": the line is the question. */
.context.line-prompt[b-2kd038ssw5] {
    margin: .3rem 0 .6rem;
    font-size: 1.25rem;
    font-style: normal;
    text-align: center;
    border-left: none;
    border-radius: 8px;
}

/* "Find the mistake": the wrong word, struck through in red. */
.context mark.wrong-word[b-2kd038ssw5] { background: var(--wrong-soft); color: var(--wrong); text-decoration: line-through; text-decoration-thickness: 2px; }

/* ---------- Buttons ---------- */
.row[b-2kd038ssw5] { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .5rem; }

.btn-sketch[b-2kd038ssw5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 44px;
    padding: .45rem 1rem;
    font: inherit;
    font-weight: bold;
    color: var(--ink);
    background: #fff;
    border: 2px solid var(--ink);
    border-radius: 10px 4px 10px 4px;
    box-shadow: 2px 2px 0 var(--ink);
    cursor: pointer;
}

    .btn-sketch.primary[b-2kd038ssw5] { background: var(--ink); color: #fff; }
    .btn-sketch.primary:disabled[b-2kd038ssw5] { opacity: .5; cursor: default; }
    .btn-sketch.big[b-2kd038ssw5] { min-height: 52px; font-size: 1.1rem; padding: 0 1.4rem; }
    .btn-sketch.again[b-2kd038ssw5] { border-color: var(--wrong); color: var(--wrong); flex: 1; }
    .btn-sketch.good[b-2kd038ssw5] { border-color: var(--right); color: #146c43; flex: 1; }

.link-btn[b-2kd038ssw5] {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: 0 .3rem;
    border: none;
    background: transparent;
    font: inherit;
    font-weight: bold;
    color: var(--accent);
    cursor: pointer;
}

kbd[b-2kd038ssw5] {
    font-family: inherit;
    font-size: .7rem;
    padding: 0 .3rem;
    border: 1px solid currentColor;
    border-radius: 4px;
    opacity: .7;
}

.choice:focus-visible[b-2kd038ssw5], .tile:focus-visible[b-2kd038ssw5], .btn-sketch:focus-visible[b-2kd038ssw5], .link-btn:focus-visible[b-2kd038ssw5] {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

@keyframes slide-in-b-2kd038ssw5 { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes pop-in-b-2kd038ssw5 { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@keyframes shake-b-2kd038ssw5 { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* Phones: keep the next action under the thumb; big feedback button spans the row. */
@media (max-width: 575.98px) {
    .feedback .btn-sketch.big[b-2kd038ssw5] { flex: 1 1 100%; }
    kbd[b-2kd038ssw5] { display: none; }
}

@media (min-width: 576px) {
    .exercise[b-2kd038ssw5] { padding: 1.25rem; }
    .choices.two-col[b-2kd038ssw5] { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .exercise[b-2kd038ssw5], .feedback[b-2kd038ssw5], .choice.wrong[b-2kd038ssw5] { animation: none; }
}

/* "My videos": the learner's file isn't open on this device. */
.own-file-missing[b-2kd038ssw5] {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .4rem; padding: 1rem; text-align: center; background: #fffbea; color: #2b2b2b; font-size: .95rem;
}
    .own-file-missing i[b-2kd038ssw5] { font-size: 1.6rem; }
    .own-file-missing a[b-2kd038ssw5] { font-weight: bold; }

/* Type it from memory */
.gap.recall[b-2kd038ssw5] { display: block; width: 100%; max-width: 26rem; margin: .2rem auto 0; height: 2.6rem; text-align: center; }
.recall-clue[b-2kd038ssw5] { margin: 0; padding: .45rem .7rem; border-radius: 10px; background: #f1f3f5; color: #343a40; }
    .recall-clue .bi[b-2kd038ssw5] { margin-right: .3rem; color: #5c7cfa; }
/* /Pages/review/Review.razor.rz.scp.css */
/* Review (video flashcards) — mobile first, same hand-drawn look as the rest of the site. */

.review[b-hja9qmhuth] {
    --ink: #2b2b2b;
    --muted: #6b6b6b;
    --paper: #fff;
    --accent: #0d6efd;
    --accent-soft: #e8f0ff;
    --yellow: #ffcc00;

    font-family: 'Comic Neue', Vazirmatn, 'Comic Sans MS', sans-serif;
    color: var(--ink);
    max-width: 760px;
    margin: 0 auto;
    padding: .75rem .75rem 3rem;
}

.review-head[b-hja9qmhuth] { display: grid; gap: .75rem; margin-bottom: 1rem; }
    .review-head h1[b-hja9qmhuth] { margin: 0; font-size: 1.8rem; }
.sub[b-hja9qmhuth] { margin: .2rem 0 0; color: var(--muted); }

.stats[b-hja9qmhuth] { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }

.stat[b-hja9qmhuth] {
    padding: .6rem .7rem;
    border: 2px solid var(--ink);
    border-radius: 12px 4px 12px 4px;
    background: var(--paper);
    display: flex;
    flex-direction: column;
}

    .stat strong[b-hja9qmhuth] { font-size: 1.3rem; line-height: 1.2; }
    .stat span[b-hja9qmhuth] { font-size: .8rem; color: var(--muted); }
    .stat strong small[b-hja9qmhuth] { font-size: .85rem; color: var(--muted); }
    .stat.streak .bi-fire[b-hja9qmhuth] { color: #c9c9c9; }
    .stat.streak.on .bi-fire[b-hja9qmhuth] { color: #f97316; }

.goal-bar[b-hja9qmhuth] { height: 6px; margin-top: .3rem; background: #eee; border-radius: 999px; overflow: hidden; }
    .goal-bar div[b-hja9qmhuth] { height: 100%; background: #198754; }

.tabs[b-hja9qmhuth] { display: flex; gap: .4rem; margin-bottom: 1rem; }

    .tabs button[b-hja9qmhuth] {
        min-height: 44px;
        flex: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .4rem;
        border: 2px solid var(--ink);
        border-radius: 12px;
        background: var(--paper);
        font: inherit;
        cursor: pointer;
    }

        .tabs button.active[b-hja9qmhuth] { background: var(--ink); color: #fff; }

    .tabs .count[b-hja9qmhuth] { font-size: .75rem; padding: 0 .45rem; border-radius: 999px; background: rgba(0,0,0,.1); }
    .tabs button.active .count[b-hja9qmhuth] { background: rgba(255,255,255,.2); }
    .tabs .count.due[b-hja9qmhuth] { background: #dc3545; color: #fff; }

/* ---------- Buttons & states ---------- */
.btn-sketch[b-hja9qmhuth] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 44px;
    padding: .45rem 1rem;
    font: inherit;
    font-weight: bold;
    color: var(--ink);
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 10px 4px 10px 4px;
    box-shadow: 2px 2px 0 var(--ink);
    text-decoration: none;
    cursor: pointer;
}

    .btn-sketch.primary[b-hja9qmhuth] { background: var(--ink); color: #fff; }
    .btn-sketch.big[b-hja9qmhuth] { min-height: 52px; font-size: 1.1rem; padding: 0 1.5rem; }
    .btn-sketch small[b-hja9qmhuth] { font-weight: normal; opacity: .8; }

kbd[b-hja9qmhuth] {
    font-family: inherit;
    font-size: .7rem;
    padding: 0 .3rem;
    border: 1px solid currentColor;
    border-radius: 4px;
    opacity: .7;
}

.state-box[b-hja9qmhuth], .start-card[b-hja9qmhuth] {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--muted);
}

    .state-box > i[b-hja9qmhuth], .done-icon[b-hja9qmhuth] { display: block; font-size: 2.5rem; color: var(--ink); margin-bottom: .5rem; }
    .start-card h2[b-hja9qmhuth], .state-box h2[b-hja9qmhuth] { color: var(--ink); font-size: 1.4rem; }

.start-card[b-hja9qmhuth] {
    border: 2px solid var(--ink);
    border-radius: 16px 6px 18px 8px;
    background: #fffdf3;
    box-shadow: 3px 3px 0 var(--ink);
}

.actions[b-hja9qmhuth] { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 1rem; }

.spinner[b-hja9qmhuth] {
    width: 26px; height: 26px; display: inline-block;
    border: 3px solid rgba(0,0,0,.15); border-top-color: var(--ink); border-radius: 50%;
    animation: spin-b-hja9qmhuth .8s linear infinite;
}

@keyframes spin-b-hja9qmhuth { to { transform: rotate(360deg); } }

/* ---------- Start & summary ---------- */
.eyebrow[b-hja9qmhuth] { margin: 0; font-size: .85rem; font-weight: bold; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); }
.hint[b-hja9qmhuth] { margin: .75rem 0 0; font-size: .85rem; }

.kinds[b-hja9qmhuth] { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin: .5rem 0 1.1rem; padding: 0; }
    .kinds li[b-hja9qmhuth] { padding: .2rem .65rem; border: 2px dashed #c9c9c9; border-radius: 999px; background: #fff; color: var(--ink); font-size: .85rem; }
    .kinds i[b-hja9qmhuth] { color: var(--accent); }

.round-summary[b-hja9qmhuth] {
    text-align: center;
    padding: 1.5rem 1rem;
    border: 2px solid var(--ink);
    border-radius: 16px 6px 18px 8px;
    background: #fffdf3;
    box-shadow: 3px 3px 0 var(--ink);
    animation: pop-in-b-hja9qmhuth .25s ease-out;
}

    .round-summary h2[b-hja9qmhuth] { font-size: 1.5rem; }
    .round-summary .bi-trophy[b-hja9qmhuth] { color: #e0a800; }

.score-grid[b-hja9qmhuth] { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: 1rem 0; }
    .score-grid div[b-hja9qmhuth] { display: flex; flex-direction: column; padding: .6rem .3rem; border: 2px solid var(--ink); border-radius: 12px 4px 12px 4px; background: #fff; }
    .score-grid strong[b-hja9qmhuth] { font-size: 1.35rem; }
    .score-grid span[b-hja9qmhuth] { font-size: .8rem; color: var(--muted); }
    .score-grid .bi-lightning-charge-fill[b-hja9qmhuth] { color: #f59e0b; }

.goal-done[b-hja9qmhuth] { margin: 0 0 1rem; padding: .5rem; border-radius: 10px; background: #e9f7ef; color: #146c43; font-weight: bold; }

.to-work[b-hja9qmhuth] { text-align: left; margin-top: .5rem; }
    .to-work h3[b-hja9qmhuth] { font-size: 1.1rem; margin: 0 0 .4rem; }
    .to-work ul[b-hja9qmhuth] { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
    .to-work li[b-hja9qmhuth] { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; padding: .5rem .7rem; border-radius: 10px; background: #fff; border: 2px solid #f1c4c9; }
    .to-work small[b-hja9qmhuth] { flex-basis: 100%; color: var(--muted); }

.fa[b-hja9qmhuth] { font-family: Vazirmatn, Tahoma, 'Segoe UI', sans-serif; color: var(--accent); }

/* ---------- Round bar ---------- */
.round-bar[b-hja9qmhuth] { display: flex; align-items: center; gap: .6rem; margin-bottom: .75rem; }
    .round-bar .icon-btn:hover[b-hja9qmhuth] { background: #eee; color: var(--ink); }

.progress-line[b-hja9qmhuth] { flex: 1; height: 12px; background: #eee; border: 2px solid var(--ink); border-radius: 999px; overflow: hidden; }
    .progress-line div[b-hja9qmhuth] { height: 100%; background: #198754; transition: width .3s ease; }

.combo[b-hja9qmhuth] {
    min-width: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    padding: .2rem .5rem;
    border-radius: 999px;
    font-weight: bold;
    color: var(--muted);
}

    .combo.hot[b-hja9qmhuth] { background: #fff3cd; color: #b45309; animation: pulse-b-hja9qmhuth .4s ease-out; }

.practice-note[b-hja9qmhuth] { margin: -.25rem 0 .75rem; font-size: .85rem; color: var(--muted); }

@keyframes pop-in-b-hja9qmhuth { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@keyframes pulse-b-hja9qmhuth { 50% { transform: scale(1.15); } }

/* ---------- My cards ---------- */
.search-box[b-hja9qmhuth] {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 44px;
    padding: 0 .9rem;
    margin-bottom: .75rem;
    border: 2px solid var(--ink);
    border-radius: 12px 4px 12px 4px;
    background: var(--paper);
}

    .search-box input[b-hja9qmhuth] { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font: inherit; font-size: 1rem; }

.card-list[b-hja9qmhuth] { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }

.card-row[b-hja9qmhuth] {
    display: flex;
    gap: .5rem;
    align-items: flex-start;
    padding: .75rem;
    border: 2px solid var(--ink);
    border-radius: 12px 4px 12px 4px;
    background: var(--paper);
}

.card-main[b-hja9qmhuth] { flex: 1; min-width: 0; }
    .card-title[b-hja9qmhuth] { display: flex; align-items: center; gap: .5rem; }

.stage[b-hja9qmhuth] { font-size: .7rem; font-weight: bold; padding: .05rem .5rem; border-radius: 999px; }
    .stage.new[b-hja9qmhuth] { background: var(--accent-soft); color: #0a58ca; }
    .stage.learning[b-hja9qmhuth] { background: #fff3cd; color: #a16207; }
    .stage.strong[b-hja9qmhuth] { background: #e9f7ef; color: #146c43; }
    .card-main strong[b-hja9qmhuth] { font-size: 1.1rem; }
    .card-main .translation[b-hja9qmhuth] { margin-left: .5rem; font-family: Vazirmatn, Tahoma, sans-serif; color: var(--accent); }
    .card-main p[b-hja9qmhuth] { margin: .2rem 0; font-size: .95rem; }
    .card-main small[b-hja9qmhuth] { color: var(--muted); }

.icon-btn[b-hja9qmhuth] {
    width: 44px; height: 44px; flex: 0 0 auto;
    border: none; border-radius: 50%; background: transparent; cursor: pointer; font-size: 1.1rem;
}

    .icon-btn:hover[b-hja9qmhuth] { background: #fdecec; color: #b02a37; }
    .icon-btn:disabled[b-hja9qmhuth] { opacity: .4; }

.pager[b-hja9qmhuth] { display: flex; justify-content: center; align-items: center; gap: .75rem; margin-top: .75rem; color: var(--muted); }

.btn-sketch:focus-visible[b-hja9qmhuth], .tabs button:focus-visible[b-hja9qmhuth], .icon-btn:focus-visible[b-hja9qmhuth], .link-btn:focus-visible[b-hja9qmhuth] {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

@media (min-width: 576px) {
    .review[b-hja9qmhuth] { padding: 1.25rem 1rem 3rem; }
}

@media (prefers-reduced-motion: reduce) {
    .spinner[b-hja9qmhuth] { animation-duration: 2s; }
    .progress-line div[b-hja9qmhuth] { transition: none; }
    .round-summary[b-hja9qmhuth], .combo.hot[b-hja9qmhuth] { animation: none; }
}


/* A plan limit reached during a round (admin → Plans). */
.plan-limit-note[b-hja9qmhuth] { margin: .5rem 0 0; color: #842029; font-size: .9rem; }
.plan-limit-note a[b-hja9qmhuth] { font-weight: bold; }

/* ---------- Review quick wins: due split, undo, My words filters, edit and pause ---------- */
.due-split[b-hja9qmhuth] { display: flex; justify-content: center; flex-wrap: wrap; gap: .75rem; margin: .25rem 0 0; font-size: .9rem; color: var(--muted); }
    .due-split span[b-hja9qmhuth] { display: inline-flex; align-items: center; gap: .3rem; }
    .due-split i[b-hja9qmhuth] { color: var(--accent); }

.undo-link[b-hja9qmhuth] { display: inline-flex; align-items: center; gap: .3rem; margin: .5rem auto 0; }

.card-filters[b-hja9qmhuth] { display: flex; flex-wrap: wrap; gap: .4rem; margin: -.25rem 0 .75rem; }
    .card-filters .chip[b-hja9qmhuth] {
        display: inline-flex; align-items: center; gap: .3rem;
        min-height: 36px; padding: .2rem .8rem;
        border: 2px solid var(--ink); border-radius: 999px; background: var(--paper);
        font: inherit; font-size: .9rem; cursor: pointer;
    }
    .card-filters .chip.active[b-hja9qmhuth] { background: var(--ink); color: #fff; }
    .card-filters .chip:focus-visible[b-hja9qmhuth] { outline: 3px solid var(--accent); outline-offset: 2px; }

.card-error[b-hja9qmhuth] { margin: 0 0 .75rem; color: #842029; font-size: .9rem; }

.stage.paused[b-hja9qmhuth] { background: #eee; color: #555; }
.stage.tricky[b-hja9qmhuth] { display: inline-flex; align-items: center; gap: .2rem; background: #fdecec; color: #b02a37; }
.card-row.paused[b-hja9qmhuth] { border-style: dashed; }
    .card-row.paused .card-main[b-hja9qmhuth] { opacity: .65; }

.card-actions[b-hja9qmhuth] { display: flex; flex: 0 0 auto; }
    .card-actions .icon-btn:not(:last-child):hover[b-hja9qmhuth] { background: #eee; color: var(--ink); }

.card-row.editing[b-hja9qmhuth] { display: block; }
.card-editor[b-hja9qmhuth] { display: grid; gap: .6rem; }
    .card-editor label[b-hja9qmhuth] { display: grid; gap: .25rem; }
    .card-editor label span[b-hja9qmhuth] { font-size: .8rem; font-weight: bold; color: var(--muted); }
    .card-editor input[b-hja9qmhuth], .card-editor textarea[b-hja9qmhuth] {
        width: 100%; padding: .5rem .65rem;
        border: 2px solid var(--ink); border-radius: 8px; background: #fff; font: inherit;
    }
    .card-editor input[dir="rtl"][b-hja9qmhuth] { font-family: Vazirmatn, Tahoma, sans-serif; }
    .card-editor input:focus[b-hja9qmhuth], .card-editor textarea:focus[b-hja9qmhuth] { outline: 3px solid var(--accent-soft); border-color: var(--accent); }
.card-editor-actions[b-hja9qmhuth] { display: flex; justify-content: flex-end; gap: .5rem; }

@media (max-width: 420px) {
    .card-actions[b-hja9qmhuth] { flex-direction: column; }
}

/* ---------- My words: sort, select several, export, scenes ---------- */
.card-toolbar[b-hja9qmhuth] { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; margin: 0 0 .75rem; }
.card-sort[b-hja9qmhuth] { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--muted); }
    .card-sort select[b-hja9qmhuth] { min-height: 36px; padding: .2rem .6rem; border: 2px solid var(--ink); border-radius: 8px; background: var(--paper); font: inherit; color: var(--ink); }
.card-toolbar-actions[b-hja9qmhuth] { display: flex; gap: .4rem; align-items: center; }
.card-toolbar .chip[b-hja9qmhuth], .export-menu summary[b-hja9qmhuth] {
    display: inline-flex; align-items: center; gap: .3rem;
    min-height: 36px; padding: .2rem .8rem;
    border: 2px solid var(--ink); border-radius: 999px; background: var(--paper);
    font: inherit; font-size: .9rem; cursor: pointer; list-style: none;
}
    .card-toolbar .chip.active[b-hja9qmhuth] { background: var(--ink); color: #fff; }
.export-menu[b-hja9qmhuth] { position: relative; }
    .export-menu summary[b-hja9qmhuth]::-webkit-details-marker { display: none; }
    .export-menu[open] summary[b-hja9qmhuth] { background: var(--ink); color: #fff; }
.export-options[b-hja9qmhuth] {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; width: 230px;
    display: grid; padding: .3rem; border: 2px solid var(--ink); border-radius: 10px; background: #fff;
    box-shadow: 3px 3px 0 var(--ink);
}
    .export-options button[b-hja9qmhuth] { display: grid; gap: .05rem; padding: .5rem .6rem; border: none; border-radius: 6px; background: none; text-align: left; font: inherit; cursor: pointer; }
    .export-options button:hover[b-hja9qmhuth], .export-options button:focus-visible[b-hja9qmhuth] { background: var(--accent-soft); }
    .export-options small[b-hja9qmhuth] { color: var(--muted); font-size: .78rem; }

.bulk-bar[b-hja9qmhuth] {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
    margin: 0 0 .75rem; padding: .5rem .75rem;
    border: 2px dashed #c9c9c9; border-radius: 10px; background: #fafafa;
}
    .bulk-bar.active[b-hja9qmhuth] { position: sticky; top: .5rem; z-index: 4; border-style: solid; border-color: var(--ink); background: #fffbe6; }
    .bulk-bar .btn-sketch[b-hja9qmhuth] { min-height: 36px; padding: .2rem .7rem; font-size: .9rem; }
    .bulk-bar .btn-sketch.danger[b-hja9qmhuth] { background: #b02a37; border-color: #b02a37; color: #fff; box-shadow: 2px 2px 0 #6b1520; }
.bulk-all[b-hja9qmhuth] { display: inline-flex; align-items: center; gap: .5rem; margin-right: auto; font-weight: bold; font-size: .9rem; cursor: pointer; }
.bulk-all input[b-hja9qmhuth], .card-check input[b-hja9qmhuth] { width: 18px; height: 18px; accent-color: var(--ink); cursor: pointer; }
.card-check[b-hja9qmhuth] { display: flex; align-items: flex-start; padding-top: .3rem; cursor: pointer; }
.card-row.selected[b-hja9qmhuth] { background: #fffbe6; }

.card-notice[b-hja9qmhuth] { margin: 0 0 .75rem; color: #146c43; font-size: .9rem; }
.scene-count[b-hja9qmhuth] { display: inline-flex; align-items: center; gap: .25rem; font-weight: bold; color: var(--accent); cursor: help; }
.recall[b-hja9qmhuth] { color: var(--muted); }

@media (max-width: 420px) {
    .tabs button[b-hja9qmhuth] { font-size: .9rem; gap: .25rem; padding: 0 .25rem; }
}

/* New words a day (separate from the daily goal) */
.new-per-day[b-hja9qmhuth] { display: inline-flex; align-items: center; gap: .45rem; margin-top: 1rem; font-size: .85rem; color: var(--muted); }
    .new-per-day select[b-hja9qmhuth] { padding: .15rem .4rem; border: 2px solid var(--ink); border-radius: 8px; background: #fff; color: var(--ink); font: inherit; }

/* Round summary: how each word went */
.result-groups[b-hja9qmhuth] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; margin: .75rem 0; }
    .result-groups .rg[b-hja9qmhuth] { display: grid; gap: .1rem; padding: .45rem .5rem; border: 2px solid var(--ink); border-radius: 10px; background: #fff; }
    .result-groups strong[b-hja9qmhuth] { font-size: 1.3rem; }
    .result-groups span[b-hja9qmhuth] { font-size: .8rem; color: var(--muted); }
    .result-groups .own[b-hja9qmhuth] { border-color: #2f9e44; }
    .result-groups .help[b-hja9qmhuth] { border-color: #f08c00; }
    .result-groups .again[b-hja9qmhuth] { border-color: #e03131; }
.to-work .next-step[b-hja9qmhuth] { color: #364fc7; }
.to-work .repair-link[b-hja9qmhuth] { padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: .85rem; text-decoration: underline; cursor: pointer; }
.to-work .again-btn[b-hja9qmhuth] { margin-top: .6rem; }

/* Targeted practice */
.targeted[b-hja9qmhuth] { margin-top: 1.1rem; padding-top: .8rem; border-top: 2px dashed #ddd; }
.targeted-title[b-hja9qmhuth] { margin: 0 0 .45rem; font-size: .9rem; font-weight: bold; }
    .targeted-title small[b-hja9qmhuth] { font-weight: normal; color: var(--muted); }
.targeted-row[b-hja9qmhuth] { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
    .targeted .chip[b-hja9qmhuth] { padding: .25rem .7rem; border: 2px solid var(--ink); border-radius: 999px; background: #fff; color: var(--ink); font: inherit; font-size: .85rem; cursor: pointer; }
    .targeted .chip:disabled[b-hja9qmhuth] { opacity: .5; cursor: default; }
.episode-pick[b-hja9qmhuth] { display: inline-flex; gap: .3rem; }
    .episode-pick select[b-hja9qmhuth] { max-width: 14rem; padding: .2rem .4rem; border: 2px solid var(--ink); border-radius: 999px; background: #fff; font: inherit; font-size: .85rem; }

/* Repair a card in My words */
.card-row[b-hja9qmhuth] { flex-wrap: wrap; }
.card-repair-row[b-hja9qmhuth] { flex-basis: 100%; }

/* Also due today (grammar, collocations) and starter sets */
.also-due[b-hja9qmhuth] { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .4rem; margin-top: 1rem; font-size: .9rem; }
    .also-due .chip[b-hja9qmhuth] { padding: .2rem .7rem; border: 2px solid var(--ink); border-radius: 999px; background: var(--accent-soft); color: var(--ink); text-decoration: none; font-size: .85rem; }
.starter-more[b-hja9qmhuth] { margin-top: .9rem; text-align: left; }
    .starter-more summary[b-hja9qmhuth] { cursor: pointer; font-size: .9rem; font-weight: bold; text-align: center; }
/* /Pages/review/ReviewProgress.razor.rz.scp.css */
/* Review → Progress. Same sketchy cards as the rest of the Practise page. Sequential blue for magnitude. */

.pg[b-x5dm1t799m] { display: grid; gap: .5rem; }

.pg-kpis[b-x5dm1t799m] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.pg-kpi[b-x5dm1t799m] { display: flex; flex-direction: column; padding: .7rem .8rem; border: 2px solid #2b2b2b; border-radius: 12px 4px 12px 4px; background: #fff; }
    .pg-kpi strong[b-x5dm1t799m] { font-size: 1.5rem; line-height: 1.1; color: #2b2b2b; }
    .pg-kpi strong small[b-x5dm1t799m] { font-size: .85rem; color: #6b6b6b; }
    .pg-kpi strong i[b-x5dm1t799m] { color: #e8590c; font-size: 1.2rem; }
    .pg-kpi span[b-x5dm1t799m] { font-size: .8rem; color: #6b6b6b; }

.pg-title[b-x5dm1t799m] { margin: 1rem 0 .25rem; font-size: 1.1rem; color: #2b2b2b; }
    .pg-title small[b-x5dm1t799m] { font-size: .8rem; font-weight: normal; color: #6b6b6b; margin-left: .35rem; }
.pg-empty[b-x5dm1t799m] { margin: 0; color: #6b6b6b; font-size: .9rem; }

.pg-stages[b-x5dm1t799m] { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .4rem; margin: 0; padding: 0; list-style: none; }
    .pg-stages li[b-x5dm1t799m] { display: flex; flex-direction: column; align-items: center; padding: .5rem .25rem; border-radius: 10px; border: 2px solid transparent; }
    .pg-stages strong[b-x5dm1t799m] { font-size: 1.3rem; color: #2b2b2b; }
    .pg-stages span[b-x5dm1t799m] { display: inline-flex; align-items: center; gap: .2rem; font-size: .8rem; color: #444; }
    .pg-stages .new[b-x5dm1t799m] { background: #e8f0ff; }
    .pg-stages .learning[b-x5dm1t799m] { background: #fff3cd; }
    .pg-stages .strong[b-x5dm1t799m] { background: #e9f7ef; }
    .pg-stages .paused[b-x5dm1t799m] { background: #f1f1f1; }
    .pg-stages .tricky[b-x5dm1t799m] { background: #fdecec; }

/* ---------- Forecast: one series, columns from a shared baseline ---------- */
.pg-forecast[b-x5dm1t799m] { display: grid; grid-template-columns: auto 1fr; grid-template-rows: 140px auto auto; gap: .25rem .4rem; margin: 0; padding: .75rem; border: 2px solid #2b2b2b; border-radius: 12px 4px 12px 4px; background: #fcfcfb; }
.pg-forecast-axis[b-x5dm1t799m] { display: flex; flex-direction: column; justify-content: space-between; font-size: .7rem; color: #6b6b6b; text-align: right; }
.pg-forecast-bars[b-x5dm1t799m] { display: flex; align-items: flex-end; gap: 2px; border-bottom: 1px solid #c9c9c9; }
.pg-bar-slot[b-x5dm1t799m] { flex: 1; height: 100%; display: flex; align-items: flex-end; cursor: default; }
    .pg-bar-slot:hover .pg-bar[b-x5dm1t799m] { background: #184f95; }
.pg-bar[b-x5dm1t799m] { width: 100%; background: #2a78d6; border-radius: 4px 4px 0 0; transition: background .15s; }
    .pg-bar.today[b-x5dm1t799m] { background: #104281; }
.pg-forecast-labels[b-x5dm1t799m] { grid-column: 2; display: flex; justify-content: space-between; font-size: .7rem; color: #6b6b6b; }
.pg-forecast figcaption[b-x5dm1t799m] { grid-column: 1 / -1; font-size: .8rem; color: #6b6b6b; }

/* ---------- Year calendar: sequential blue, 0 = neutral ---------- */
.pg-year[b-x5dm1t799m] { margin: 0; padding: .75rem; border: 2px solid #2b2b2b; border-radius: 12px 4px 12px 4px; background: #fcfcfb; }
/* row-reverse: a scrolled year opens at its right end, so the latest weeks show first on a phone */
.pg-year-scroll[b-x5dm1t799m] { display: flex; flex-direction: row-reverse; overflow-x: auto; padding-bottom: .25rem; }
.pg-calendar[b-x5dm1t799m] { display: flex; gap: 3px; width: max-content; }
.pg-week[b-x5dm1t799m] { display: flex; flex-direction: column; gap: 3px; }
.pg-day[b-x5dm1t799m] { display: inline-block; width: 11px; height: 11px; border-radius: 2px; background: #eceae6; }
    .pg-day.blank[b-x5dm1t799m] { background: transparent; }
    .pg-day.l1[b-x5dm1t799m] { background: #b7d3f6; }
    .pg-day.l2[b-x5dm1t799m] { background: #6da7ec; }
    .pg-day.l3[b-x5dm1t799m] { background: #2a78d6; }
    .pg-day.l4[b-x5dm1t799m] { background: #184f95; }
.pg-legend[b-x5dm1t799m] { display: flex; align-items: center; justify-content: flex-end; gap: 3px; margin-top: .5rem; font-size: .75rem; color: #6b6b6b; }
    .pg-legend .pg-day[b-x5dm1t799m] { margin: 0 1px; }

/* ---------- By exercise ---------- */
.pg-table[b-x5dm1t799m] { width: 100%; border-collapse: collapse; background: #fff; border: 2px solid #2b2b2b; border-radius: 8px; overflow: hidden; font-size: .9rem; }
    .pg-table th[b-x5dm1t799m], .pg-table td[b-x5dm1t799m] { padding: .45rem .7rem; text-align: left; border-bottom: 1px solid #eee; }
    .pg-table th[b-x5dm1t799m] { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: #6b6b6b; background: #fafafa; }
    .pg-table td:not(:first-child)[b-x5dm1t799m], .pg-table th:not(:first-child)[b-x5dm1t799m] { text-align: right; font-variant-numeric: tabular-nums; }
    .pg-table i[b-x5dm1t799m] { color: #0d6efd; margin-right: .3rem; }

@media (max-width: 520px) {
    .pg-kpis[b-x5dm1t799m] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pg-stages[b-x5dm1t799m] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pg-forecast[b-x5dm1t799m] { grid-template-rows: 110px auto auto; }
}
/* /Pages/review/SameMeaningPrompt.razor.rz.scp.css */
.same-meaning[b-by48qbodhw] { display: grid; gap: .4rem; margin: .5rem 0; padding: .55rem .75rem; border: 2px dashed #c9c9c9; border-radius: 10px; background: #fffdf3; color: #2b2b2b; font-size: .9rem; text-align: left; }
    .same-meaning p[b-by48qbodhw] { margin: 0; }
    .same-meaning em[b-by48qbodhw] { color: #555; }
    .same-meaning.done[b-by48qbodhw] { border-style: solid; border-color: #b2dfc6; background: #f1fbf5; color: #18704c; }
.sm-actions[b-by48qbodhw] { display: flex; flex-wrap: wrap; gap: .4rem; }
.sm-btn[b-by48qbodhw] { padding: .2rem .7rem; border: 2px solid #2b2b2b; border-radius: 999px; background: #fff; color: #2b2b2b; font: inherit; font-size: .85rem; cursor: pointer; }
    .sm-btn.primary[b-by48qbodhw] { background: #2b2b2b; color: #fff; }
.sm-option[b-by48qbodhw] { display: flex; align-items: center; gap: .4rem; }
.sm-meaning[b-by48qbodhw] { flex: 1; min-width: 0; padding: .25rem .5rem; border: 2px solid #2b2b2b; border-radius: 8px; font: inherit; }
.sm-error[b-by48qbodhw] { color: #b02a37; }
/* /Pages/review/SaveState.razor.rz.scp.css */
.save-state[b-licmhad52s] { display: flex; align-items: center; justify-content: flex-end; gap: .35rem; margin: -.4rem 0 .6rem; font-size: .8rem; color: var(--muted); }
    .save-state.failed[b-licmhad52s] { justify-content: center; padding: .4rem .7rem; border: 2px solid #e8a3a3; border-radius: 10px; background: #fff5f5; color: #a61e1e; font-weight: bold; }
    .save-state.saving i[b-licmhad52s] { animation: save-spin-b-licmhad52s 1s linear infinite; }
    .save-state .link-btn[b-licmhad52s] { margin-left: .25rem; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }

@keyframes save-spin-b-licmhad52s { to { transform: rotate(360deg); } }
/* /Pages/review/StarterSets.razor.rz.scp.css */
.starter-sets[b-nk4az68y7m] { display: grid; gap: .6rem; margin-top: .8rem; text-align: left; }
.starter[b-nk4az68y7m] { display: grid; gap: .35rem; padding: .7rem .85rem; border: 2px solid #2b2b2b; border-radius: 14px 6px 14px 6px; background: #fff; }
    .starter header[b-nk4az68y7m] { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .5rem; }
    .starter header small[b-nk4az68y7m] { color: #6b6b6b; }
    .starter p[b-nk4az68y7m] { margin: 0; font-size: .9rem; }
    .starter .sample[b-nk4az68y7m] { color: #555; font-style: italic; }
    .starter .btn-sketch[b-nk4az68y7m] { justify-self: start; }
    .starter .added[b-nk4az68y7m] { color: #18704c; }
.lvl[b-nk4az68y7m] { padding: 0 .35rem; border: 1px solid #a7b3af; border-radius: 5px; font-size: .75rem; font-weight: bold; }
/* /Pages/search/AdvancedSearch.razor.rz.scp.css */
/* Advanced search — the same hand-drawn look as the home search, mobile first. */

.adv[b-d652zz88q6] {
    --ink: #2b2b2b;
    --muted: #6b6b6b;
    --paper: #fff;
    --accent: #0d6efd;
    --accent-soft: #e8f0ff;
    --yellow: #ffcc00;

    font-family: 'Comic Neue', Vazirmatn, 'Comic Sans MS', sans-serif;
    color: var(--ink);
    max-width: 1100px;
    margin: 0 auto;
    padding: .5rem .75rem 3rem;
}

.adv-head[b-d652zz88q6] { text-align: center; padding: 1rem 0 .5rem; }
.adv-head h1[b-d652zz88q6] { font-size: clamp(1.7rem, 5vw, 2.4rem); margin: .25rem 0 .5rem; }
.adv-head .lead[b-d652zz88q6] { color: var(--muted); max-width: 36rem; margin: 0 auto 1.25rem; font-size: 1.05rem; }
.adv-back[b-d652zz88q6] { display: inline-flex; gap: .3rem; align-items: center; color: var(--muted); text-decoration: none; font-size: .95rem; }
.adv-back:hover[b-d652zz88q6] { color: var(--ink); }

/* ---------- Search box ---------- */
.adv-form[b-d652zz88q6] {
    display: flex;
    align-items: center;
    gap: .5rem;
    max-width: 40rem;
    margin: 0 auto;
    padding: .45rem .45rem .45rem .9rem;
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 14px 6px 14px 6px;
    box-shadow: 3px 3px 0 var(--ink);
}

    .adv-form:focus-within[b-d652zz88q6] { box-shadow: 3px 3px 0 var(--ink), 0 0 0 4px var(--accent-soft); }
    .adv-form > .bi[b-d652zz88q6] { color: var(--accent); font-size: 1.15rem; }

    .adv-form input[b-d652zz88q6] {
        flex: 1;
        min-width: 0;
        border: none;
        outline: none;
        background: transparent;
        font: inherit;
        font-size: 1.15rem; /* ≥16px: no zoom on iPhone */
        padding: .5rem 0;
    }

        .adv-form input[b-d652zz88q6]::-webkit-search-cancel-button { display: none; }

    .adv-form .go[b-d652zz88q6] {
        flex: 0 0 auto;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        padding: 0 1rem;
        border: 2px solid var(--ink);
        border-radius: 10px 4px 10px 4px;
        background: var(--yellow);
        color: var(--ink);
        font: inherit;
        font-weight: bold;
        cursor: pointer;
    }

        .adv-form .go:disabled[b-d652zz88q6] { opacity: .6; cursor: default; }

.adv-examples[b-d652zz88q6] { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .5rem; margin-top: 1rem; }
.adv-examples > span[b-d652zz88q6] { color: var(--muted); }

.chip[b-d652zz88q6] {
    min-height: 40px;
    padding: 0 .9rem;
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: var(--paper);
    font: inherit;
    color: var(--ink);
    cursor: pointer;
}

    .chip:hover[b-d652zz88q6] { background: var(--accent-soft); }

/* ---------- States ---------- */
.adv-loading[b-d652zz88q6] { display: flex; justify-content: center; align-items: center; gap: .6rem; padding: 2.5rem 1rem; color: var(--muted); }
.spinner[b-d652zz88q6] { width: 22px; height: 22px; border: 3px solid rgba(0, 0, 0, .15); border-top-color: var(--ink); border-radius: 50%; animation: spin-b-d652zz88q6 .8s linear infinite; display: inline-block; }
@keyframes spin-b-d652zz88q6 { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner[b-d652zz88q6] { animation: none; } }

.adv-notice[b-d652zz88q6] { display: flex; gap: .75rem; margin: 1.5rem auto 0; max-width: 40rem; padding: .9rem 1rem; border: 2px solid #f0c36d; border-radius: 12px; background: #fff8e1; }
.adv-notice > i[b-d652zz88q6] { font-size: 1.2rem; color: #b07d00; }
.adv-notice p[b-d652zz88q6] { margin: 0; }
.adv-notice .muted[b-d652zz88q6] { color: var(--muted); margin-top: .35rem; }
.adv-corrected[b-d652zz88q6] { max-width: 40rem; margin: 1.25rem auto 0; padding: .7rem 1rem; border-radius: 12px; background: var(--accent-soft); }
.adv-corrected .bi[b-d652zz88q6] { color: var(--accent); }

/* ---------- Groups and word cards ---------- */
.adv-group[b-d652zz88q6] { margin-top: 2rem; }
.adv-group h2[b-d652zz88q6] { font-size: 1.3rem; margin: 0 0 .25rem; }
.adv-meaning[b-d652zz88q6] { margin: 0 0 .75rem; color: var(--muted); font-style: italic; }

.adv-cards[b-d652zz88q6] { display: grid; grid-template-columns: 1fr; gap: .75rem; margin-top: .6rem; }

.adv-card[b-d652zz88q6] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    min-width: 0;
    padding: .9rem 1rem;
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 16px 6px 18px 8px;
    box-shadow: 2px 2px 0 var(--ink);
}

    .adv-card.main[b-d652zz88q6] { background: #fffbea; box-shadow: 3px 3px 0 var(--yellow), 3px 3px 0 1px var(--ink); }

.adv-card-head[b-d652zz88q6] { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; }
.adv-card-head h3[b-d652zz88q6] { margin: 0; font-size: 1.45rem; overflow-wrap: anywhere; }
.adv-count[b-d652zz88q6] { flex: 0 0 auto; padding: .1rem .6rem; border: 2px solid var(--ink); border-radius: 999px; font-size: .85rem; font-weight: bold; background: var(--paper); }

.adv-lines[b-d652zz88q6] { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.adv-lines li[b-d652zz88q6] { padding: .35rem .6rem; border-radius: 8px; background: #f6f7f8; font-size: .97rem; line-height: 1.4; overflow-wrap: anywhere; }
.adv-lines mark[b-d652zz88q6] { background: #ffe58a; padding: 0 2px; border-radius: 3px; }

.adv-card-actions[b-d652zz88q6] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; }

.btn-sketch[b-d652zz88q6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-height: 40px;
    padding: .35rem .9rem;
    font: inherit;
    font-weight: bold;
    color: var(--ink);
    background: var(--yellow);
    border: 2px solid var(--ink);
    border-radius: 10px 4px 10px 4px;
    box-shadow: 2px 2px 0 var(--ink);
    text-decoration: none;
    cursor: pointer;
}

    .btn-sketch:hover[b-d652zz88q6] { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }

.link-btn[b-d652zz88q6] { border: none; background: none; padding: .25rem 0; font: inherit; color: var(--accent); cursor: pointer; }
.link-btn:hover[b-d652zz88q6] { text-decoration: underline; }

.adv-noscenes[b-d652zz88q6] { margin-top: 1.75rem; color: var(--muted); }
.adv-noscenes strong[b-d652zz88q6] { color: var(--ink); }

@media (min-width: 640px) {
    .adv[b-d652zz88q6] { padding: 1rem 1rem 3rem; }
    .adv-cards[b-d652zz88q6] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
    .adv-cards[b-d652zz88q6] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* The home search's filters, carried over */
.adv-filters[b-d652zz88q6] { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; max-width: 40rem; margin: .75rem auto 0; padding: .45rem .75rem; border-radius: 10px; background: #e7f5ff; color: #1c4f80; font-size: .9rem; }
.adv-filters .link-btn[b-d652zz88q6] { border: 0; background: none; padding: 0; color: inherit; font-weight: bold; text-decoration: underline; cursor: pointer; }
.adv-notice .chip[b-d652zz88q6] { margin-left: auto; align-self: center; }

/* Meanings: part of speech, show more */
.adv-pos[b-d652zz88q6] { margin-left: .4rem; padding: .05rem .45rem; border-radius: 999px; background: #edf2ff; color: #364fc7; font-size: .75rem; font-weight: 600; vertical-align: middle; }
.adv-more[b-d652zz88q6] { margin-top: .5rem; border: 0; background: none; padding: 0; color: #364fc7; font-weight: bold; cursor: pointer; }
.adv-more-meanings[b-d652zz88q6] { display: block; margin: 1rem auto 0; }
.adv-honest[b-d652zz88q6] { max-width: 40rem; margin: 1.25rem auto 0; color: #6b6b6b; font-size: .85rem; text-align: center; }
/* /Pages/search/Search.razor.rz.scp.css */
/* Home / search page — mobile first. Base styles are the phone layout; wider screens put the
   player and the scene list side by side. Hand-drawn look shared with Browse, Listen and Phrases. */

.home[b-tueamhocze] {
    --ink: #2b2b2b;
    --muted: #6b6b6b;
    --paper: #fff;
    --accent: #0d6efd;
    --accent-soft: #e8f0ff;
    --yellow: #ffcc00;
    --sketch: 255px 15px 225px 15px / 15px 225px 15px 255px;

    font-family: 'Comic Neue', Vazirmatn, 'Comic Sans MS', sans-serif;
    color: var(--ink);
    max-width: 1200px;
    margin: 0 auto;
    padding: .5rem .75rem 3rem;
}

    .home.embedded[b-tueamhocze] {
        max-width: none;
        padding: 0;
    }

/* ---------- Landing ---------- */
.hero[b-tueamhocze] {
    text-align: center;
    padding: 1.5rem 0 1rem;
}

    .hero h1[b-tueamhocze] {
        font-size: clamp(1.8rem, 6vw, 3rem);
        line-height: 1.15;
        margin: 0 0 .75rem;
    }

    .hero .lead[b-tueamhocze] {
        font-size: clamp(1rem, 3.5vw, 1.25rem);
        color: var(--muted);
        max-width: 38rem;
        margin: 0 auto 1.5rem;
    }

        .hero .lead strong[b-tueamhocze] { color: var(--ink); }

/* ---------- Search box ---------- */
.search-form[b-tueamhocze] {
    display: flex;
    align-items: center;
    gap: .5rem;
    max-width: 40rem;
    margin: 0 auto;
    padding: .35rem .35rem .35rem .9rem;
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 14px 6px 14px 6px;
    box-shadow: 3px 3px 0 var(--ink);
}

    .search-form:focus-within[b-tueamhocze] { box-shadow: 3px 3px 0 var(--ink), 0 0 0 4px var(--accent-soft); }

    .search-form > .bi-search[b-tueamhocze] { color: var(--muted); font-size: 1.1rem; }

    .search-form input[b-tueamhocze] {
        flex: 1;
        min-width: 0;
        border: none;
        outline: none;
        background: transparent;
        font: inherit;
        font-size: 1.05rem; /* ≥16px: iOS does not zoom in on focus */
        padding: .55rem 0;
    }

        .search-form input[b-tueamhocze]::-webkit-search-cancel-button { display: none; } /* we show our own clear button */

    .search-form .clear[b-tueamhocze] {
        border: none;
        background: transparent;
        color: #b5b5b5;
        font-size: 1.1rem;
        padding: .25rem;
        cursor: pointer;
    }

    .search-form .go[b-tueamhocze] {
        flex: 0 0 auto;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        padding: 0 1rem;
        border: 2px solid var(--ink);
        border-radius: 10px 4px 10px 4px;
        background: var(--yellow);
        color: var(--ink);
        font: inherit;
        font-weight: bold;
        cursor: pointer;
    }

        .search-form .go:hover[b-tueamhocze] { transform: translate(-1px, -1px); box-shadow: 2px 2px 0 var(--ink); }
        .search-form .go:disabled[b-tueamhocze] { opacity: .6; cursor: wait; }
        .search-form .go span[b-tueamhocze] { display: none; } /* phones: arrow only, more room to type */

    .search-form.large[b-tueamhocze] { padding-top: .5rem; padding-bottom: .5rem; }

        .search-form.large input[b-tueamhocze] { font-size: 1.15rem; }

.search-bar[b-tueamhocze] {
    margin-bottom: 1rem;
}

    .search-bar .search-form[b-tueamhocze] { max-width: none; }

/* ---------- Example chips ---------- */
.examples[b-tueamhocze] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    margin-top: 1rem;
}

    .examples > span[b-tueamhocze] { color: var(--muted); }

    .examples.compact[b-tueamhocze] { justify-content: flex-start; margin-top: .5rem; }

.chip[b-tueamhocze] {
    min-height: 40px;
    padding: 0 .9rem;
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: var(--paper);
    font: inherit;
    color: var(--ink);
    cursor: pointer;
}

    .chip:hover[b-tueamhocze] { background: var(--accent-soft); }

/* ---------- How it works ---------- */
.how[b-tueamhocze] {
    display: grid;
    grid-template-columns: 1fr;
    gap: .75rem;
    margin: 2rem 0;
}

.step[b-tueamhocze] {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: .9rem;
    align-items: center;
    padding: 1rem;
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 16px 6px 18px 8px;
    box-shadow: 2px 2px 0 var(--ink);
}

    .step h2[b-tueamhocze] { font-size: 1.15rem; margin: 0; }
    .step p[b-tueamhocze] { grid-column: 2; margin: .15rem 0 0; color: var(--muted); }

.step-icon[b-tueamhocze] {
    grid-row: 1 / span 2;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--yellow);
    border: 2px solid var(--ink);
    font-size: 1.3rem;
}

.browse-cta[b-tueamhocze] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.25rem;
    border: 2px dashed var(--ink);
    border-radius: 16px;
    background: #fffdf3;
}

    .browse-cta h2[b-tueamhocze] { font-size: 1.2rem; margin: 0; }
    .browse-cta p[b-tueamhocze] { margin: .25rem 0 0; color: var(--muted); }

.btn-sketch[b-tueamhocze] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 44px;
    padding: .45rem 1rem;
    font: inherit;
    font-weight: bold;
    color: var(--ink);
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 10px 4px 10px 4px;
    box-shadow: 2px 2px 0 var(--ink);
    text-decoration: none;
    cursor: pointer;
}

    .btn-sketch:hover[b-tueamhocze] { background: var(--accent-soft); }
    .btn-sketch.wide[b-tueamhocze] { width: 100%; margin-top: .75rem; }

/* ---------- Messages ---------- */
.notice[b-tueamhocze] {
    display: flex;
    gap: .75rem;
    padding: .9rem 1rem;
    margin-bottom: 1rem;
    border: 2px solid #f0c36d;
    border-radius: 12px;
    background: #fff8e1;
}

    .notice > i[b-tueamhocze] { font-size: 1.2rem; color: #b07d00; }
    .notice p[b-tueamhocze] { margin: 0; }

.searching[b-tueamhocze] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: 2.5rem 1rem;
    color: var(--muted);
}

.spinner[b-tueamhocze] {
    width: 22px;
    height: 22px;
    border: 3px solid rgba(0, 0, 0, .15);
    border-top-color: var(--ink);
    border-radius: 50%;
    animation: spin-b-tueamhocze .8s linear infinite;
    display: inline-block;
}

    .spinner.light[b-tueamhocze] { width: 36px; height: 36px; border-color: rgba(255, 255, 255, .3); border-top-color: #fff; }

@keyframes spin-b-tueamhocze {
    to { transform: rotate(360deg); }
}

/* ---------- Results: player + list ---------- */
.results-layout[b-tueamhocze] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: start;
}

.player-card[b-tueamhocze], .results-card[b-tueamhocze] {
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 16px 6px 18px 8px;
    box-shadow: 3px 3px 0 var(--ink);
    padding: .75rem;
    min-width: 0;
}

.video-frame[b-tueamhocze] {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #111;
    border-radius: 10px;
    overflow: hidden;
}

    .video-frame video[b-tueamhocze] {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: contain;
        background: #111;
    }

.scene-study-panel[b-tueamhocze] {
    min-width: 0;
}

.caption-panel[b-tueamhocze] {
    min-width: 0;
}

.loader-overlay[b-tueamhocze] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, .35);
}

.subtitle-line[b-tueamhocze] {
    min-height: 3.6em;
    margin: .75rem .25rem .5rem;
    font-size: 1.25rem;
    line-height: 1.6;
    text-align: center;
}

    .subtitle-line:empty:not(.has-started)[b-tueamhocze]::before {
        content: attr(data-placeholder);
        color: #a0a0a0;
        font-size: 1rem;
    }

    /* Words are created by videoControl.js, so ::deep is needed to style them. */
    .subtitle-line[b-tueamhocze]  .clickable-word {
        color: var(--accent);
        cursor: pointer;
        border-radius: 4px;
        padding: 0 1px;
    }

        .subtitle-line[b-tueamhocze]  .clickable-word:hover,
        .subtitle-line[b-tueamhocze]  .clickable-word:focus-visible {
            background: var(--accent-soft);
            outline: none;
        }

.controls[b-tueamhocze] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .4rem;
}

.ctrl[b-tueamhocze] {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--ink);
    border-radius: 50%;
    background: var(--paper);
    color: var(--ink);
    font-size: 1.2rem;
    cursor: pointer;
}

    .ctrl:hover:not(:disabled)[b-tueamhocze] { background: var(--accent-soft); }
    .ctrl:disabled[b-tueamhocze] { opacity: .35; cursor: not-allowed; }

    .ctrl.play[b-tueamhocze] {
        width: 56px;
        height: 56px;
        background: var(--ink);
        color: #fff;
        font-size: 1.6rem;
    }

        .ctrl.play:hover[b-tueamhocze] { background: var(--accent); border-color: var(--accent); }

.player-meta[b-tueamhocze] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    margin-top: .6rem;
    font-size: .9rem;
    color: var(--muted);
}

.link-btn[b-tueamhocze] {
    min-height: 40px;
    border: none;
    background: transparent;
    padding: 0;
    font: inherit;
    font-weight: bold;
    color: var(--accent);
    cursor: pointer;
}

.tap-hint[b-tueamhocze] {
    margin: .25rem 0 0;
    font-size: .85rem;
    color: var(--muted);
}

.results-card h2[b-tueamhocze] {
    font-size: 1.1rem;
    margin: .25rem .25rem .75rem;
}

.result-list[b-tueamhocze] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .4rem;
}

.result[b-tueamhocze] {
    width: 100%;
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    padding: .7rem;
    text-align: left;
    border: 2px solid transparent;
    border-radius: 10px;
    background: #fafafa;
    font: inherit;
    color: var(--ink);
    cursor: pointer;
}

    .result:hover[b-tueamhocze] { border-color: #d6d6d6; background: var(--paper); }

    .result.active[b-tueamhocze] {
        border-color: var(--ink);
        background: #fffdf3;
    }

.result-icon[b-tueamhocze] {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
}

.result.active .result-icon[b-tueamhocze] { background: var(--ink); color: #fff; }

.result-body[b-tueamhocze] { min-width: 0; display: grid; gap: .15rem; }

.result-text[b-tueamhocze] { overflow-wrap: anywhere; }

    .result-text mark[b-tueamhocze] {
        background: #fff3b0;
        padding: 0 .1em;
        border-radius: 3px;
        font-weight: bold;
    }

.result-meta[b-tueamhocze] { font-size: .8rem; color: var(--muted); }

/* Focus styles for keyboard users */
.chip:focus-visible[b-tueamhocze], .btn-sketch:focus-visible[b-tueamhocze], .ctrl:focus-visible[b-tueamhocze], .result:focus-visible[b-tueamhocze],
.link-btn:focus-visible[b-tueamhocze], .search-form .go:focus-visible[b-tueamhocze] {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .spinner[b-tueamhocze] { animation-duration: 2s; }
}

/* ---------- Embedded (inside a phrase card): player only, tighter ---------- */
.home.embedded .player-card[b-tueamhocze] {
    box-shadow: none;
    border-width: 1px;
}
.home.embedded .tap-hint[b-tueamhocze] { display: none; }

/* A phrase/bookmark card has plenty of horizontal space but little useful vertical space.
   Keep the scene and its learning controls together so the subtitle never falls below a huge video. */
@media (min-width: 820px) {
    .home.embedded:not(.playlist) .results-layout[b-tueamhocze] {
        justify-items: center;
    }

    .home.embedded:not(.playlist) .player-card[b-tueamhocze] {
        display: block;
        width: min(100%, 900px);
        margin-inline: auto;
    }

    .home.embedded:not(.playlist) .scene-study-panel[b-tueamhocze] {
        display: flex;
        flex-direction: column;
        gap: .55rem;
        padding-top: .65rem;
    }

    .home.embedded:not(.playlist) .video-frame[b-tueamhocze] {
        width: 100%;
    }

    .home.embedded:not(.playlist) .caption-panel[b-tueamhocze] {
        position: relative;
        z-index: 2;
        box-sizing: border-box;
        height: 6.5rem;
        margin: -6.5rem .5rem 0;
        padding: .55rem .8rem;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        overflow-y: auto;
        border-radius: 10px;
        background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .9));
        color: #fff;
        text-shadow: 0 1px 2px #000;
        scrollbar-width: thin;
    }

    .home.embedded:not(.playlist) .subtitle-line[b-tueamhocze] {
        min-height: 0;
        margin: 0;
        font-size: 1.12rem;
        line-height: 1.45;
        color: #fff;
    }

    .home.embedded:not(.playlist) .translation-line[b-tueamhocze] {
        min-height: 0;
        margin: .35rem 0 0;
        font-size: .98rem;
        line-height: 1.45;
        color: #fff3a3;
    }

    .home.embedded:not(.playlist) .subtitle-line:empty:not(.has-started)[b-tueamhocze]::before {
        color: rgba(255, 255, 255, .78);
    }

    .home.embedded:not(.playlist) .subtitle-line[b-tueamhocze]  .clickable-word {
        color: #fff;
        text-decoration: underline;
        text-decoration-color: rgba(255, 204, 0, .9);
        text-decoration-thickness: 2px;
        text-underline-offset: 3px;
    }

    .home.embedded:not(.playlist) .subtitle-line[b-tueamhocze]  .clickable-word:hover,
    .home.embedded:not(.playlist) .subtitle-line[b-tueamhocze]  .clickable-word:focus-visible {
        background: rgba(255, 204, 0, .28);
        outline: 2px solid #ffcc00;
    }

    .home.embedded:not(.playlist) .controls[b-tueamhocze],
    .home.embedded:not(.playlist) .tools[b-tueamhocze],
    .home.embedded:not(.playlist) .player-meta[b-tueamhocze] {
        margin-top: 0;
    }

    .home.embedded:not(.playlist) .ctrl[b-tueamhocze] {
        width: 42px;
        height: 42px;
    }

    .home.embedded:not(.playlist) .ctrl.play[b-tueamhocze] {
        width: 50px;
        height: 50px;
    }

    .home.embedded:not(.playlist) .tool[b-tueamhocze] {
        padding-inline: .6rem;
    }
}

@media (max-width: 819.98px) {
    .home.embedded:not(.playlist)[b-tueamhocze] {
        width: 100%;
        max-width: 100%;
        margin-inline: 0;
    }

    .home.embedded:not(.playlist) .player-card[b-tueamhocze] {
        width: 100%;
        padding: 0;
        border: 0;
        border-radius: 5px;
        background: var(--paper);
        box-shadow: none;
        overflow: hidden;
    }

    .home.embedded:not(.playlist) .video-frame[b-tueamhocze] {
        width: 100%;
        border-radius: 4px 4px 0 0;
    }

    .home.embedded:not(.playlist) .caption-panel[b-tueamhocze] {
        position: relative;
        z-index: 2;
        box-sizing: border-box;
        height: 6.25rem;
        margin: -6.25rem 0 0;
        padding: .5rem .65rem;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        overflow-y: auto;
        border-radius: 0;
        background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .88));
        color: #fff;
        text-shadow: 0 1px 2px #000;
        scrollbar-width: thin;
    }

    .home.embedded:not(.playlist) .subtitle-line[b-tueamhocze] {
        min-height: 0;
        margin: 0;
        font-size: 1.08rem;
        line-height: 1.4;
        color: #fff;
    }

    .home.embedded:not(.playlist) .translation-line[b-tueamhocze] {
        min-height: 0;
        margin: .3rem 0 0;
        font-size: .95rem;
        line-height: 1.4;
        color: #fff3a3;
    }

    .home.embedded:not(.playlist) .subtitle-line:empty:not(.has-started)[b-tueamhocze]::before {
        color: rgba(255, 255, 255, .78);
    }

    .home.embedded:not(.playlist) .subtitle-line[b-tueamhocze]  .clickable-word {
        color: #fff;
        text-decoration: underline;
        text-decoration-color: rgba(255, 204, 0, .9);
        text-decoration-thickness: 2px;
        text-underline-offset: 3px;
    }

    .home.embedded:not(.playlist) .subtitle-line[b-tueamhocze]  .clickable-word:hover,
    .home.embedded:not(.playlist) .subtitle-line[b-tueamhocze]  .clickable-word:focus-visible {
        background: rgba(255, 204, 0, .28);
        outline: 2px solid #ffcc00;
    }

    .home.embedded:not(.playlist) .controls[b-tueamhocze] {
        margin-top: 0;
    }

    .home.embedded:not(.playlist) .tools[b-tueamhocze] {
        margin-top: .55rem;
    }

    .home.embedded:not(.playlist) .scene-study-panel[b-tueamhocze] {
        padding: .6rem .75rem .75rem;
    }
}

@media (max-width: 420px) {
    .home.embedded:not(.playlist) .ctrl[b-tueamhocze] {
        width: 40px;
        height: 40px;
    }

    .home.embedded:not(.playlist) .ctrl.play[b-tueamhocze] {
        width: 48px;
        height: 48px;
    }

    .home.embedded:not(.playlist) .tools[b-tueamhocze] {
        gap: .3rem;
    }

    .home.embedded:not(.playlist) .tool[b-tueamhocze] {
        flex: 1 1 calc(33.333% - .3rem);
        justify-content: center;
        padding-inline: .4rem;
    }

    .home.embedded:not(.playlist) .speed[b-tueamhocze] {
        flex: 1 1 100%;
        justify-content: center;
    }

    .home.embedded:not(.playlist) .speed button[b-tueamhocze] {
        flex: 1;
    }
}

/* ---------- Larger phones / tablets ---------- */
@media (min-width: 576px) {
    .home[b-tueamhocze] { padding: 1rem 1rem 3rem; }
    .search-form .go span[b-tueamhocze] { display: inline; }
    .how[b-tueamhocze] { grid-template-columns: repeat(3, 1fr); }

    .step[b-tueamhocze] {
        grid-template-columns: 1fr;
        text-align: center;
        justify-items: center;
        row-gap: .5rem;
    }

        .step p[b-tueamhocze] { grid-column: 1; }

    .step-icon[b-tueamhocze] { grid-row: auto; }

    .browse-cta[b-tueamhocze] {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .player-card[b-tueamhocze], .results-card[b-tueamhocze] { padding: 1rem; }
    .ctrl[b-tueamhocze] { width: 48px; height: 48px; }
}

/* ---------- Desktop: player beside a scrollable scene list ---------- */
@media (min-width: 992px) {
    .hero[b-tueamhocze] { padding-top: 3rem; }

    .results-layout[b-tueamhocze] {
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    }

    .player-card[b-tueamhocze] { position: sticky; top: 5rem; }

    .results-card[b-tueamhocze] {
        max-height: calc(100vh - 7rem);
        overflow-y: auto;
    }

    .home.embedded .results-layout[b-tueamhocze] { grid-template-columns: 1fr; }
    .home.embedded .player-card[b-tueamhocze] { position: static; }

    /* Bookmark video tab: retain the home-page playlist layout even though Search is embedded. */
    .home.embedded.playlist .results-layout[b-tueamhocze] { grid-template-columns: minmax(0, 3fr) minmax(300px, 2fr); }
    .home.embedded.playlist .player-card[b-tueamhocze] { position: sticky; top: 5rem; }
}

/* ---------- Grammar teaser (landing) ---------- */
.ctrl svg[b-tueamhocze] { width: 19px; height: 19px; }
.home.embedded.compact[b-tueamhocze] { width: 100%; max-width: none; padding: 0; margin: 0; }
.home.embedded.compact .results-layout[b-tueamhocze] { grid-template-columns: minmax(0, 1fr); gap: .8rem; }
.home.embedded.compact .player-card[b-tueamhocze] { position: static; width: 100%; padding: 0; border: 0; box-shadow: none; background: transparent; }
.home.embedded.compact .video-frame[b-tueamhocze] { max-height: 250px; border-radius: 10px; }
.home.embedded.compact .caption-panel[b-tueamhocze] { position: static; height: auto; margin: 0; padding: .5rem 0; background: none; color: var(--ink); text-shadow: none; }
.home.embedded.compact .subtitle-line[b-tueamhocze] { min-height: 0; margin: 0; font-size: 1rem; line-height: 1.45; text-align: left; }
.home.embedded.compact .translation-line[b-tueamhocze] { min-height: 0; margin: .3rem 0 0; font-size: .92rem; }
.home.embedded.compact .controls[b-tueamhocze] { gap: .3rem; margin-top: .25rem; }
.home.embedded.compact .ctrl[b-tueamhocze] { width: 40px; height: 40px; border-width: 1px; box-shadow: none; }
.home.embedded.compact .ctrl.play[b-tueamhocze] { width: 44px; height: 44px; }
.home.embedded.compact .tools[b-tueamhocze] { gap: .3rem; }
.home.embedded.compact .tool[b-tueamhocze] { min-height: 38px; padding-inline: .5rem; font-size: .8rem; }
.home.embedded.compact .player-meta[b-tueamhocze] { margin-top: .4rem; font-size: .8rem; }
.home.embedded.compact .player-meta .link-btn[b-tueamhocze] { font-size: .8rem; min-height: 36px; }
.home.embedded.compact .results-card[b-tueamhocze] { position: static; max-height: 240px; padding: .65rem; overflow-y: auto; border: 1px solid #dce3ec; border-radius: 11px; box-shadow: none; overscroll-behavior: contain; }
.home.embedded.compact .results-card h2[b-tueamhocze] { margin: 0 0 .5rem; font-size: .92rem; }
.home.embedded.compact .result[b-tueamhocze] { padding: .5rem; border-width: 1px; border-radius: 8px; }
.home.embedded.compact .result-text[b-tueamhocze] { font-size: .9rem; line-height: 1.4; }
.home.embedded.compact .result-meta[b-tueamhocze] { font-size: .73rem; }
@media (min-width: 900px) {
    .home.embedded.compact.playlist .results-layout[b-tueamhocze] { grid-template-columns: minmax(0, 1.45fr) minmax(200px, 1fr); }
    .home.embedded.compact .results-card[b-tueamhocze] { max-height: 410px; }
}
@media (max-width: 575.98px) {
    .home.embedded.compact .results-card[b-tueamhocze] { max-height: 170px; }
    .home.embedded.compact .ctrl[b-tueamhocze] { min-width: 40px; height: 44px; }
}

.grammar-teaser[b-tueamhocze] { margin: 0 0 2rem; }

.section-head[b-tueamhocze] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: .75rem;
}

    .section-head h2[b-tueamhocze] { font-size: 1.2rem; margin: 0; }
    .section-head a[b-tueamhocze] { font-weight: bold; text-decoration: none; white-space: nowrap; }

.pattern-chips[b-tueamhocze] { display: flex; flex-wrap: wrap; gap: .5rem; }

.pattern-chip[b-tueamhocze] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 40px;
    padding: .3rem .8rem;
    border: 2px solid var(--ink);
    border-radius: 12px 4px 12px 4px;
    background: var(--paper);
    color: var(--ink);
    text-decoration: none;
}

    .pattern-chip:hover[b-tueamhocze] { background: var(--accent-soft); }

.level[b-tueamhocze] {
    font-size: .75rem;
    font-weight: bold;
    padding: .05rem .45rem;
    border-radius: 999px;
    background: var(--ink);
    color: #fff;
}

/* ---------- Filters ---------- */
.filters-toggle[b-tueamhocze] {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: -.25rem 0 .75rem;
}

    .filters-toggle .chip.active[b-tueamhocze] { background: var(--ink); color: #fff; }
    .filters-toggle .count[b-tueamhocze] {
        margin-left: .3rem;
        padding: 0 .4rem;
        border-radius: 999px;
        background: var(--yellow);
        color: var(--ink);
        font-size: .75rem;
    }

.filters[b-tueamhocze] {
    display: none;
    gap: .6rem;
    margin-bottom: 1rem;
    padding: .75rem;
    border: 2px solid var(--ink);
    border-radius: 12px;
    background: var(--paper);
}

    .filters.open[b-tueamhocze] { display: grid; }

    .filters label[b-tueamhocze] { display: grid; gap: .2rem; font-size: .85rem; color: var(--muted); }

    .filters select[b-tueamhocze] {
        min-height: 42px;
        border: 2px solid var(--ink);
        border-radius: 8px;
        padding: 0 .5rem;
        font: inherit;
        font-size: 1rem;
        color: var(--ink);
        background: #fff;
    }

    .filters .check[b-tueamhocze] {
        display: flex;
        align-items: center;
        gap: .5rem;
        color: var(--ink);
        font-size: .95rem;
    }

        .filters .check input[b-tueamhocze] { width: 20px; height: 20px; accent-color: var(--accent); }
        .filters .check small[b-tueamhocze] { color: var(--muted); }

/* ---------- Grammar pattern header ---------- */
.pattern-card[b-tueamhocze] {
    margin-bottom: 1rem;
    padding: 1rem;
    border: 2px solid var(--ink);
    border-radius: 16px 6px 18px 8px;
    background: #fffdf3;
    box-shadow: 3px 3px 0 var(--ink);
}

    .pattern-card p[b-tueamhocze] { margin: .5rem 0 0; }
    .pattern-card .example[b-tueamhocze] { color: var(--muted); font-style: italic; }

.pattern-head[b-tueamhocze] { display: flex; align-items: center; gap: .6rem; }
    .pattern-head h1[b-tueamhocze] { font-size: 1.35rem; margin: 0; }

/* ---------- Player additions ---------- */
.translation-line[b-tueamhocze] {
    min-height: 1.6em;
    margin: -.25rem .25rem .5rem;
    font-family: Vazirmatn, Tahoma, 'Segoe UI', sans-serif;
    font-size: 1.05rem;
    text-align: center;
    color: #3d5afe;
}

    .translation-line.hidden[b-tueamhocze] { display: none; }

.tools[b-tueamhocze] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .4rem;
    margin-top: .75rem;
}

.speed[b-tueamhocze] {
    display: inline-flex;
    border: 2px solid var(--ink);
    border-radius: 999px;
    overflow: hidden;
}

    .speed button[b-tueamhocze] {
        min-height: 38px;
        padding: 0 .65rem;
        border: none;
        background: var(--paper);
        font: inherit;
        font-size: .9rem;
        cursor: pointer;
    }

        .speed button + button[b-tueamhocze] { border-left: 2px solid var(--ink); }
        .speed button.active[b-tueamhocze] { background: var(--ink); color: #fff; }

.tool[b-tueamhocze] {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: 0 .75rem;
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: var(--paper);
    font: inherit;
    font-size: .9rem;
    cursor: pointer;
}

    .tool:hover[b-tueamhocze] { background: var(--accent-soft); }
    .tool.active[b-tueamhocze] { background: var(--ink); color: #fff; }
    .tool.save[b-tueamhocze] { background: var(--yellow); }
    .tool.save.active[b-tueamhocze] { background: #198754; border-color: #198754; color: #fff; }
    .tool.practise[b-tueamhocze] { background: #e7ecff; border-color: #364fc7; color: #24368f; }
    .tool:disabled[b-tueamhocze] { opacity: .6; cursor: wait; }

.tool-note[b-tueamhocze] {
    margin: .4rem 0 0;
    text-align: center;
    font-size: .85rem;
    color: var(--muted);
}

.forms-note[b-tueamhocze] {
    margin: -.4rem .25rem .6rem;
    font-size: .85rem;
    color: var(--muted);
}

.speed button:focus-visible[b-tueamhocze], .tool:focus-visible[b-tueamhocze], .pattern-chip:focus-visible[b-tueamhocze], .filters select:focus-visible[b-tueamhocze] {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

/* Tablets and up: filters always visible in one row */
@media (min-width: 768px) {
    .filters-toggle[b-tueamhocze] { display: none; }

    .filters[b-tueamhocze] {
        display: flex;
        flex-wrap: wrap;
        align-items: end;
        gap: 1rem;
    }

        .filters label[b-tueamhocze] { min-width: 170px; }
}

/* Clip limit reached (admin → Settings) */
.clip-limit-note[b-tueamhocze] {
    margin: .6rem 0 0;
    padding: .55rem .8rem;
    border: 2px solid var(--ink);
    border-radius: var(--sketch);
    background: #fff8d6;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .35rem .9rem;
    font-size: .9rem;
    text-align: center;
}

    .clip-limit-note .link-btn[b-tueamhocze] {
        min-height: 32px;
    }

/* Autoplay was blocked by the browser (e.g. Brave): one big button on the video. */
.tap-to-play[b-tueamhocze] {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    border: 3px solid #fff;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 2.4rem;
    display: grid;
    place-items: center;
    cursor: pointer;
}

    .tap-to-play:hover[b-tueamhocze], .tap-to-play:focus-visible[b-tueamhocze] {
        background: rgba(0, 0, 0, .75);
    }

/* A study pack has no video: the frame shows the line and where it is in the film. */
.study-pack-scene[b-tueamhocze] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: 1.2rem;
    text-align: center;
    background: #fffbea;
    color: #2b2b2b;
}
.sp-badge[b-tueamhocze] { border: 2px dashed #2b2b2b; border-radius: 8px; padding: .1rem .55rem; font-size: .85rem; font-weight: bold; }
.sp-line[b-tueamhocze] { font-size: 1.35rem; font-weight: bold; margin: 0; max-width: 34ch; }
.sp-translation[b-tueamhocze] { margin: 0; color: #444; }
.sp-time[b-tueamhocze] { margin: 0; color: #555; font-size: .95rem; word-break: break-word; }
/* "My videos": the learner's own file isn't open on this device yet. */
.sp-play-mine[b-tueamhocze] {
    display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .35rem 1rem;
    border: 2px solid #2b2b2b; border-radius: 12px 4px 12px 4px; background: #2b2b2b; color: #fff;
    box-shadow: 2px 2px 0 #ffcc00; font: inherit; font-weight: bold; cursor: pointer;
}
    .sp-play-mine:focus-visible[b-tueamhocze] { outline: 3px solid #0d6efd; outline-offset: 2px; }

/* ---------- Phones: keep the landing short ---------- */
@media (max-width: 575.98px) {
    /* One swipeable row of examples instead of three wrapped rows. */
    .hero .examples[b-tueamhocze] {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none;
        margin-left: -.75rem;
        margin-right: -.75rem;
        padding: 0 .75rem .25rem;
        scroll-padding-left: .75rem;
        -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
        mask-image: linear-gradient(90deg, #000 85%, transparent);
    }

        .hero .examples[b-tueamhocze]::-webkit-scrollbar { display: none; }
        .hero .examples > *[b-tueamhocze] { flex: 0 0 auto; }

    /* Compact "how it works" steps. */
    .how[b-tueamhocze] { gap: .5rem; margin: 1.5rem 0; }
    .step[b-tueamhocze] { padding: .65rem .8rem; column-gap: .75rem; }
    .step h2[b-tueamhocze] { font-size: 1.05rem; }
    .step p[b-tueamhocze] { font-size: .92rem; line-height: 1.35; }
    .step-icon[b-tueamhocze] { width: 40px; height: 40px; font-size: 1.1rem; }
}

/* ---------- How the results were found (corrected spelling / Persian word) ---------- */
.search-note[b-tueamhocze] {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    padding: .8rem 1rem;
    margin-bottom: 1rem;
    border: 2px solid var(--ink);
    border-radius: 14px 6px 14px 6px;
    background: var(--accent-soft);
}

    .search-note > i[b-tueamhocze] { font-size: 1.25rem; color: var(--accent); line-height: 1.4; }
    .search-note p[b-tueamhocze] { margin: 0; }
    .search-note .typed[b-tueamhocze] { font-weight: bold; }

.note-chips[b-tueamhocze] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin-top: .5rem;
}

    .note-chips > span[b-tueamhocze] { color: var(--muted); font-size: .95rem; }

.chip.small[b-tueamhocze] { min-height: 34px; padding: 0 .75rem; font-size: .95rem; }

/* ---------- Link to the advanced search ---------- */
.adv-link[b-tueamhocze] { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.1rem; color: var(--accent); font-weight: bold; text-decoration: none; }
.adv-link:hover[b-tueamhocze] { text-decoration: underline; }
.adv-link.inline[b-tueamhocze] { margin: -.4rem 0 .75rem; font-size: .95rem; }

/* A collocation's scenes (?colloc=): the pattern card, in blue. */
.colloc-card[b-tueamhocze] { background: #f8fbff; }
    .colloc-card .level[b-tueamhocze] { background: #1864ab; }
.colloc-fa[b-tueamhocze] { font-family: Vazirmatn, Tahoma, sans-serif; color: #364fc7; text-align: right; }
.colloc-wrong[b-tueamhocze] { color: #868e96; }
    .colloc-wrong s[b-tueamhocze] { color: #c92a2a; }
.colloc-more[b-tueamhocze] { display: inline-flex; align-items: center; gap: .3rem; margin-top: .5rem; color: #1864ab; font-weight: bold; }

/* ---------- Controls on the picture (css/video-controls.css) ---------- */
/* A study pack's text keeps clear of the previous / next arrows at the sides. */
.study-pack-scene[b-tueamhocze] { padding-inline: 3.4rem; }

/* Where the subtitle lies over the bottom of the picture (inside a phrase / bookmark card), it moves up while
   the controls are showing, like captions above a player bar. On phones the buttons are in the middle instead. */
@media (min-width: 576px) {
    .home.embedded:not(.playlist):not(.compact) .caption-panel[b-tueamhocze] { transition: transform .2s ease; }
    .home.embedded:not(.playlist):not(.compact) .video-frame:not([data-vctl="off"]) + .caption-panel[b-tueamhocze] { transform: translateY(-3.5rem); }
}

/* ---------- Phones: a bigger picture ---------- */
/* The player card loses its frame and the video runs from edge to edge of the screen (about 15% larger). */
@media (max-width: 575.98px) {
    .home:not(.embedded) .player-card[b-tueamhocze] {
        margin-inline: -1.5rem; /* the page's two gutters (layout + page) */
        padding-top: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .home:not(.embedded) .video-frame[b-tueamhocze] { margin-inline: -.75rem; border-radius: 0; }
}
/* /Pages/search/TodayCard.razor.rz.scp.css */
.today[b-j2lypgnfvh] {
    max-width: 900px;
    margin: 1.25rem auto 0;
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.today-day[b-j2lypgnfvh], .word-of-day[b-j2lypgnfvh] {
    border: 2px solid #2b2b2b;
    border-radius: 14px 6px 14px 6px;
    background: #fff;
    box-shadow: 3px 3px 0 #2b2b2b;
    padding: 1rem 1.1rem;
}

.today-day[b-j2lypgnfvh] { display: grid; grid-template-columns: auto 1fr; gap: .75rem 1.25rem; align-items: center; }
.today-stat[b-j2lypgnfvh] { display: grid; gap: .1rem; }
.today-stat strong[b-j2lypgnfvh] { font-size: 1.6rem; line-height: 1.1; }
.today-stat strong small[b-j2lypgnfvh] { font-size: 1rem; color: #6b6b6b; }
.today-stat span[b-j2lypgnfvh] { color: #6b6b6b; font-size: .9rem; }
.today-stat.streak strong .bi[b-j2lypgnfvh] { color: #9a9a9a; }
.today-stat.streak.on strong .bi[b-j2lypgnfvh] { color: #f97316; }
.today-bar[b-j2lypgnfvh] { display: block; height: 8px; border: 2px solid #2b2b2b; border-radius: 6px; overflow: hidden; background: #f3f3f3; }
.today-bar > span[b-j2lypgnfvh] { display: block; height: 100%; background: #198754; }

.today-action[b-j2lypgnfvh] { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.today-hint[b-j2lypgnfvh] { color: #555; font-size: .95rem; }
.today-reminders[b-j2lypgnfvh] { font-weight: bold; font-size: .9rem; }
.today-reminders .bi[b-j2lypgnfvh] { color: #229ed9; }

.onboarding-card[b-j2lypgnfvh] { grid-column: 1 / -1; display: grid; grid-template-columns: 1.3fr repeat(2, minmax(130px, .7fr)); gap: .8rem; align-items: end; padding: 1.1rem; border: 2px solid #2b2b2b; border-radius: 14px; background: #fff8d8; box-shadow: 3px 3px 0 #2b2b2b; }
.onboarding-card h2[b-j2lypgnfvh], .onboarding-card p[b-j2lypgnfvh] { margin: .15rem 0; }
.onboarding-card label[b-j2lypgnfvh] { display: grid; gap: .25rem; font-weight: bold; font-size: .9rem; }
.onboarding-card input[b-j2lypgnfvh], .onboarding-card select[b-j2lypgnfvh] { min-height: 42px; border: 2px solid #333; border-radius: 8px; padding: .4rem .55rem; background: white; }
.onboarding-card label:nth-of-type(3)[b-j2lypgnfvh] { grid-column: 1 / -2; }
.continue-card[b-j2lypgnfvh] { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .9rem 1.1rem; border-radius: 12px; color: #fff; background: #212529; text-decoration: none; box-shadow: 3px 3px 0 #ffcc00; }
.continue-card span[b-j2lypgnfvh] { display: grid; }.continue-card small[b-j2lypgnfvh] { color: #ffcc00; text-transform: uppercase; font-weight: bold; }.continue-card b[b-j2lypgnfvh] { white-space: nowrap; }

@media (max-width: 700px) {
    .onboarding-card[b-j2lypgnfvh] { grid-template-columns: 1fr; }
    .onboarding-card label:nth-of-type(3)[b-j2lypgnfvh] { grid-column: auto; }
    .continue-card[b-j2lypgnfvh] { align-items: flex-start; flex-direction: column; }
}

.wod-label[b-j2lypgnfvh] { display: block; font-size: .8rem; font-weight: bold; text-transform: uppercase; letter-spacing: .05em; color: #6b6b6b; }
.wod-label .bi[b-j2lypgnfvh] { color: #0d6efd; }
.wod-term[b-j2lypgnfvh] { display: inline-block; margin: .2rem 0; font-size: 1.6rem; font-weight: bold; color: #2b2b2b; text-decoration: none; }
.wod-term:hover[b-j2lypgnfvh] { text-decoration: underline; }
.wod-meaning[b-j2lypgnfvh] { margin: 0; }
.wod-fa[b-j2lypgnfvh] { margin: .2rem 0 0; color: #333; }
.wod-context[b-j2lypgnfvh] { margin: .4rem 0 0; font-style: italic; color: #555; }
.wod-watch[b-j2lypgnfvh] { display: inline-block; margin-top: .5rem; font-weight: bold; }

/* Guess the meaning first; watch the exact scene */
.wod-guess[b-j2lypgnfvh] { display: inline-flex; align-items: center; gap: .35rem; margin-top: .4rem; padding: .35rem .65rem; border: 1.5px dashed #845ef7; border-radius: 10px; background: #f3f0ff; color: #5f3dc4; font-size: .9rem; cursor: pointer; }
.wod-actions[b-j2lypgnfvh] { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
button.wod-watch[b-j2lypgnfvh] { border: 0; background: none; padding: 0; color: inherit; cursor: pointer; text-decoration: underline; }
/* /Pages/search/Translation.razor.rz.scp.css */

.modal-container[b-y63awoc8zd] {
    font-family: system-ui, -apple-system, sans-serif;
}

.modal-overlay[b-y63awoc8zd] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    backdrop-filter: blur(5px);
}

.modal-content[b-y63awoc8zd] {
    background: white;
    border-radius: 12px;
    padding: 0;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    animation: modal-slide-b-y63awoc8zd 0.3s ease-out;
}

@keyframes modal-slide-b-y63awoc8zd {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-header[b-y63awoc8zd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    background: #f8fafc;
    border-radius: 12px 12px 0 0;
}

.modal-title[b-y63awoc8zd] {
    margin: 0;
    font-size: 1.5rem;
    color: #1e293b;
    font-weight: 600;
}

.close-button[b-y63awoc8zd] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #64748b;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: background-color 0.2s;
}

    .close-button:hover[b-y63awoc8zd] {
        background-color: #e5e7eb;
        color: #1e293b;
    }

.modal-body[b-y63awoc8zd] {
    padding: 1.5rem;
}

.phonetic-section[b-y63awoc8zd] {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 8px;
}

.phonetic-text[b-y63awoc8zd] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.label[b-y63awoc8zd] {
    font-weight: 600;
    color: #64748b;
}

.audio-player[b-y63awoc8zd] {
    width: 100%;
    margin-top: 0.5rem;
}

.section-title[b-y63awoc8zd] {
    color: #1e293b;
    font-size: 1.25rem;
    margin: 1.5rem 0 1rem;
    font-weight: 600;
}

.meaning-item[b-y63awoc8zd] {
    margin-bottom: 1.5rem;
}

.part-of-speech[b-y63awoc8zd] {
    color: #2563eb;
    font-size: 1.1rem;
    margin: 1rem 0 0.5rem;
}

.definition-block[b-y63awoc8zd] {
    margin-bottom: 1rem;
    padding-left: 1rem;
    border-left: 3px solid #e5e7eb;
}

.definition[b-y63awoc8zd] {
    margin: 0.5rem 0;
    color: #334155;
    line-height: 1.6;
}

.example[b-y63awoc8zd] {
    margin: 0.5rem 0;
    padding: 0.75rem;
    background: #f1f5f9;
    border-radius: 6px;
    color: #475569;
    font-style: italic;
}

.example-text[b-y63awoc8zd] {
    color: #64748b;
    font-weight: 500;
}

.farsi-section[b-y63awoc8zd] {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e5e7eb;
}

.farsi-trigger[b-y63awoc8zd] {
    background: #2563eb;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.2s;
}

    .farsi-trigger:hover[b-y63awoc8zd] {
        background: #1d4ed8;
    }

.farsi-meanings[b-y63awoc8zd] {
    margin-top: 1.5rem;
}

.farsi-list[b-y63awoc8zd] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.farsi-item[b-y63awoc8zd] {
    padding: 0.75rem;
    margin: 0.5rem 0;
    background: #f8fafc;
    border-radius: 6px;
    color: #334155;
    font-size: 1.1rem;
    line-height: 1.6;
}

/* "Add to review" (video flashcards) */
.review-action[b-y63awoc8zd] { margin: .25rem 0 .75rem; }
.add-review[b-y63awoc8zd] {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: 0 .9rem;
    border: 2px solid #2b2b2b;
    border-radius: 10px 4px 10px 4px;
    background: #ffcc00;
    font: inherit;
    font-weight: bold;
    cursor: pointer;
}
.add-review:disabled[b-y63awoc8zd] { opacity: .6; cursor: wait; }
.review-done[b-y63awoc8zd] { color: #198754; font-weight: bold; }

.bookmark-word[b-y63awoc8zd] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin: 0 0 .75rem;
    padding: .45rem .9rem;
    border: 2px solid #334155;
    border-radius: 10px;
    background: #fff;
    color: #1e293b;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

    .bookmark-word i[b-y63awoc8zd] { font-size: 1.2rem; }
    .bookmark-word:hover:not(:disabled)[b-y63awoc8zd] { background: #f1f5f9; }
    .bookmark-word.saved[b-y63awoc8zd] { border-color: #8a5a00; background: #fff3b0; color: #624000; }
    .bookmark-word:disabled[b-y63awoc8zd] { opacity: .65; cursor: wait; }
    .bookmark-word:focus-visible[b-y63awoc8zd] { outline: 3px solid #2563eb; outline-offset: 2px; }

@media (max-width: 575.98px) {
    .bookmark-word[b-y63awoc8zd] { width: 100%; }
}

/* ---------- A word explained by AI in the learner's chosen language (own videos) ---------- */
.ai-dict .ai-source[b-y63awoc8zd] { display: flex; align-items: center; gap: .4rem; margin: 0 0 .75rem; padding: .4rem .6rem; border-radius: 8px; background: #eef4ff; color: #0a4fb4; font-size: .85rem; }
.ai-dict .ai-form[b-y63awoc8zd] { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0 0 .6rem; color: #444; }
.ai-dict .ai-pron[b-y63awoc8zd] { color: #6b6b6b; font-family: monospace; }
.ai-dict .ai-inline[b-y63awoc8zd] { margin: 0 0 1rem; padding: .7rem .9rem; border-left: 4px solid #0d6efd; border-radius: 6px; background: #f6f9ff; }
.ai-dict .ai-inline .label[b-y63awoc8zd] { display: block; margin-bottom: .2rem; color: #6b6b6b; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.ai-dict .ai-inline p[b-y63awoc8zd] { margin: 0; font-size: 1.15rem; font-weight: 600; }
.ai-dict .example[b-y63awoc8zd] { display: grid; gap: .2rem; }
.ai-dict .example small[b-y63awoc8zd] { color: #6b6b6b; }
.ai-dict .ai-note[b-y63awoc8zd] { margin: .75rem 0; padding: .5rem .7rem; border-radius: 8px; background: #fff8e1; font-size: .9rem; }
.ai-dict .ai-foot[b-y63awoc8zd] { margin: .75rem 0 0; color: #8a8a8a; font-size: .75rem; }
.ai-dict [dir="rtl"][b-y63awoc8zd] { text-align: right; font-family: Vazirmatn, Tahoma, sans-serif; }
.ai-dict .ai-inline-loading[b-y63awoc8zd] { display: flex; align-items: center; gap: .5rem; font-size: .9rem !important; font-weight: normal !important; color: #6b6b6b; }
.ai-dict .ai-spin[b-y63awoc8zd] { width: 16px; height: 16px; border: 2px solid #d6e2f7; border-top-color: #0d6efd; border-radius: 50%; animation: ai-spin-b-y63awoc8zd .8s linear infinite; }
@keyframes ai-spin-b-y63awoc8zd { to { transform: rotate(360deg); } }

/* Picking the meaning that fits the line */
.pick-note[b-y63awoc8zd] { margin: .25rem 0 .5rem; padding: .4rem .6rem; border-radius: 8px; background: #fff4d6; color: #7a5600; font-size: .9rem; }
.definition-block.pickable[b-y63awoc8zd] { border-radius: 8px; }
.definition-block.chosen[b-y63awoc8zd] { background: #e7f5ff; outline: 2px solid #339af0; }
.definition-pick[b-y63awoc8zd] { display: flex; gap: .5rem; align-items: flex-start; cursor: pointer; padding: .25rem .35rem; }
    .definition-pick input[b-y63awoc8zd] { margin-top: .3rem; flex-shrink: 0; }
/* /Pages/Season.razor.rz.scp.css */
/* Browse page — keeps the site's hand-drawn look (dark sketch borders, offset shadows)
   with a calmer layout: show picker → season tabs → episode list. */

.browse[b-fy5e9uu0rm] {
    --ink: #2b2b2b;
    --muted: #6b6b6b;
    --paper: #ffffff;
    --page: #fafafa;
    --accent: #0d6efd;
    --accent-soft: #e8f0ff;
    --sketch: 255px 15px 225px 15px / 15px 225px 15px 255px;

    font-family: 'Comic Neue', Vazirmatn, 'Comic Sans MS', sans-serif;
    color: var(--ink);
    background: var(--page);
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 1rem 3rem;
}

.browse-header h1[b-fy5e9uu0rm] {
    font-size: 2rem;
    margin: 0 0 .25rem;
}

.browse-header p[b-fy5e9uu0rm] {
    color: var(--muted);
    margin: 0 0 1.5rem;
}

.muted[b-fy5e9uu0rm] { color: var(--muted); }
.small[b-fy5e9uu0rm] { font-size: .85rem; }
.show-picker-hint[b-fy5e9uu0rm] { margin: 0 0 .25rem; color: var(--muted); font-size: .85rem; font-weight: bold; }
.show-picker-hint span[b-fy5e9uu0rm] { font-weight: normal; }

/* ---------- Show picker ---------- */
.title-strip[b-fy5e9uu0rm] {
    display: flex;
    gap: .75rem;
    overflow-x: auto;
    padding: .25rem .25rem 1rem;
    scrollbar-width: thin;
}

.title-chip[b-fy5e9uu0rm] {
    flex: 0 0 auto;
    min-width: 170px;
    display: flex;
    flex-direction: column;
    padding: .75rem 1rem;
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: var(--sketch);
    box-shadow: 2px 2px 0 var(--ink);
    color: var(--ink);
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

    .title-chip:hover[b-fy5e9uu0rm] {
        transform: translate(-2px, -2px);
        box-shadow: 4px 4px 0 var(--ink);
    }

    .title-chip.active[b-fy5e9uu0rm] {
        background: var(--ink);
        color: #fff;
    }

        .title-chip.active .title-meta[b-fy5e9uu0rm] { color: #d6d6d6; }

.title-name[b-fy5e9uu0rm] {
    font-weight: bold;
    font-size: 1.05rem;
}

.title-meta[b-fy5e9uu0rm] {
    font-size: .8rem;
    color: var(--muted);
}

/* ---------- Selected show ---------- */
.title-panel[b-fy5e9uu0rm] {
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 18px 8px 22px 10px;
    box-shadow: 3px 3px 0 var(--ink);
    padding: 1.25rem;
}

.title-panel-head[b-fy5e9uu0rm] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: 1rem;
}

    .title-panel-head h2[b-fy5e9uu0rm] {
        margin: 0;
        font-size: 1.6rem;
    }

/* ---------- Season tabs ---------- */
.season-tabs[b-fy5e9uu0rm] {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    padding-bottom: .5rem;
    margin-bottom: 1rem;
    border-bottom: 2px dashed #cfcfcf;
}

.season-tab[b-fy5e9uu0rm] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .9rem;
    font: inherit;
    color: var(--ink);
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 999px;
    cursor: pointer;
    min-height: 44px;
    transition: background .15s ease, color .15s ease;
}

    .season-tab:hover[b-fy5e9uu0rm] { background: var(--accent-soft); }

    .season-tab.active[b-fy5e9uu0rm] {
        background: var(--ink);
        color: #fff;
    }

    .season-tab .count[b-fy5e9uu0rm] {
        font-size: .75rem;
        min-width: 1.5rem;
        padding: 0 .4rem;
        border-radius: 999px;
        background: rgba(0, 0, 0, .08);
        text-align: center;
    }

    .season-tab.active .count[b-fy5e9uu0rm] { background: rgba(255, 255, 255, .2); }

/* ---------- Toolbar ---------- */
.toolbar[b-fy5e9uu0rm] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 1rem;
}

.filter[b-fy5e9uu0rm] {
    flex: 1 1 260px;
    max-width: 420px;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .8rem;
    border: 2px solid var(--ink);
    border-radius: 12px 4px 12px 4px;
    background: var(--paper);
}

    .filter input[b-fy5e9uu0rm] {
        flex: 1;
        border: none;
        outline: none;
        font: inherit;
        background: transparent;
        min-width: 0;
    }

    .filter:focus-within[b-fy5e9uu0rm] { box-shadow: 0 0 0 3px var(--accent-soft); }

/* ---------- Episode list ---------- */
.episode-list[b-fy5e9uu0rm] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .75rem;
}

.episode-card[b-fy5e9uu0rm] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: .9rem 1rem;
    border: 2px solid var(--ink);
    border-radius: 14px 6px 16px 8px;
    background: var(--paper);
    box-shadow: 2px 2px 0 var(--ink);
    transition: transform .15s ease, box-shadow .15s ease;
}

    .episode-card:hover[b-fy5e9uu0rm] {
        transform: translate(-1px, -1px);
        box-shadow: 3px 3px 0 var(--ink);
    }

.episode-number[b-fy5e9uu0rm] {
    min-width: 4.5rem;
    padding: .35rem .5rem;
    text-align: center;
    font-weight: bold;
    border: 2px dashed var(--ink);
    border-radius: 10px;
    white-space: nowrap;
}

.episode-body[b-fy5e9uu0rm] { min-width: 0; }

.episode-title[b-fy5e9uu0rm] {
    margin: 0;
    font-size: 1.1rem;
}

.synopsis[b-fy5e9uu0rm] {
    margin: .25rem 0 0;
    color: var(--muted);
    font-size: .9rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.episode-actions[b-fy5e9uu0rm] {
    display: flex;
    gap: .5rem;
}

.action[b-fy5e9uu0rm] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem .75rem;
    border: 2px solid var(--ink);
    border-radius: 10px 4px 10px 4px;
    color: var(--ink);
    background: var(--paper);
    text-decoration: none;
    font-weight: bold;
    white-space: nowrap;
    min-height: 44px;
    justify-content: center;
    transition: background .15s ease, color .15s ease;
}

    .action:hover[b-fy5e9uu0rm] {
        background: var(--accent);
        border-color: var(--accent);
        color: #fff;
    }

    .action.disabled[b-fy5e9uu0rm] {
        opacity: .68;
        cursor: not-allowed;
    }
.action.disabled small[b-fy5e9uu0rm] { font-size: .7rem; font-weight: normal; }

        .action.disabled:hover[b-fy5e9uu0rm] {
            background: var(--paper);
            border-color: var(--ink);
            color: var(--ink);
        }

.action:focus-visible[b-fy5e9uu0rm],
.title-chip:focus-visible[b-fy5e9uu0rm],
.season-tab:focus-visible[b-fy5e9uu0rm],
.btn-sketch:focus-visible[b-fy5e9uu0rm] {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

/* ---------- States ---------- */
.state-box[b-fy5e9uu0rm] {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--muted);
}

    .state-box.small[b-fy5e9uu0rm] { padding: 1.5rem 1rem; }

.state-icon[b-fy5e9uu0rm] {
    font-size: 2.25rem;
    display: block;
    margin-bottom: .5rem;
    color: var(--ink);
}

.btn-sketch[b-fy5e9uu0rm] {
    font: inherit;
    padding: .45rem 1rem;
    border: 2px solid var(--ink);
    border-radius: 10px 4px 10px 4px;
    background: var(--paper);
    box-shadow: 2px 2px 0 var(--ink);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    text-decoration: none;
}

/* Loading placeholders keep the layout steady while data arrives. */
.skeleton[b-fy5e9uu0rm] {
    background: linear-gradient(90deg, #eee 25%, #f6f6f6 50%, #eee 75%);
    background-size: 200% 100%;
    animation: shimmer-b-fy5e9uu0rm 1.2s infinite;
    border-color: #ddd !important;
    box-shadow: none !important;
}

.title-chip.skeleton[b-fy5e9uu0rm] { height: 58px; }

.skeleton-card[b-fy5e9uu0rm] {
    display: block;
    box-shadow: none;
    border-color: #ddd;
}

    .skeleton-card .line[b-fy5e9uu0rm] {
        height: 14px;
        border-radius: 6px;
        margin: .4rem 0;
    }

        .skeleton-card .line.short[b-fy5e9uu0rm] { width: 30%; }

@keyframes shimmer-b-fy5e9uu0rm {
    to { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .skeleton[b-fy5e9uu0rm] { animation: none; }
    .title-chip[b-fy5e9uu0rm], .episode-card[b-fy5e9uu0rm], .action[b-fy5e9uu0rm], .season-tab[b-fy5e9uu0rm] { transition: none; }
}

/* ---------- Phones ---------- */
@media (max-width: 640px) {
    .browse[b-fy5e9uu0rm] { padding: 1.25rem .75rem 2rem; }
    .browse-header h1[b-fy5e9uu0rm] { font-size: 1.6rem; }
    .title-panel[b-fy5e9uu0rm] { padding: 1rem .75rem; }

    .episode-card[b-fy5e9uu0rm] {
        grid-template-columns: auto 1fr;
        align-items: start;
    }

    .episode-actions[b-fy5e9uu0rm] {
        grid-column: 1 / -1;
    }

    .action[b-fy5e9uu0rm] {
        flex: 1;
        justify-content: center;
    }
}

/* ---------- Level and study-path progress ---------- */
.episode-title a[b-fy5e9uu0rm] { color: inherit; text-decoration: none; }
    .episode-title a:hover[b-fy5e9uu0rm] { text-decoration: underline; }

.episode-badges[b-fy5e9uu0rm] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .25rem;
}

.level-badge[b-fy5e9uu0rm] {
    font-size: .75rem;
    font-weight: bold;
    padding: .05rem .45rem;
    border-radius: 999px;
    background: var(--ink);
    color: #fff;
}

.progress-dots[b-fy5e9uu0rm] { display: inline-flex; gap: 3px; }
.progress-label[b-fy5e9uu0rm] { color: var(--muted); font-size: .8rem; }

    .progress-dots span[b-fy5e9uu0rm] {
        width: 10px;
        height: 10px;
        border: 2px solid var(--ink);
        border-radius: 50%;
        background: #fff;
    }

        .progress-dots span.on[b-fy5e9uu0rm] { background: #198754; border-color: #198754; }

.action.primary[b-fy5e9uu0rm] { background: var(--ink); color: #fff; }
    .action.primary:hover[b-fy5e9uu0rm] { background: var(--accent); border-color: var(--accent); }

@media (max-width: 640px) {
    .episode-actions[b-fy5e9uu0rm] { flex-wrap: wrap; }
    .action[b-fy5e9uu0rm] { flex: 1 1 calc(33.333% - .5rem); padding-inline: .3rem; font-size: .9rem; }
    .action.primary[b-fy5e9uu0rm] { flex-basis: 100%; }
    .episode-card[b-fy5e9uu0rm] { gap: .65rem; }
    .show-picker-hint span[b-fy5e9uu0rm] { display: inline; }
}
/* /Pages/watch/WatchEpisode.razor.rz.scp.css */
/* "Watch the whole episode": the same hand-drawn look as the search page (player card beside a list). Mobile first. */

.watch[b-um10gnhsax] {
    --ink: #2b2b2b;
    --muted: #6b6b6b;
    --paper: #fff;
    --accent: #0d6efd;
    --accent-soft: #e8f0ff;
    --yellow: #ffcc00;

    font-family: 'Comic Neue', Vazirmatn, 'Comic Sans MS', sans-serif;
    color: var(--ink);
    max-width: 1200px;
    margin: 0 auto;
    padding: .5rem .75rem 3rem;
}

.back-link[b-um10gnhsax] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--ink);
    text-decoration: none;
    font-weight: bold;
    margin: .25rem 0 .5rem;
}

    .back-link:hover[b-um10gnhsax] { color: var(--accent); }

.watch-header h1[b-um10gnhsax] { font-size: 1.6rem; margin: 0; }

.episode-line[b-um10gnhsax] {
    margin: .2rem 0 1rem;
    color: var(--muted);
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-items: baseline;
}

    .episode-line strong[b-um10gnhsax] { color: var(--ink); }

.code[b-um10gnhsax] {
    border: 2px dashed var(--ink);
    border-radius: 8px;
    padding: 0 .4rem;
    font-weight: bold;
    color: var(--ink);
}

/* ---------- "Continue where you stopped" ---------- */

.resume[b-um10gnhsax] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .9rem;
    margin-bottom: 1rem;
    padding: .75rem 1rem;
    border: 2px solid var(--ink);
    border-radius: 16px 6px 18px 8px;
    background: #fff8d6;
    box-shadow: 3px 3px 0 var(--ink);
}

    .resume > i[b-um10gnhsax] { font-size: 1.5rem; }
    .resume > span[b-um10gnhsax] { flex: 1 1 260px; }
    .resume em[b-um10gnhsax] { color: var(--muted); }

.resume-actions[b-um10gnhsax] { display: flex; align-items: center; gap: .75rem; }

/* ---------- Layout ---------- */

.results-layout[b-um10gnhsax] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: start;
}

.player-card[b-um10gnhsax], .results-card[b-um10gnhsax] {
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 16px 6px 18px 8px;
    box-shadow: 3px 3px 0 var(--ink);
    padding: .75rem;
    min-width: 0;
}

/* ---------- Player ---------- */

.video-frame[b-um10gnhsax] {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #111;
    border-radius: 10px;
    overflow: hidden;
}

    .video-frame video[b-um10gnhsax] {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: contain;
        background: #111;
        cursor: pointer;
    }

    /* Full screen: the frame fills the screen; the video keeps its shape. */
    .video-frame:fullscreen[b-um10gnhsax] { border-radius: 0; aspect-ratio: auto; }

.tap-to-play[b-um10gnhsax] {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 72px;
    height: 72px;
    transform: translate(-50%, -50%);
    border: 3px solid #fff;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 2.4rem;
    display: grid;
    place-items: center;
    cursor: pointer;
}

    .tap-to-play:hover[b-um10gnhsax] { background: rgba(13, 110, 253, .8); }

.subtitle-line[b-um10gnhsax] {
    min-height: 3.6em;
    margin: .6rem .25rem .4rem;
    font-size: 1.25rem;
    line-height: 1.6;
    text-align: center;
}

    .subtitle-line:empty:not(.has-started)[b-um10gnhsax]::before {
        content: attr(data-placeholder);
        color: #a0a0a0;
        font-size: 1rem;
    }

    /* Words are created by watch-player.js, so ::deep is needed to style them. */
    .subtitle-line[b-um10gnhsax]  .clickable-word {
        color: var(--accent);
        cursor: pointer;
        border-radius: 4px;
        padding: 0 1px;
    }

        .subtitle-line[b-um10gnhsax]  .clickable-word:hover,
        .subtitle-line[b-um10gnhsax]  .clickable-word:focus-visible {
            background: var(--accent-soft);
            outline: none;
        }

        /* Words of a grammar point (watch-player.js): underlined in green; hovering shows its explanation. */
        .subtitle-line[b-um10gnhsax]  .clickable-word.g-word {
            color: #1b5e20;
            background: #ebfbee;
            border-bottom: 2px solid #2f9e44;
            border-radius: 4px 4px 0 0;
        }

        /* Words of a collocation: blue, dotted (grammar is green, solid). */
        .subtitle-line[b-um10gnhsax]  .clickable-word.c-word {
            color: #1864ab;
            background: #e7f5ff;
            border-bottom: 2px dotted #1c7ed6;
            border-radius: 4px 4px 0 0;
        }

        /* "Read slowly" (audio-player.js): words wait in grey and light up one by one. */
        .subtitle-line[b-um10gnhsax]  .clickable-word.reading { color: #8a8a8a; }
        .subtitle-line[b-um10gnhsax]  .clickable-word.reading.current-word { color: var(--ink); background: #ffe680; }

.translation-line[b-um10gnhsax] {
    min-height: 1.6em;
    margin: -.25rem .25rem .5rem;
    font-family: Vazirmatn, Tahoma, 'Segoe UI', sans-serif;
    font-size: 1.05rem;
    text-align: center;
    color: #3d5afe;
}

    .translation-line.hidden[b-um10gnhsax] { display: none; }

/* Grammar in the line being said (found by the structure rules); each chip opens that grammar point. */
.line-grammar[b-um10gnhsax] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    margin: 0 .25rem .6rem;
}

    .lg-label[b-um10gnhsax] {
        display: inline-flex;
        align-items: center;
        gap: .25rem;
        font-size: .8rem;
        color: var(--muted);
    }

    .lg-chip[b-um10gnhsax] {
        font: inherit;
        cursor: pointer;
        text-align: left;
        display: inline-flex;
        align-items: baseline;
        flex-wrap: wrap;
        gap: .35rem;
        max-width: 100%;
        padding: .2rem .65rem;
        border: 2px solid #2f9e44;
        border-radius: 10px 4px 10px 4px;
        background: #ebfbee;
        color: var(--ink);
        font-size: .88rem;
        text-decoration: none;
    }

        .lg-chip:hover[b-um10gnhsax],
        .lg-chip:focus-visible[b-um10gnhsax] { background: #d3f9d8; outline: none; }

    .lg-level[b-um10gnhsax] {
        font-size: .72rem;
        font-weight: bold;
        color: #2b8a3e;
    }

    .lg-title[b-um10gnhsax] { font-weight: bold; }

    .lg-words[b-um10gnhsax] {
        color: #2b8a3e;
        font-style: italic;
        overflow-wrap: anywhere;
    }

.tools[b-um10gnhsax] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .4rem;
    margin-top: .65rem;
}

.speed[b-um10gnhsax] {
    display: inline-flex;
    border: 2px solid var(--ink);
    border-radius: 999px;
    overflow: hidden;
}

    .speed button[b-um10gnhsax] {
        min-height: 38px;
        padding: 0 .65rem;
        border: none;
        background: var(--paper);
        font: inherit;
        font-size: .9rem;
        cursor: pointer;
    }

        .speed button + button[b-um10gnhsax] { border-left: 2px solid var(--ink); }
        .speed button.active[b-um10gnhsax] { background: var(--ink); color: #fff; }

.tool[b-um10gnhsax] {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: 0 .75rem;
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: var(--paper);
    font: inherit;
    font-size: .9rem;
    color: var(--ink);
    cursor: pointer;
}

    .tool:hover[b-um10gnhsax] { background: var(--accent-soft); }
    .tool.active[b-um10gnhsax] { background: var(--ink); color: #fff; }
    .tool.mark.active[b-um10gnhsax] { background: #e63946; border-color: #e63946; }
    .tool.save[b-um10gnhsax] { background: var(--yellow); }
    .tool.save.active[b-um10gnhsax] { background: #198754; border-color: #198754; color: #fff; }
    .tool:disabled[b-um10gnhsax] { opacity: .5; cursor: not-allowed; }

.tool-spinner[b-um10gnhsax] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-b-um10gnhsax .8s linear infinite;
}

.tool-note[b-um10gnhsax] {
    margin: .5rem 0 0;
    text-align: center;
    font-size: .88rem;
    color: #8a5a00;
}

    .tool-note.warn[b-um10gnhsax] { color: #b02a37; }

.tap-hint[b-um10gnhsax] {
    margin: .6rem 0 0;
    font-size: .82rem;
    color: var(--muted);
    text-align: center;
}

/* ---------- The list ---------- */

.list-head[b-um10gnhsax] {
    display: grid;
    gap: .5rem;
    margin-bottom: .6rem;
    min-width: 0;
    max-width: 100%;
}

    /* Form controls have an intrinsic width in some browsers. Keep every toolbar row inside the narrow list card. */
    .list-head > *[b-um10gnhsax] {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

.tabs[b-um10gnhsax] { display: flex; gap: .4rem; }

    .tabs button[b-um10gnhsax] {
        flex: 1;
        min-height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .35rem;
        border: 2px solid var(--ink);
        border-radius: 10px 4px 10px 4px;
        background: var(--paper);
        font: inherit;
        font-size: .92rem;
        cursor: pointer;
    }

        .tabs button.active[b-um10gnhsax] { background: var(--ink); color: #fff; }
        .tabs button .bi-flag-fill[b-um10gnhsax] { color: #e63946; }

    .tabs .count[b-um10gnhsax] {
        min-width: 1.6em;
        padding: 0 .35em;
        border-radius: 999px;
        background: rgba(0, 0, 0, .08);
        font-size: .8rem;
    }

    .tabs button.active .count[b-um10gnhsax] { background: rgba(255, 255, 255, .25); }

.find[b-um10gnhsax] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .4rem;
    width: 100%;
    min-width: 0;
    padding: 0 .6rem;
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: var(--paper);
    box-sizing: border-box;
}

    .find input[b-um10gnhsax] {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        min-height: 38px;
        padding: 0;
        border: none;
        outline: none;
        background: transparent;
        font: inherit;
        box-sizing: border-box;
    }

/* "Show the lines that use a grammar point". */
.grammar-filter[b-um10gnhsax] {
    display: flex;
    align-items: center;
    gap: .4rem;
    width: 100%;
    min-width: 0;
    padding: 0 .6rem;
    border: 2px solid #2f9e44;
    border-radius: 999px;
    background: #ebfbee;
    box-sizing: border-box;
}

    .grammar-filter .bi[b-um10gnhsax] { color: #2b8a3e; }

    .grammar-filter select[b-um10gnhsax] {
        flex: 1;
        min-width: 0;
        min-height: 38px;
        border: none;
        outline: none;
        background: transparent;
        color: var(--ink);
        font: inherit;
        text-overflow: ellipsis;
    }

    .grammar-learn[b-um10gnhsax] {
        padding: 0;
        border: none;
        background: none;
        font: inherit;
        text-decoration: underline;
        cursor: pointer;
        flex: 0 0 auto;
        font-size: .85rem;
        color: #2b8a3e;
        white-space: nowrap;
    }

/* ---------- Buttons and states ---------- */

.btn-sketch[b-um10gnhsax] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 44px;
    padding: .45rem 1rem;
    font: inherit;
    font-weight: bold;
    color: var(--ink);
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 10px 4px 10px 4px;
    box-shadow: 2px 2px 0 var(--ink);
    text-decoration: none;
    cursor: pointer;
}

    .btn-sketch:hover[b-um10gnhsax] { background: var(--accent-soft); }
    .btn-sketch.primary[b-um10gnhsax] { background: var(--ink); color: #fff; }
    .btn-sketch.primary:hover[b-um10gnhsax] { background: var(--accent); border-color: var(--accent); }

.link-btn[b-um10gnhsax] {
    min-height: 40px;
    border: none;
    background: transparent;
    padding: 0;
    font: inherit;
    font-weight: bold;
    color: var(--accent);
    cursor: pointer;
}

.state-box[b-um10gnhsax] {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--muted);
}

    .state-box i[b-um10gnhsax] {
        font-size: 2.25rem;
        display: block;
        margin-bottom: .5rem;
        color: var(--ink);
    }

.spinner[b-um10gnhsax] {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    border: 3px solid #ddd;
    border-top-color: var(--ink);
    border-radius: 50%;
    animation: spin-b-um10gnhsax .8s linear infinite;
}

@keyframes spin-b-um10gnhsax { to { transform: rotate(360deg); } }

/* ---------- Selected words: bookmark / add word / dictionary ---------- */

.selection-tools[b-um10gnhsax] {
    position: fixed;
    z-index: 1050;
    display: flex;
    gap: 2px;
    padding: 4px;
    background: #2b2b2b;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}

    .selection-tools.above[b-um10gnhsax] { transform: translate(-50%, -100%); }
    .selection-tools.below[b-um10gnhsax] { transform: translate(-50%, 0); }

    .selection-tools[b-um10gnhsax]::after {
        content: "";
        position: absolute;
        left: 50%;
        margin-left: -6px;
        border: 6px solid transparent;
    }

    .selection-tools.above[b-um10gnhsax]::after { top: 100%; border-top-color: #2b2b2b; }
    .selection-tools.below[b-um10gnhsax]::after { bottom: 100%; border-bottom-color: #2b2b2b; }

    .selection-tools button[b-um10gnhsax] {
        width: 40px;
        height: 36px;
        display: grid;
        place-items: center;
        border: none;
        border-radius: 7px;
        background: transparent;
        color: #fff;
        font-size: 1.15rem;
        cursor: pointer;
    }

        .selection-tools button:hover[b-um10gnhsax],
        .selection-tools button:focus-visible[b-um10gnhsax] {
            background: #4a4a4a;
            outline: none;
        }

/* Focus styles for keyboard users */
.tool:focus-visible[b-um10gnhsax], .speed button:focus-visible[b-um10gnhsax], .tabs button:focus-visible[b-um10gnhsax],
.btn-sketch:focus-visible[b-um10gnhsax], .link-btn:focus-visible[b-um10gnhsax], .tap-to-play:focus-visible[b-um10gnhsax] {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

@media (min-width: 576px) {
    .watch[b-um10gnhsax] { padding: 1rem 1rem 3rem; }
    .player-card[b-um10gnhsax], .results-card[b-um10gnhsax] { padding: 1rem; }
    .watch-header h1[b-um10gnhsax] { font-size: 1.9rem; }
}

/* Desktop: player beside a scrollable list (like the search page). */
@media (min-width: 992px) {
    .results-layout[b-um10gnhsax] { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
    .player-card[b-um10gnhsax] { position: sticky; top: 5rem; }
}

/* ---------- Subtitle timing (the learner's own video) ---------- */

.timing[b-um10gnhsax] {
    margin-top: .75rem;
    border: 2px solid var(--ink);
    border-radius: 12px;
    background: var(--paper);
}

    .timing.changed[b-um10gnhsax] { border-color: var(--accent); }

.timing-head[b-um10gnhsax] {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding: .55rem .8rem;
    border: 0;
    background: none;
    font: inherit;
    color: var(--ink);
    cursor: pointer;
    text-align: left;
}

    .timing-head:hover[b-um10gnhsax] { background: var(--accent-soft); border-radius: 10px; }

.timing-title[b-um10gnhsax] { font-weight: 700; }

.timing-value[b-um10gnhsax] {
    padding: .05rem .55rem;
    border-radius: 999px;
    background: #f1f1f1;
    font-variant-numeric: tabular-nums;
    font-size: .88rem;
}

    .timing.changed .timing-value[b-um10gnhsax] { background: var(--accent); color: #fff; }

.timing-status[b-um10gnhsax] { font-size: .82rem; color: var(--muted); display: inline-flex; align-items: center; gap: .25rem; }
    .timing-status.ok[b-um10gnhsax] { color: #198754; }
    .timing-status.bad[b-um10gnhsax] { color: #b02a37; }
    .timing-status .tool-spinner[b-um10gnhsax] { border-color: rgba(0, 0, 0, .15); border-top-color: var(--ink); }

.timing-open[b-um10gnhsax] { margin-left: auto; font-size: .88rem; color: var(--accent); }

.timing-body[b-um10gnhsax] { padding: 0 .8rem .8rem; }

.timing-help[b-um10gnhsax] { margin: 0 0 .6rem; font-size: .88rem; color: var(--muted); }

.timing-row[b-um10gnhsax] {
    display: grid;
    grid-template-columns: 1fr;
    gap: .6rem;
    align-items: center;
}

.timing-side[b-um10gnhsax] { display: grid; gap: .3rem; justify-items: center; }
.timing-label[b-um10gnhsax] { font-size: .85rem; font-weight: 700; }
    .timing-label small[b-um10gnhsax] { font-weight: 400; color: var(--muted); }
.timing-buttons[b-um10gnhsax] { display: flex; gap: .35rem; }
    .timing-buttons .tool[b-um10gnhsax] { min-width: 52px; justify-content: center; font-variant-numeric: tabular-nums; }

.timing-now[b-um10gnhsax] { display: grid; justify-items: center; order: -1; }
    .timing-now strong[b-um10gnhsax] { font-size: 1.6rem; font-variant-numeric: tabular-nums; line-height: 1.1; }
    .timing-now small[b-um10gnhsax] { color: var(--muted); font-size: .8rem; }

.timing-actions[b-um10gnhsax] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .75rem;
    margin-top: .75rem;
}

.state-hint[b-um10gnhsax] { display: block; margin-top: .9rem; font-size: .82rem; }

@media (min-width: 640px) {
    .timing-row[b-um10gnhsax] { grid-template-columns: 1fr auto 1fr; }
    .timing-now[b-um10gnhsax] { order: 0; padding: 0 .5rem; }
}

/* ---------- Second line choice (own videos) ---------- */
.second-choice button[b-um10gnhsax] { padding: 0 .65rem; }
.second-note[b-um10gnhsax] { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .35rem; color: #0a4fb4; }
.tool-spinner.dark[b-um10gnhsax] { border-color: rgba(0, 0, 0, .15); border-top-color: var(--accent); }
.translation-line[dir="ltr"][b-um10gnhsax] { font-family: inherit; }

/* Collocation chips: the grammar chips' shape, in blue. */
.line-grammar.collocations[b-um10gnhsax] { margin-top: -.25rem; }
    .line-grammar.collocations .lg-label .bi[b-um10gnhsax] { color: #1864ab; }
.lg-chip.colloc[b-um10gnhsax] { border-color: #1c7ed6; background: #e7f5ff; }
    .lg-chip.colloc:hover[b-um10gnhsax], .lg-chip.colloc:focus-visible[b-um10gnhsax] { background: #d0ebff; }
    .lg-chip.colloc .lg-level[b-um10gnhsax] { color: #1864ab; }
.lg-practice[b-um10gnhsax] { font-size: .85rem; color: #1864ab; white-space: nowrap; }

/* ---------- A steady place for the line ---------- */
/* The area keeps room for a long line, its translation and one row of chips, so a
   two- or three-line subtitle doesn't push the tools and the list up and down. */
.caption-area[b-um10gnhsax] { min-height: 8.2rem; margin-top: .2rem; }
    .caption-area.with-translation[b-um10gnhsax] { min-height: 10.2rem; }
    .caption-area .subtitle-line[b-um10gnhsax] { min-height: 3.2em; margin-top: .5rem; }

/* Chips stay on one row each (swipe sideways for more) instead of wrapping onto new rows. */
.line-grammar[b-um10gnhsax] {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: thin;
    padding-bottom: .15rem;
}
    .line-grammar > *[b-um10gnhsax] { flex: 0 0 auto; }
    .line-grammar .lg-chip[b-um10gnhsax] { flex-wrap: nowrap; white-space: nowrap; max-width: none; }

@media (max-width: 575.98px) {
    .caption-area[b-um10gnhsax] { min-height: 9.4rem; }
        .caption-area.with-translation[b-um10gnhsax] { min-height: 12.6rem; }
        /* Three lines of the smaller phone text. */
        .caption-area .subtitle-line[b-um10gnhsax] { font-size: 1.12rem; line-height: 1.5; min-height: 4.5em; }
        .caption-area .translation-line[b-um10gnhsax] { min-height: 3.1em; line-height: 1.55; font-size: 1rem; }
}

/* ---------- Phones: a bigger picture ---------- */
/* The player card loses its frame and the video runs from edge to edge of the screen (about 15% larger). */
@media (max-width: 575.98px) {
    .player-card[b-um10gnhsax] {
        margin-inline: -1.5rem; /* the page's two gutters (layout + page) */
        padding-top: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .video-frame[b-um10gnhsax] { margin-inline: -.75rem; border-radius: 0; }
}
/* /Pages/watch/WatchLineList.razor.rz.scp.css */
/* The lines of the episode, styled like the search page's scene list. The list scrolls inside itself. */

.line-list[b-zdv65xpmhl] {
    position: relative; /* offsetTop of the rows is measured from here (auto-scroll) */
    list-style: none;
    margin: 0;
    padding: 0 .1rem 0 0;
    display: grid;
    gap: .35rem;
    max-height: 55vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.line-row[b-zdv65xpmhl] {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    padding: .6rem;
    border: 2px solid transparent;
    border-radius: 10px;
    background: #fafafa;
    color: #2b2b2b;
    cursor: pointer;
}

    .line-row:hover[b-zdv65xpmhl] { border-color: #d6d6d6; background: #fff; }
    .line-row:focus-visible[b-zdv65xpmhl] { outline: 3px solid #0d6efd; outline-offset: 1px; }
    .line-row.marked[b-zdv65xpmhl] { background: #fff1f2; }

/* The line being said: class "active" on the <li>, set by watch-player.js. */
li.active .line-row[b-zdv65xpmhl] {
    border-color: #2b2b2b;
    background: #fffdf3;
}

.line-icon[b-zdv65xpmhl] {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #e8f0ff;
    color: #0d6efd;
}

li.active .line-icon[b-zdv65xpmhl] { background: #2b2b2b; color: #fff; }

.line-body[b-zdv65xpmhl] { flex: 1; min-width: 0; display: grid; gap: .15rem; }

/* Selectable, so learners can pick words to save. */
.line-text[b-zdv65xpmhl] { overflow-wrap: anywhere; user-select: text; }

    .line-text mark[b-zdv65xpmhl] {
        background: #fff3b0;
        padding: 0 .1em;
        border-radius: 3px;
        font-weight: bold;
    }

        /* The words of the grammar point the list is filtered to. */
        .line-text mark.grammar[b-zdv65xpmhl] {
            background: #d3f9d8;
            color: #1b5e20;
        }

.line-fa[b-zdv65xpmhl] {
    font-family: Vazirmatn, Tahoma, 'Segoe UI', sans-serif;
    font-size: .92rem;
    color: #3d5afe;
    text-align: right;
}

.line-meta[b-zdv65xpmhl] { font-size: .78rem; color: #6b6b6b; }

.mark-btn[b-zdv65xpmhl] {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 2px solid transparent;
    border-radius: 50%;
    background: transparent;
    color: #9a9a9a;
    cursor: pointer;
}

    .mark-btn:hover[b-zdv65xpmhl] { border-color: #e63946; color: #e63946; }
    .mark-btn.on[b-zdv65xpmhl] { color: #e63946; }
    .mark-btn:focus-visible[b-zdv65xpmhl] { outline: 3px solid #0d6efd; outline-offset: 1px; }

.list-empty[b-zdv65xpmhl] {
    margin: 1rem .25rem;
    color: #6b6b6b;
    text-align: center;
}

@media (min-width: 992px) {
    .line-list[b-zdv65xpmhl] { max-height: calc(100vh - 14rem); }
}