/* Professional learning layer for the language masterclass. */
.mc-pro-hud {
    position: fixed;
    left: 18px;
    top: 92px;
    z-index: 9000;
    width: 238px;
    padding: 15px;
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 20px;
    color: #e2e8f0;
    background: linear-gradient(145deg, rgba(15, 23, 42, .94), rgba(2, 6, 23, .9));
    box-shadow: 0 22px 60px rgba(0, 0, 0, .34);
    backdrop-filter: blur(18px);
}
.mc-pro-hud-head,
.mc-pro-hud-line,
.mc-pro-modal-head,
.mc-pro-lab-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.mc-pro-hud-title {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: #a5b4fc;
}
.mc-pro-level {
    padding: 4px 8px;
    border-radius: 99px;
    background: rgba(52, 211, 153, .12);
    color: #6ee7b7;
    font-size: 10px;
    font-weight: 800;
}
.mc-pro-mastery {
    display: grid;
    grid-template-columns: 58px 1fr;
    align-items: center;
    gap: 12px;
    margin: 14px 0;
}
.mc-pro-ring {
    --score: 0;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: conic-gradient(#34d399 calc(var(--score) * 1%), rgba(255,255,255,.07) 0);
    position: relative;
}
.mc-pro-ring::after {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: inherit;
    background: #0b1226;
}
.mc-pro-ring b { position: relative; z-index: 1; font-size: 13px; }
.mc-pro-mastery-copy strong { display: block; font-size: 13px; }
.mc-pro-mastery-copy span { color: #64748b; font-size: 10px; line-height: 1.45; display: block; margin-top: 3px; }
.mc-pro-hud-line { font-size: 11px; color: #94a3b8; margin: 8px 0; }
.mc-pro-hud-line b { color: #f8fafc; }
.mc-pro-skill { margin-top: 9px; }
.mc-pro-skill-label { display:flex; justify-content:space-between; color:#94a3b8; font-size:10px; margin-bottom:4px; }
.mc-pro-skill-bar { height: 5px; background: rgba(255,255,255,.06); border-radius: 99px; overflow: hidden; }
.mc-pro-skill-bar span { display:block; height:100%; width:0; border-radius:inherit; background:linear-gradient(90deg,#6366f1,#34d399); transition:width .45s ease; }
.mc-pro-hud-actions { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:13px; }
.mc-pro-btn {
    border: 1px solid rgba(148, 163, 184, .2);
    border-radius: 11px;
    padding: 9px 11px;
    color: #e2e8f0;
    background: rgba(255,255,255,.045);
    font-size: 11px;
    font-weight: 750;
    cursor: pointer;
    transition: .2s ease;
}
.mc-pro-btn:hover { border-color:#818cf8; background:rgba(99,102,241,.13); transform:translateY(-1px); }
.mc-pro-btn.primary { border-color:rgba(52,211,153,.4); background:rgba(52,211,153,.12); color:#a7f3d0; }
.mc-pro-btn.danger { border-color:rgba(251,113,133,.35); color:#fda4af; }

.mc-pro-lab {
    margin-top: 22px;
    padding: 18px;
    border: 1px solid rgba(99,102,241,.28);
    border-radius: 17px;
    background: linear-gradient(135deg, rgba(99,102,241,.1), rgba(15,23,42,.72));
}
.mc-pro-lab-head strong { font-size:13px; color:#c7d2fe; }
.mc-pro-lab-head span { font-size:10px; color:#64748b; }
.mc-pro-lab-target {
    margin: 13px 0;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(2,6,23,.58);
    color: #f8fafc;
    font: 700 15px/1.55 "JetBrains Mono", monospace;
}
.mc-pro-lab-actions { display:flex; flex-wrap:wrap; gap:8px; }
.mc-pro-result { display:none; margin-top:11px; padding:10px 12px; border-radius:11px; font-size:12px; line-height:1.5; }
.mc-pro-result.show { display:block; animation:slideReveal .35s ease; }
.mc-pro-result.good { color:#a7f3d0; background:rgba(16,185,129,.12); border:1px solid rgba(52,211,153,.25); }
.mc-pro-result.warn { color:#fde68a; background:rgba(245,158,11,.1); border:1px solid rgba(251,191,36,.25); }
.mc-pro-dictation { display:none; gap:8px; margin-top:10px; }
.mc-pro-dictation.show { display:flex; }
.mc-pro-input {
    min-width: 0;
    flex: 1;
    border: 1px solid rgba(148,163,184,.25);
    border-radius: 11px;
    padding: 10px 12px;
    background: rgba(2,6,23,.75);
    color: #f8fafc;
    outline: none;
}
.mc-pro-input:focus { border-color:#818cf8; box-shadow:0 0 0 3px rgba(99,102,241,.13); }
.mc-pro-required {
    margin-top: 14px;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(251,191,36,.22);
    background: rgba(245,158,11,.07);
}
.mc-pro-required p { margin:0 0 9px; color:#fde68a; font-size:12px; }
.mc-pro-lock-note {
    position: fixed;
    left: 50%;
    bottom: 116px;
    z-index: 12000;
    transform: translateX(-50%) translateY(15px);
    opacity: 0;
    pointer-events: none;
    padding: 10px 17px;
    border-radius: 999px;
    color: #fde68a;
    background: rgba(15,23,42,.96);
    border: 1px solid rgba(251,191,36,.3);
    font-size: 12px;
    box-shadow: 0 16px 40px rgba(0,0,0,.35);
    transition: .25s ease;
}
.mc-pro-lock-note.show { opacity:1; transform:translateX(-50%) translateY(0); }

.mc-pro-modal-shell {
    position: fixed;
    inset: 0;
    z-index: 25000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(2,6,23,.76);
    backdrop-filter: blur(12px);
}
.mc-pro-modal-shell.show { display:flex; }
.mc-pro-modal {
    width: min(760px, 100%);
    max-height: min(780px, 90vh);
    overflow:auto;
    border: 1px solid rgba(129,140,248,.28);
    border-radius: 24px;
    padding: 24px;
    background:linear-gradient(145deg,#111827,#020617);
    box-shadow:0 35px 100px rgba(0,0,0,.55);
}
.mc-pro-modal-head h3 { margin:0; font-size:20px; }
.mc-pro-modal-head p { margin:4px 0 0; color:#64748b; font-size:12px; }
.mc-pro-dialogue {
    min-height: 230px;
    margin: 20px 0;
    padding: 16px;
    border-radius: 16px;
    background:rgba(2,6,23,.62);
}
.mc-pro-bubble { max-width:82%; padding:11px 14px; border-radius:14px; margin:9px 0; font-size:13px; line-height:1.5; }
.mc-pro-bubble.coach { background:rgba(99,102,241,.15); border:1px solid rgba(129,140,248,.2); }
.mc-pro-bubble.student { margin-left:auto; background:rgba(52,211,153,.12); border:1px solid rgba(52,211,153,.2); }
.mc-pro-report { margin-top:24px; width:min(720px,92vw); }
.mc-pro-report-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.mc-pro-report-card { padding:13px; border-radius:13px; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.08); }
.mc-pro-report-card b { display:block; color:#a7f3d0; font-size:20px; }
.mc-pro-report-card span { color:#94a3b8; font-size:10px; }
.mc-pro-screenreader { position:absolute!important; width:1px!important; height:1px!important; overflow:hidden!important; clip:rect(1px,1px,1px,1px)!important; }

@media (max-width: 1350px) { .mc-pro-hud { width:200px; } }
@media (max-width: 1150px) {
    .mc-pro-hud { position:fixed; top:auto; left:12px; bottom:14px; width:auto; max-width:calc(100vw - 24px); padding:10px 12px; }
    .mc-pro-mastery, .mc-pro-skills { display:none; }
    .mc-pro-hud-head { gap:16px; }
    .mc-pro-hud-actions { margin:0 0 0 12px; display:flex; }
    .mc-pro-hud-line { display:none; }
}
@media (max-width: 640px) {
    .mc-pro-hud { right:12px; display:flex; align-items:center; justify-content:space-between; }
    .mc-pro-hud-actions .mc-pro-btn:first-child { display:none; }
    .mc-pro-report-grid { grid-template-columns:1fr 1fr; }
    .mc-pro-dictation { flex-direction:column; }
}
@media (prefers-reduced-motion: reduce) {
    .mc-pro-ring, .mc-pro-skill-bar span, .mc-pro-btn, .mc-pro-lock-note { transition:none!important; animation:none!important; }
    body { cursor:auto!important; }
    .float-token, #langParticles, .grain, .cursor-glow, .cursor-dot { display:none!important; }
}