.vlang { padding: 16px 16px 40px; }


.vlang-loading, .vlang-error, .vlang-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; padding: 50px 20px; text-align: center; color: #8b949e; font-size: 13px;
}
.vlang-error svg { width: 40px; height: 40px; color: #484f58; }
.vlang-spinner {
    width: 38px; height: 38px; border: 3px solid rgba(139,92,246,.2);
    border-top-color: #8b5cf6; border-radius: 50%; animation: vlang-spin 1s linear infinite;
}
@keyframes vlang-spin { to { transform: rotate(360deg); } }
.vlang-error button {
    background: rgba(139,92,246,.12); border: 1px solid rgba(139,92,246,.35); border-radius: 8px;
    color: #a78bfa; font-family: 'Rajdhani', sans-serif; font-size: 12px; font-weight: 700;
    padding: 8px 16px; cursor: pointer;
}


.vlang-journey {
    background: linear-gradient(135deg, rgba(139,92,246,.16), rgba(88,166,255,.06));
    border: 1px solid rgba(139,92,246,.24); border-radius: 16px; padding: 16px; margin-bottom: 16px;
}
.vlang-journey-tag {
    font-family: 'Rajdhani', sans-serif; font-size: 10.5px; letter-spacing: .16em;
    text-transform: uppercase; color: #a78bfa; font-weight: 600;
}
.vlang-journey h3 { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 19px; margin: 5px 0 4px; color: #fff; }
.vlang-journey p { margin: 0; font-size: 12px; color: #c9d1d9; line-height: 1.5; }


.vlang-tracklist { display: flex; flex-direction: column; gap: 16px; }
.vlang-track-card {
    background: linear-gradient(180deg, rgba(33,38,45,.6) 0%, rgba(13,17,23,.9) 100%);
    border: 1px solid rgba(139,92,246,.15); border-radius: 16px; overflow: hidden;
    cursor: pointer; transition: all .3s ease;
}
.vlang-track-card:hover { border-color: rgba(139,92,246,.4); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(139,92,246,.15); }
.vlang-track-card.locked { cursor: default; }
.vlang-track-card.locked:hover { transform: none; box-shadow: none; border-color: rgba(139,92,246,.15); }
.vlang-thumb { position: relative; height: 108px; display: flex; align-items: center; justify-content: center; }
.vlang-thumb.t0 { background: linear-gradient(135deg,#3b1e5b,#5b2c8a 60%,#7c3aed); }
.vlang-thumb.t1 { background: linear-gradient(135deg,#0b2a4a,#155e9e 55%,#2a9d8f); }
.vlang-thumb .glow { position: absolute; inset: 0; background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.18), transparent 60%); }
.vlang-thumb svg { width: 50px; height: 50px; color: rgba(255,255,255,.92); position: relative; filter: drop-shadow(0 4px 12px rgba(0,0,0,.35)); }
.vlang-badge {
    position: absolute; top: 10px; right: 10px; padding: 4px 10px; border-radius: 20px;
    font-size: 10px; font-weight: 700; text-transform: uppercase; font-family: 'Rajdhani', sans-serif; letter-spacing: .04em;
}
.vlang-badge.a1 { background: rgba(34,197,94,.22); color: #4ade80; border: 1px solid rgba(34,197,94,.35); }
.vlang-badge.a2 { background: rgba(234,179,8,.22); color: #eab308; border: 1px solid rgba(234,179,8,.35); }
.vlang-lock {
    position: absolute; top: 10px; left: 10px; width: 26px; height: 26px; border-radius: 50%;
    background: rgba(0,0,0,.5); display: grid; place-items: center; color: #fff;
}
.vlang-tbody { padding: 15px 16px 16px; }
.vlang-tbody h4 { margin: 0 0 5px; font-size: 16px; font-weight: 600; color: #fff; }
.vlang-tbody .desc { margin: 0 0 12px; font-size: 12px; color: #8b949e; line-height: 1.45; }
.vlang-tmeta { display: flex; gap: 14px; font-size: 11px; color: #6e7681; margin-bottom: 12px; }
.vlang-tprog { display: flex; align-items: center; gap: 10px; }
.vlang-tprog .bar { flex: 1; height: 5px; background: rgba(255,255,255,.1); border-radius: 3px; overflow: hidden; }
.vlang-tprog .bar > i { display: block; height: 100%; background: linear-gradient(90deg,#8b5cf6,#a78bfa); border-radius: 3px; }
.vlang-tprog .pct { font-size: 11px; font-weight: 600; color: #8b5cf6; min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; }
.vlang-cta { display: block; text-align: center; font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; padding: 11px; border-top: 1px solid rgba(255,255,255,.08); color: #6e7681; }
.vlang-track-card:not(.locked) .vlang-cta { color: #a78bfa; }


.vlang-track-card.maintenance { cursor: default; border-color: rgba(234,179,8,.3); }
.vlang-track-card.maintenance:hover { transform: none; box-shadow: none; border-color: rgba(234,179,8,.3); }
.vlang-maint {
    position: absolute; top: 10px; left: 10px; width: 26px; height: 26px; border-radius: 50%;
    background: rgba(234,179,8,.92); display: grid; place-items: center; color: #1c1400;
}
.vlang-tbody .vlang-maint-txt { color: #eab308; }
.vlang-track-card.maintenance .vlang-cta { color: #eab308; }


.vlang-back {
    display: inline-flex; align-items: center; gap: 6px; background: none; border: none;
    color: #8b5cf6; font-family: 'Rajdhani', sans-serif; font-weight: 600; font-size: 13px;
    cursor: pointer; padding: 4px 0; margin-bottom: 12px;
}


.vlang-track-hero { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
.vlang-track-hero .th { width: 60px; height: 60px; border-radius: 14px; flex: 0 0 auto; display: grid; place-items: center; background: linear-gradient(135deg,#3b1e5b,#7c3aed); }
.vlang-track-hero .th svg { width: 30px; height: 30px; color: #fff; }
.vlang-track-hero h3 { margin: 0 0 3px; font-size: 17px; color: #fff; font-weight: 700; }
.vlang-track-hero p { margin: 0; font-size: 12px; color: #8b949e; }
.vlang-prog { background: rgba(139,92,246,.1); border: 1px solid rgba(139,92,246,.2); border-radius: 12px; padding: 13px 15px; margin-bottom: 16px; }
.vlang-prog .row { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 9px; }
.vlang-prog .row .a { color: #8b5cf6; font-weight: 600; } .vlang-prog .row .b { color: #8b949e; }
.vlang-prog .track { height: 8px; background: rgba(255,255,255,.1); border-radius: 4px; overflow: hidden; }
.vlang-prog .track > i { display: block; height: 100%; background: linear-gradient(90deg,#8b5cf6,#a78bfa); border-radius: 4px; }

.vlang-units { display: flex; flex-direction: column; gap: 12px; }
.vlang-unit { background: rgba(30,41,59,.5); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; overflow: hidden; }
.vlang-unit.done { border-color: rgba(34,197,94,.3); }
.vlang-unit-h { display: flex; justify-content: space-between; align-items: center; padding: 14px 15px; cursor: pointer; }
.vlang-unit-h:hover { background: rgba(255,255,255,.03); }
.vlang-unit-info { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.vlang-unit-badge { width: 26px; height: 26px; border-radius: 50%; background: rgba(139,92,246,.18); display: grid; place-items: center; font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 13px; color: #a78bfa; flex: 0 0 auto; }
.vlang-unit.done .vlang-unit-badge { background: rgba(34,197,94,.2); color: #22c55e; }
.vlang-unit-title { margin: 0; font-size: 14px; font-weight: 600; color: #fff; }
.vlang-unit-sub { font-size: 11px; color: #6e7681; }
.vlang-unit-count { font-size: 11px; color: #6e7681; margin-left: auto; margin-right: 8px; white-space: nowrap; }
.vlang-unit-tg { color: #6e7681; transition: transform .3s; flex: 0 0 auto; }
.vlang-unit.open .vlang-unit-tg { transform: rotate(180deg); }
.vlang-unit-c { display: none; padding: 0 15px 14px; }
.vlang-unit.open .vlang-unit-c { display: block; }
.vlang-llist { display: flex; flex-direction: column; gap: 8px; }
.vlang-lrow { display: flex; align-items: center; gap: 12px; padding: 12px; background: rgba(255,255,255,.03); border-radius: 8px; cursor: pointer; transition: all .2s; }
.vlang-lrow:hover { background: rgba(139,92,246,.1); }
.vlang-lrow.locked { opacity: .5; cursor: not-allowed; }
.vlang-lrow.done { opacity: .75; }
.vlang-lst { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255,255,255,.2); display: grid; place-items: center; flex: 0 0 auto; color: #6e7681; }
.vlang-lrow.done .vlang-lst { background: #22c55e; border-color: #22c55e; color: #fff; }
.vlang-lrow.current .vlang-lst { border-color: #8b5cf6; color: #8b5cf6; }
.vlang-lrow .lname { flex: 1; font-size: 13px; color: #c9d1d9; }
.vlang-lrow.current .lname { color: #fff; font-weight: 500; }
.vlang-lrow .lxp { font-size: 11px; color: #8b5cf6; font-weight: 600; }


.vlang-lbar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.vlang-x { background: none; border: none; color: #8b949e; cursor: pointer; padding: 2px; display: grid; place-items: center; }
.vlang-ltrack { flex: 1; height: 12px; border-radius: 8px; background: rgba(255,255,255,.08); overflow: hidden; border: 1px solid rgba(255,255,255,.08); }
.vlang-ltrack > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg,#8b5cf6,#a78bfa); transition: width .4s cubic-bezier(.4,0,.2,1); }
.vlang-guide-toggle {
    display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; padding: 6px 8px;
    border: 1px solid rgba(139,92,246,.28); border-radius: 9px; background: rgba(139,92,246,.1);
    color: #a78bfa; cursor: pointer; font-family: 'Rajdhani', sans-serif; font-size: 11px; font-weight: 700;
}


.vlang-guide { padding-bottom: 8px; }
.vlang-guide > section { margin-bottom: 14px; }
.vlang-guide-head {
    padding: 16px; border: 1px solid rgba(139,92,246,.24); border-radius: 16px;
    background: linear-gradient(135deg,rgba(139,92,246,.16),rgba(88,166,255,.05));
}
.vlang-guide-head > span, .vlang-guide-label {
    display: block; font-family: 'Rajdhani', sans-serif; text-transform: uppercase;
    letter-spacing: .13em; color: #a78bfa; font-size: 10px; font-weight: 700; margin-bottom: 5px;
}
.vlang-guide-head h2 { margin: 0 0 5px; color: #fff; font-family: 'Rajdhani', sans-serif; font-size: 23px; line-height: 1.15; }
.vlang-guide-head p, .vlang-scene p, .vlang-microtip p, .vlang-common-error p, .vlang-mission p {
    margin: 0; color: #c9d1d9; font-size: 13px; line-height: 1.55;
}
.vlang-scene, .vlang-microtip, .vlang-common-error, .vlang-mission {
    padding: 13px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.035);
}
.vlang-microtip { border-color: rgba(88,166,255,.22); background: rgba(88,166,255,.06); }
.vlang-microtip .vlang-guide-label { color: #58a6ff; }
.vlang-common-error { border-color: rgba(234,179,8,.24); background: rgba(234,179,8,.06); }
.vlang-common-error .vlang-guide-label { color: #eab308; }
.vlang-mission { border-color: rgba(34,197,94,.24); background: rgba(34,197,94,.06); }
.vlang-mission .vlang-guide-label { color: #4ade80; }
.vlang-expressions { display: grid; grid-template-columns: 1fr; gap: 9px; }
.vlang-expr {
    padding: 13px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.09);
    background: rgba(30,41,59,.52);
}
.vlang-expr-en { color: #fff; font-family: 'Rajdhani', sans-serif; font-size: 18px; font-weight: 700; }
.vlang-expr-pt { color: #8b949e; font-size: 12px; margin-top: 1px; }
.vlang-pron { display: flex; align-items: baseline; gap: 8px; margin-top: 9px; }
.vlang-pron span { color: #6e7681; font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em; }
.vlang-pron b { color: #a78bfa; font-family: 'Rajdhani', sans-serif; font-size: 14px; letter-spacing: .025em; }
.vlang-real { margin-top: 10px; padding: 10px 11px; border-radius: 9px; background: rgba(139,92,246,.09); border-left: 3px solid #8b5cf6; }
.vlang-real-head { display: flex; justify-content: space-between; gap: 8px; align-items: center; margin-bottom: 4px; }
.vlang-real-head span { color: #a78bfa; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; }
.vlang-real-head b { color: #8b949e; font-size: 9px; font-weight: 600; text-transform: uppercase; }
.vlang-real strong { color: #e6edf3; font-size: 14px; }
.vlang-real small { color: #a78bfa; font-size: 11px; margin-left: 8px; }
.vlang-real p, .vlang-expr-note { color: #8b949e; font-size: 11px; line-height: 1.4; margin: 5px 0 0; }
.vlang-guide-start { margin-top: 4px; }

.vlang-qbody { min-height: 220px; }
.vlang-qkick { font-family: 'Rajdhani', sans-serif; text-transform: uppercase; letter-spacing: .14em; font-size: 10.5px; color: #a78bfa; font-weight: 600; margin-bottom: 6px; }
.vlang-qtitle { font-family: 'Rajdhani', sans-serif; font-weight: 600; font-size: 20px; line-height: 1.25; margin: 0 0 3px; color: #fff; }
.vlang-qhint { font-size: 12px; color: #8b949e; margin: 0 0 15px; }

.vlang-opts { display: flex; flex-direction: column; gap: 10px; }
.vlang-opt { display: flex; align-items: center; gap: 12px; padding: 13px 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; cursor: pointer; transition: all .2s; color: #c9d1d9; font-size: 14px; text-align: left; }
.vlang-opt:hover { background: rgba(139,92,246,.1); border-color: rgba(139,92,246,.3); }
.vlang-opt .mk { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255,255,255,.3); display: grid; place-items: center; font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 11px; color: #8b949e; flex: 0 0 auto; transition: all .2s; }
.vlang-opt.sel { background: rgba(139,92,246,.15); border-color: #8b5cf6; } .vlang-opt.sel .mk { background: #8b5cf6; border-color: #8b5cf6; color: #fff; }
.vlang-opt.correct { background: rgba(34,197,94,.15); border-color: #22c55e; } .vlang-opt.correct .mk { background: #22c55e; border-color: #22c55e; color: #fff; }
.vlang-opt.incorrect { background: rgba(239,68,68,.15); border-color: #ef4444; } .vlang-opt.incorrect .mk { background: #ef4444; border-color: #ef4444; color: #fff; }


.vlang-target { background: rgba(0,0,0,.25); border: 1px dashed rgba(139,92,246,.4); border-radius: 10px; padding: 11px 13px; margin-bottom: 13px; color: #a78bfa; font-size: 13px; }
.vlang-target b { color: #fff; font-weight: 600; }
.vlang-assemble { min-height: 52px; border-bottom: 2px solid rgba(139,92,246,.4); padding: 5px 2px 11px; margin-bottom: 15px; display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; }
.vlang-bank { display: flex; flex-wrap: wrap; gap: 8px; }
.vlang-chip { font-size: 14px; font-weight: 500; color: #c9d1d9; padding: 9px 13px; border-radius: 9px; cursor: pointer; user-select: none; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 3px 0 rgba(0,0,0,.35); transition: transform .08s; }
.vlang-chip:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.35); }
.vlang-chip.used { opacity: 0; pointer-events: none; width: 0; height: 0; padding: 0; margin: -4px; border: 0; box-shadow: none; overflow: hidden; }


.vlang-pairs { display: flex; gap: 12px; }
.vlang-col { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.vlang-pchip { padding: 13px 10px; border-radius: 10px; cursor: pointer; text-align: center; font-size: 14px; font-weight: 500; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); color: #c9d1d9; transition: all .15s; }
.vlang-pchip:hover { border-color: rgba(139,92,246,.3); }
.vlang-pchip.sel { border-color: #8b5cf6; background: rgba(139,92,246,.15); color: #a78bfa; }
.vlang-pchip.matched { border-color: #22c55e; background: rgba(34,197,94,.15); color: #22c55e; cursor: default; pointer-events: none; }
.vlang-pchip.bad { border-color: #ef4444; background: rgba(239,68,68,.15); animation: vlang-shake .3s; }
@keyframes vlang-shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }


.vlang-sentence { font-size: 18px; line-height: 1.9; font-weight: 500; color: #e6edf3; margin-bottom: 16px; }
.vlang-slot { display: inline-block; min-width: 74px; border-bottom: 2px solid #8b5cf6; text-align: center; color: #a78bfa; font-weight: 600; padding: 0 6px; }
.vlang-slot.empty { color: #6e7681; }
.vlang-binline { display: flex; flex-wrap: wrap; gap: 10px; }


.vlang-foot { margin-top: 18px; }
.vlang-btn { width: 100%; border: none; cursor: pointer; border-radius: 10px; padding: 14px; font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: .05em; text-transform: uppercase; background: linear-gradient(135deg,#8b5cf6,#7c3aed); color: #fff; box-shadow: 0 6px 20px -6px rgba(139,92,246,.6); transition: all .15s; }
.vlang-btn:active { transform: translateY(1px); }
.vlang-btn:disabled { background: rgba(255,255,255,.06); color: #6e7681; box-shadow: none; cursor: not-allowed; }
.vlang-btn-wide { max-width: 240px; margin: 0 auto; }

.vlang-fb { display: none; margin-top: 16px; padding: 16px; border-radius: 14px; }
.vlang-fb.show { display: block; }
.vlang-fb.ok { background: linear-gradient(0deg,#0c2a1c,#123a26); border: 1px solid rgba(34,197,94,.4); }
.vlang-fb.no { background: linear-gradient(0deg,#2a1013,#38161b); border: 1px solid rgba(239,68,68,.4); }
.vlang-fb-row { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.vlang-fb-ic { width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; }
.vlang-fb.ok .vlang-fb-ic { background: #22c55e; color: #062015; } .vlang-fb.no .vlang-fb-ic { background: #ef4444; color: #2a1013; }
.vlang-fb h4 { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 16px; margin: 0; }
.vlang-fb.ok h4 { color: #4ade80; } .vlang-fb.no h4 { color: #ff6b6b; }
.vlang-fb small { display: block; color: #e6edf3; opacity: .9; font-size: 12.5px; margin-top: 2px; }
.vlang-fb-explain { display: block; margin-top: 5px; }
.vlang-fb.ok .vlang-btn { background: linear-gradient(135deg,#22c55e,#16a34a); box-shadow: none; }
.vlang-fb.no .vlang-btn { background: linear-gradient(135deg,#ef4444,#dc2626); box-shadow: none; }

.vlang-done { display: none; flex-direction: column; align-items: center; text-align: center; padding: 24px 20px; }
.vlang-done.show { display: flex; }
.vlang-trophy { width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 10px; background: radial-gradient(circle at 35% 30%, rgba(139,92,246,.5), rgba(139,92,246,.05)); border: 1px solid rgba(139,92,246,.5); box-shadow: 0 0 45px rgba(139,92,246,.35); }
.vlang-done h2 { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 23px; margin: 4px 0 2px; color: #fff; }
.vlang-done-sub { color: #8b949e; font-size: 12.5px; margin-bottom: 18px; }

.vlang-done.fail .vlang-trophy { background: radial-gradient(circle at 35% 30%, rgba(234,179,8,.45), rgba(234,179,8,.05)); border-color: rgba(234,179,8,.5); box-shadow: 0 0 45px rgba(234,179,8,.3); }
.vlang-done.fail .vlang-trophy svg { stroke: #eab308; }
.vlang-done.fail h2 { color: #eab308; }
.vlang-rewards { display: flex; gap: 12px; margin-bottom: 22px; }
.vlang-rw { background: rgba(30,41,59,.5); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 13px 16px; min-width: 84px; }
.vlang-rw .k { font-family: 'Rajdhani', sans-serif; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #6e7681; }
.vlang-rw .v { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 22px; font-variant-numeric: tabular-nums; }
.vlang-rw.xp .v { color: #22c55e; } .vlang-rw.sc .v { color: #a78bfa; }

.vlang-empty { color: #8b949e; }

@media (prefers-reduced-motion: reduce) { .vlang * { animation: none !important; transition: none !important; } }

@media (min-width: 620px) {
    .vlang-expressions { grid-template-columns: repeat(2,minmax(0,1fr)); }
}