.vbp-wrap{max-width:860px;margin:10px auto;font-family:"Times New Roman",Times,"Noto Serif Telugu","Noto Sans Telugu",serif;line-height:1.38;color:#20231f;box-sizing:border-box}.vbp-select{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center}.vbp-select label{font-weight:700;white-space:nowrap}.vbp-select select{width:100%;min-width:0;max-width:100%;height:44px;padding:7px 11px;border:1px solid #aeb5ac;border-radius:9px;font-size:16px;line-height:1.2;background:#fff;color:#20231f;text-overflow:ellipsis}.vbp-sound{border:1px solid #aeb5ac;background:#fff;border-radius:9px;padding:6px 10px;height:44px;min-height:44px;font-weight:700;cursor:pointer;white-space:nowrap}.vbp-selected-name{grid-column:2/4;font-size:14px;font-weight:700;line-height:1.28;color:#3f4b3f;overflow-wrap:anywhere;margin-top:-1px}.vbp-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:8px 0}.vbp-step{border:1px solid #d8ddd5;border-radius:10px;padding:6px 7px;background:#f3f5f1;display:grid;grid-template-columns:27px minmax(0,1fr);column-gap:6px;align-items:center;min-width:0}.vbp-step span{grid-row:1/3;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#e0e5de;font-size:12px;font-weight:800}.vbp-step b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.vbp-step small{font-size:10px;line-height:1.1;opacity:.72;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.vbp-step.active{background:var(--vbp-bg,#F7F8F2);border-color:#657060}.vbp-step.active span{background:#2f3b2f;color:#fff}.vbp-step.done{background:#edf6ef}.vbp-step.done span{background:#287044;color:#fff}.vbp-card{border:1px solid #d6dbd3;border-radius:13px;padding:14px;background:var(--vbp-bg,#F7F8F2);box-shadow:none;box-sizing:border-box}.kicker{font-size:11px;font-weight:800;letter-spacing:.06em;opacity:.67}.vbp-card h2{font-size:23px;line-height:1.2;margin:4px 0 7px}.vbp-card h3{font-size:18px;margin:8px 0 5px}.ruletext{background:rgba(255,255,255,.66);border-radius:9px;padding:10px 11px;font-size:18px;line-height:1.38}#vbp-examples{margin:6px 0 0;padding-left:28px}#vbp-examples li{margin:4px 0;font-size:17px;line-height:1.34}.primary,.secondary{border:0;border-radius:9px;padding:7px 11px;font-weight:800;cursor:pointer;font-size:14px;height:40px;min-height:40px;line-height:1.1}.primary{background:#2f3b2f;color:#fff}.secondary{background:#e3e8e1;color:#20231f}.full{width:100%;margin-top:10px}.head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}.head h2{font-size:21px}.telugu{font-size:21px;font-weight:700;background:rgba(255,255,255,.68);padding:11px 12px;border-radius:10px;margin:9px 0;line-height:1.38}.answer,.bank{min-height:48px;padding:7px;border-radius:10px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;align-content:center;box-sizing:border-box}.answer{border:1.5px dashed #aeb5ac;background:rgba(255,255,255,.52);margin-bottom:7px}.bank{border:1px solid #cbd1c8;background:rgba(255,255,255,.34);margin-bottom:6px}.word{border:1px solid #9fa89c;background:#fff;border-radius:8px;padding:6px 9px;font-size:16px;line-height:1.1;cursor:pointer;min-height:36px;height:36px}.word.chosen{background:#e8efe7}.placeholder{opacity:.55;font-size:14px}.feedback{min-height:24px;font-size:17px;line-height:24px;font-weight:800;text-align:center;margin:4px 0}.correct{color:#1f6b3c}.wrong{color:#a52a22}.warn{color:#715700}#vbp-input{width:100%;box-sizing:border-box;padding:9px 11px;border:1px solid #9fa89c;border-radius:9px;font-size:17px;min-height:42px;max-height:68px;resize:none;background:#fff}.vbp-row-actions{display:flex;gap:7px;margin-top:7px}.vbp-row-actions button{flex:1;min-width:0}.complete{text-align:center}.score{font-size:22px;font-weight:800;padding:11px 0}.vbp-result-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:9px}.vbp-result{border:1px solid #d4dad1;border-radius:9px;padding:8px;background:rgba(255,255,255,.6);display:flex;flex-direction:column}.vbp-result b{font-size:19px}.vbp-result span{font-size:11px;line-height:1.15}.vbp-mic{width:100%;margin-top:7px;border:1px solid #8f998c;background:#fff;border-radius:9px;padding:6px 11px;font-weight:800;font-size:14px;height:40px;min-height:40px;cursor:pointer}.vbp-mic.listening{border-color:#a52a22;background:#fff4f3}.vbp-mic:disabled{opacity:.55;cursor:not-allowed}.vbp-mic-status{min-height:18px;margin-top:4px;font-size:12px;line-height:1.2;opacity:.72}

/* Mobile lesson mode: fill the entire visible phone screen and prevent page scrolling. */
@media(max-width:782px){
 html:has(#vbp-app),body:has(#vbp-app){overflow:hidden!important}
 .vbp-wrap{position:fixed!important;inset:0!important;z-index:999999!important;width:100vw!important;max-width:none!important;height:100vh!important;height:100dvh!important;margin:0!important;padding:8px 10px!important;background:#eef0eb!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;line-height:1.3!important}
 .vbp-select{flex:0 0 auto;grid-template-columns:minmax(0,1fr) auto;gap:6px}.vbp-select label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.vbp-select select{grid-column:1;height:42px;font-size:16px;padding:6px 9px}.vbp-sound{grid-column:2;height:42px;min-height:42px;padding:5px 9px;font-size:13px}.vbp-selected-name{grid-column:1/3;font-size:13px;line-height:1.22;margin:0;max-height:34px;overflow:hidden}
 .vbp-steps{flex:0 0 auto;margin:5px 0;gap:4px}.vbp-step{padding:4px 5px;grid-template-columns:22px minmax(0,1fr);column-gap:4px;border-radius:8px}.vbp-step span{width:21px;height:21px;font-size:11px}.vbp-step b{font-size:12px}.vbp-step small{font-size:8px}
 .vbp-card{flex:1 1 auto;min-height:0;padding:10px 11px;border-radius:10px;overflow:hidden;display:flex;flex-direction:column}.vbp-card[hidden]{display:none!important}.vbp-card h2{font-size:clamp(19px,5.2vw,24px);margin:2px 0 5px}.vbp-card h3{font-size:clamp(16px,4.4vw,19px);margin:5px 0 3px}.ruletext{padding:7px 9px;font-size:clamp(16px,4.3vw,19px);line-height:1.3}.kicker{font-size:10px}#vbp-examples{margin:4px 0 0;padding-left:23px;flex:1 1 auto}#vbp-examples li{font-size:clamp(15px,4.1vw,18px);margin:3px 0;line-height:1.28}
 .telugu{font-size:clamp(18px,5vw,22px);padding:8px 9px;margin:6px 0}.answer,.bank{min-height:40px;padding:5px;gap:5px;border-radius:8px}.answer{margin-bottom:5px}.bank{margin-bottom:4px;flex:1 1 auto;align-content:flex-start;overflow:hidden}.word{font-size:clamp(14px,3.9vw,17px);padding:5px 8px;min-height:33px;height:33px}.feedback{min-height:20px;line-height:20px;font-size:15px;margin:2px 0}.primary,.secondary,.vbp-mic{height:36px;min-height:36px;padding:5px 8px;font-size:12px;border-radius:8px}.full{margin-top:6px;flex:0 0 auto}.vbp-row-actions{gap:5px;margin-top:5px;flex:0 0 auto}#vbp-input{font-size:16px;min-height:38px;max-height:50px;padding:6px 8px}.vbp-mic{margin-top:5px}.vbp-mic-status{min-height:15px;font-size:10px;margin-top:2px}.score{font-size:19px;padding:7px 0}.vbp-result-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}.vbp-result{padding:6px}.vbp-result b{font-size:16px}.vbp-result span{font-size:9px}
 .head{flex:0 0 auto}.head h2{font-size:clamp(18px,4.8vw,22px)}
}
@media(max-width:380px){.vbp-wrap{padding:6px 7px!important}.vbp-selected-name{font-size:12px}.vbp-step small{display:none}.vbp-step span{grid-row:auto}.vbp-card{padding:8px}.vbp-card h2{font-size:18px}.telugu{font-size:17px}.word{font-size:13px;padding:4px 6px}.primary,.secondary,.vbp-mic{font-size:10px;height:34px;min-height:34px}}

/* v2.3.3: Larger mobile text while keeping the same compact layout */
@media(max-width:768px){
  .vbp-selected-name{font-size:15px;line-height:1.3;max-height:40px}
  .vbp-step b{font-size:15px}
  .vbp-step span{font-size:13px}
  .vbp-card h2{font-size:clamp(22px,5.8vw,27px)}
  .vbp-card h3{font-size:clamp(19px,5vw,22px)}
  .ruletext{font-size:clamp(18px,4.8vw,21px)}
  #vbp-examples li{font-size:clamp(17px,4.6vw,20px)}
  .telugu{font-size:clamp(21px,5.7vw,25px)}
  .word{font-size:clamp(17px,4.5vw,19px);font-weight:600}
  .feedback{font-size:17px}
  .primary,.secondary,.vbp-mic{font-size:16px;font-weight:800}
  #vbp-input{font-size:18px}
}
@media(max-width:380px){
  .vbp-selected-name{font-size:14px}
  .vbp-step b{font-size:13px}
  .vbp-card h2{font-size:21px}
  .telugu{font-size:20px}
  .word{font-size:16px}
  .primary,.secondary,.vbp-mic{font-size:14px}
}

/* v2.3.5: Larger Practice tap words; use the available word-bank space better. */
@media(max-width:782px){
  #vbp-practice .bank{gap:9px;padding:10px;align-content:flex-start;align-items:flex-start}
  #vbp-practice .word{
    font-size:clamp(21px,5.8vw,25px);
    font-weight:700;
    min-height:48px;
    height:auto;
    padding:10px 14px;
    border-radius:10px;
    line-height:1.15;
  }
  #vbp-practice .answer .word{
    font-size:clamp(21px,5.8vw,25px);
    min-height:48px;
    height:auto;
    padding:10px 14px;
  }
}
@media(max-width:380px){
  #vbp-practice .bank{gap:7px;padding:8px}
  #vbp-practice .word,
  #vbp-practice .answer .word{
    font-size:20px;
    min-height:44px;
    padding:9px 12px;
  }
}

/* v2.3.6: Use the full Translation card height on mobile. */
@media(max-width:782px){
  #vbp-translate{display:flex;flex-direction:column;min-height:0}
  #vbp-translate .head{flex:0 0 auto}
  #vbp-translate .telugu{flex:0 0 auto}
  #vbp-translate #vbp-input{flex:0 0 auto;min-height:56px;max-height:72px}
  #vbp-translate .vbp-mic{flex:0 0 auto;height:46px;min-height:46px}
  #vbp-translate .vbp-mic-status{flex:0 0 auto}
  #vbp-translate .vbp-row-actions{margin-top:auto;flex:0 0 auto;padding-top:10px}
  #vbp-translate .vbp-row-actions button{height:48px;min-height:48px;font-size:17px}
  #vbp-translate .feedback{flex:0 0 auto;min-height:24px;margin-top:6px}
}
@media(max-width:380px){
  #vbp-translate #vbp-input{min-height:50px;max-height:64px}
  #vbp-translate .vbp-mic{height:42px;min-height:42px}
  #vbp-translate .vbp-row-actions button{height:44px;min-height:44px;font-size:15px}
}

/* v2.3.7: compact restart control */
.vbp-head-tools{display:flex;align-items:flex-end;gap:8px;flex-direction:column;flex:0 0 auto}
.vbp-restart{border:1px solid #aeb7ad;background:#eef2ec;color:#26352a;border-radius:10px;padding:5px 9px;min-height:30px;font-size:12px;font-weight:800;line-height:1;white-space:nowrap}
.vbp-restart:active{transform:scale(.98)}
@media(max-width:480px){.vbp-head-tools{gap:4px}.vbp-restart{font-size:11px;min-height:28px;padding:4px 7px}}

/* v2.3.9: Professional premium metallic-silver controls */
.vbp-wrap button,
.vbp-wrap .primary,
.vbp-wrap .secondary,
.vbp-wrap .vbp-mic,
.vbp-wrap .vbp-sound,
.vbp-wrap .vbp-restart,
.vbp-wrap .word{
  color:#20242a;
  border:1px solid #9ba1a8;
  background:linear-gradient(180deg,#ffffff 0%,#f3f4f5 18%,#d9dde1 52%,#f8f9fa 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.96),inset 0 -1px 0 rgba(88,94,101,.12),0 2px 4px rgba(36,42,48,.16);
  text-shadow:0 1px 0 rgba(255,255,255,.9);
  transition:transform .08s ease,box-shadow .12s ease,filter .12s ease;
}
.vbp-wrap button:hover,
.vbp-wrap .word:hover{filter:brightness(1.035)}
.vbp-wrap button:active,
.vbp-wrap .word:active{
  transform:translateY(1px);
  box-shadow:inset 0 2px 4px rgba(60,66,72,.16),0 1px 2px rgba(36,42,48,.12);
  filter:brightness(.98);
}
.vbp-wrap button:focus-visible,
.vbp-wrap .word:focus-visible{outline:2px solid #5f6872;outline-offset:2px}
.vbp-wrap button:disabled,
.vbp-wrap .word:disabled{filter:saturate(.55);opacity:.58;box-shadow:none}
.vbp-wrap .primary{
  border-color:#7f878f;
  background:linear-gradient(180deg,#ffffff 0%,#e9ecef 20%,#cbd0d5 54%,#f7f8f9 100%);
  font-weight:900;
}
.vbp-wrap .vbp-mic.listening{
  border-color:#7b858f;
  background:linear-gradient(180deg,#ffffff 0%,#eef0f2 20%,#c9ced3 55%,#f6f7f8 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.96),0 0 0 2px rgba(86,96,106,.12),0 2px 4px rgba(36,42,48,.16);
}
.vbp-wrap .word.chosen{
  border-color:#77818a;
  background:linear-gradient(180deg,#fcfcfd 0%,#e4e7ea 45%,#c8cdd2 100%);
}

/* v2.4.2: Structured, readable Rule Text lessons */
.ruletext{white-space:normal}
.ruletext .vbp-rule-heading{
  margin:16px 0 7px;
  padding:8px 10px;
  border-left:4px solid #7d858c;
  border-radius:6px;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(232,235,237,.72));
  color:#20242a;
  font-size:18px;
  line-height:1.28;
  font-weight:900;
  letter-spacing:.01em;
}
.ruletext .vbp-rule-heading:first-child{margin-top:0}
.ruletext .vbp-rule-paragraph{
  margin:0 2px 10px;
  font-size:inherit;
  line-height:1.55;
}
.ruletext .vbp-rule-formula{
  margin:3px 0 12px;
  padding:10px 12px;
  border:1px solid #b9bec3;
  border-radius:8px;
  background:#fff;
  font-weight:900;
  text-align:center;
  font-size:1.08em;
  letter-spacing:.01em;
}
.ruletext .vbp-rule-correct,.ruletext .vbp-rule-wrong{
  margin:3px 0;
  padding:4px 8px;
  border-radius:6px;
  font-weight:700;
}
.ruletext .vbp-rule-correct{background:rgba(46,125,75,.08)}
.ruletext .vbp-rule-wrong{background:rgba(170,55,45,.07)}

/* v2.4.3: Keep the mobile interface size fixed; scroll only the Rule Text area. */
@media(max-width:782px){
  #vbp-learn{
    overflow:hidden!important;
    min-height:0!important;
  }
  #vbp-learn #vbp-text{
    flex:1 1 auto!important;
    min-height:90px;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y;
    padding:9px;
    scrollbar-width:thin;
  }
  #vbp-learn #vbp-examples{
    flex:0 0 auto!important;
    max-height:34%;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  #vbp-learn > .kicker,
  #vbp-learn > h2,
  #vbp-learn > h3,
  #vbp-learn > #vbp-learn-next{
    flex:0 0 auto!important;
  }
  .ruletext .vbp-rule-heading{font-size:clamp(17px,4.7vw,20px);margin:13px 0 6px;padding:7px 8px}
  .ruletext .vbp-rule-paragraph{line-height:1.5;margin-bottom:9px}
  .ruletext .vbp-rule-formula{font-size:clamp(17px,4.8vw,21px);padding:9px 8px;margin-bottom:10px}
}

/* v2.4.4: Hard-lock mobile interface height. Only the Learn Rule Text scrolls. */
@media(max-width:782px){
  html.vbp-lesson-open,
  body.vbp-lesson-open{
    overflow:hidden!important;
    overscroll-behavior:none!important;
  }
  #vbp-app.vbp-wrap{
    position:fixed!important;
    top:0!important;
    right:0!important;
    bottom:0!important;
    left:0!important;
    width:100%!important;
    max-width:none!important;
    height:100vh!important;
    height:100dvh!important;
    max-height:100vh!important;
    max-height:100dvh!important;
    min-height:0!important;
    margin:0!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }
  #vbp-learn.vbp-card:not([hidden]){
    flex:1 1 0!important;
    height:auto!important;
    min-height:0!important;
    max-height:100%!important;
    overflow:hidden!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto auto minmax(0,1fr) auto auto auto!important;
    align-content:stretch!important;
  }
  #vbp-learn > .kicker,
  #vbp-learn > h2,
  #vbp-learn > h3,
  #vbp-learn > #vbp-examples,
  #vbp-learn > #vbp-learn-next{
    min-height:0!important;
    flex:none!important;
  }
  #vbp-learn #vbp-text{
    min-height:0!important;
    max-height:none!important;
    height:auto!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior:contain!important;
    touch-action:pan-y!important;
    scrollbar-width:thin;
  }
  #vbp-learn #vbp-examples{
    margin:3px 0 4px!important;
    max-height:120px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch!important;
  }
  #vbp-learn #vbp-learn-next{
    margin-top:4px!important;
  }
}
@media(max-width:380px){
  #vbp-learn #vbp-examples{max-height:100px!important}
}


/* v2.4.5: One Learn-content scroller. Title + Rule Text + Examples move together; interface stays fixed. */
@media(max-width:782px){
  #vbp-learn.vbp-card:not([hidden]){
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:minmax(0,1fr) auto!important;
    gap:0!important;
    min-height:0!important;
    overflow:hidden!important;
  }
  #vbp-learn .vbp-learn-scroll{
    min-height:0!important;
    height:auto!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:pan-y!important;
    scrollbar-width:thin;
    padding-right:2px;
  }
  #vbp-learn #vbp-text{
    flex:none!important;
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
    touch-action:auto!important;
    overscroll-behavior:auto!important;
  }
  #vbp-learn #vbp-examples{
    flex:none!important;
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
    margin:4px 0 8px!important;
    -webkit-overflow-scrolling:auto!important;
  }
  #vbp-learn .vbp-learn-scroll > .kicker,
  #vbp-learn .vbp-learn-scroll > h2,
  #vbp-learn .vbp-learn-scroll > h3{
    min-height:0!important;
  }
  #vbp-learn #vbp-learn-next{
    grid-row:2!important;
    flex:none!important;
    margin-top:6px!important;
  }
}

/* v2.4.7: Keep Select Topic label and add a little more breathing room at phone edges. */
@media(max-width:782px){
  #vbp-app.vbp-wrap{
    left:10px!important;
    right:10px!important;
    width:auto!important;
  }
  #vbp-app .vbp-select{
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-rows:auto auto auto!important;
    column-gap:6px!important;
    row-gap:4px!important;
  }
  #vbp-app .vbp-select label{
    position:static!important;
    width:auto!important;
    height:auto!important;
    padding:0 2px!important;
    margin:0!important;
    overflow:visible!important;
    clip:auto!important;
    white-space:normal!important;
    border:0!important;
    grid-column:1 / 3!important;
    grid-row:1!important;
    display:block!important;
    font-size:13px!important;
    line-height:1.15!important;
    font-weight:800!important;
    color:#3f4b3f!important;
  }
  #vbp-app .vbp-select select{
    grid-column:1!important;
    grid-row:2!important;
  }
  #vbp-app .vbp-sound{
    grid-column:2!important;
    grid-row:2!important;
  }
  #vbp-app .vbp-selected-name{
    grid-column:1 / 3!important;
    grid-row:3!important;
  }
}
@media(max-width:380px){
  #vbp-app.vbp-wrap{left:8px!important;right:8px!important}
  #vbp-app .vbp-select label{font-size:12px!important}
}


/* v2.4.8: Rich Rule Text saved from the WordPress Visual Editor. */
.ruletext h1,.ruletext h2,.ruletext h3,.ruletext h4,.ruletext h5,.ruletext h6{
  line-height:1.28;
  font-weight:800;
  margin:14px 0 7px;
}
.ruletext h1:first-child,.ruletext h2:first-child,.ruletext h3:first-child,.ruletext h4:first-child,.ruletext h5:first-child,.ruletext h6:first-child{margin-top:0}
.ruletext h1{font-size:1.34em}.ruletext h2{font-size:1.26em}.ruletext h3{font-size:1.18em}.ruletext h4{font-size:1.1em}.ruletext h5,.ruletext h6{font-size:1.04em}
.ruletext p{margin:0 0 10px;line-height:1.5}
.ruletext ul,.ruletext ol{margin:7px 0 11px;padding-left:1.55em}
.ruletext li{margin:4px 0;line-height:1.45}
.ruletext blockquote{margin:10px 0;padding:8px 11px;border-left:4px solid rgba(52,65,52,.35);background:rgba(255,255,255,.42)}
.ruletext strong,.ruletext b{font-weight:800}
.ruletext img{max-width:100%;height:auto}
@media(max-width:782px){
  .ruletext h1,.ruletext h2,.ruletext h3,.ruletext h4,.ruletext h5,.ruletext h6{margin:12px 0 6px}
  .ruletext p{margin-bottom:9px}
}


/* v2.4.9: Times New Roman UI + faithful rich-text blocks + compact Practice guide. */
.vbp-wrap,
.vbp-wrap button,
.vbp-wrap select,
.vbp-wrap textarea,
.vbp-wrap input{
  font-family:"Times New Roman",Times,"Noto Serif Telugu","Noto Sans Telugu",serif!important;
}

/* Keep WordPress Visual Editor block structure readable on the learner side. */
.ruletext p,
.ruletext div,
.ruletext h1,
.ruletext h2,
.ruletext h3,
.ruletext h4,
.ruletext h5,
.ruletext h6,
.ruletext ul,
.ruletext ol,
.ruletext blockquote{
  display:block!important;
  float:none!important;
  clear:both;
  max-width:100%;
  box-sizing:border-box;
}
.ruletext p:empty{min-height:.6em}
.ruletext br{display:block;content:"";margin-top:.22em}
.ruletext > p + p{margin-top:5px}
.ruletext > h1 + p,
.ruletext > h2 + p,
.ruletext > h3 + p,
.ruletext > h4 + p,
.ruletext > h5 + p,
.ruletext > h6 + p{margin-top:2px}

.vbp-practice-description{
  flex:0 0 auto;
  margin:4px 0 6px;
  padding:6px 9px;
  border:1px solid rgba(105,112,104,.28);
  border-radius:8px;
  background:rgba(255,255,255,.58);
  color:#41473f;
  font-size:14px;
  line-height:1.28;
  font-weight:600;
  white-space:pre-line;
}
@media(max-width:782px){
  #vbp-practice .vbp-practice-description{
    margin:2px 0 4px;
    padding:5px 7px;
    font-size:clamp(12px,3.35vw,14px);
    line-height:1.2;
  }
}
@media(max-width:380px){
  #vbp-practice .vbp-practice-description{
    font-size:12px;
    padding:4px 6px;
  }
}


/* v2.8.1: Four reference-style red information rows for the selected topic. */
.vbp-topic-info{
  margin:8px 0 7px;
  border:1px solid #d5d5d5;
  background:#fff;
  overflow:hidden;
  flex:0 0 auto;
}
.vbp-topic-info[hidden],.vbp-info-row[hidden]{display:none!important}
.vbp-info-row{
  box-sizing:border-box;
  color:#d51f1f;
  font-family:"Times New Roman",Times,"Noto Serif Telugu","Noto Sans Telugu",serif;
  font-weight:600;
  font-size:clamp(19px,2.8vw,28px);
  line-height:1.3;
}
.vbp-info-full{
  padding:14px 16px;
  min-height:54px;
  display:flex;
  align-items:center;
  border-bottom:1px solid #e2e2e2;
}
.vbp-info-split{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  background:#e9e9e7;
  border-bottom:1px solid #d5d5d5;
}
.vbp-info-split:last-child{border-bottom:0}
.vbp-info-split>div{
  min-width:0;
  padding:11px 16px;
  overflow-wrap:anywhere;
}
.vbp-info-split>div+div{border-left:1px solid #d1d1cf}

@media(max-width:782px){
  #vbp-app .vbp-topic-info{margin:5px 0 4px}
  #vbp-app .vbp-info-row{font-size:clamp(17px,5vw,22px);line-height:1.22}
  #vbp-app .vbp-info-full{min-height:38px;padding:7px 9px}
  #vbp-app .vbp-info-split>div{padding:7px 9px}
}
@media(max-width:380px){
  #vbp-app .vbp-info-row{font-size:16px}
  #vbp-app .vbp-info-full{min-height:34px;padding:6px 8px}
  #vbp-app .vbp-info-split>div{padding:6px 8px}
}

/* v1.1.0: WordPress source-post content in Learn.
   Keep the post markup/inline colors/tables/images intact instead of applying
   the old manual Rule Text visual formatter to it. */
.ruletext.vbp-post-content{
  background:transparent;
  border-radius:0;
  padding:0;
  font-size:inherit;
  line-height:inherit;
  white-space:normal;
  overflow-wrap:normal;
}
.ruletext.vbp-post-content table{max-width:100%}
.ruletext.vbp-post-content img{max-width:100%;height:auto}
.ruletext.vbp-post-content .wp-block-table{overflow-x:auto}


/* v1.4.0: Compact Verb Learn rows + single-tap accordion examples.
   The original source tables can contain a fixed total height; override that in
   Learn so hidden example rows do not make the two visible Verb rows stretch.
   Any visible Verb-information row can be tapped/clicked. Only one group stays
   open at a time. */
.ruletext.vbp-post-content table.vbp-verb-toggle-table{
  height:auto!important;
  min-height:0!important;
}
.ruletext.vbp-post-content table.vbp-verb-toggle-table > tbody{
  height:auto!important;
  min-height:0!important;
}
.ruletext.vbp-post-content table.vbp-verb-toggle-table tr.vbp-verb-info-row{
  cursor:pointer;
  -webkit-tap-highlight-color:rgba(0,0,0,.05);
  touch-action:manipulation;
  height:auto!important;
  min-height:0!important;
}
.ruletext.vbp-post-content table.vbp-verb-toggle-table tr.vbp-verb-info-row > td,
.ruletext.vbp-post-content table.vbp-verb-toggle-table tr.vbp-verb-info-row > th{
  height:auto!important;
  min-height:0!important;
  padding-top:6px!important;
  padding-bottom:6px!important;
  line-height:1.25!important;
  vertical-align:middle!important;
}
.ruletext.vbp-post-content table.vbp-verb-toggle-table tr.vbp-verb-info-row > td p,
.ruletext.vbp-post-content table.vbp-verb-toggle-table tr.vbp-verb-info-row > th p{
  margin-top:2px!important;
  margin-bottom:2px!important;
  line-height:1.25!important;
}
.ruletext.vbp-post-content table.vbp-verb-toggle-table tr.vbp-verb-info-row > td > :first-child,
.ruletext.vbp-post-content table.vbp-verb-toggle-table tr.vbp-verb-info-row > th > :first-child{margin-top:0!important}
.ruletext.vbp-post-content table.vbp-verb-toggle-table tr.vbp-verb-info-row > td > :last-child,
.ruletext.vbp-post-content table.vbp-verb-toggle-table tr.vbp-verb-info-row > th > :last-child{margin-bottom:0!important}
.ruletext.vbp-post-content table.vbp-verb-toggle-table tr.vbp-verb-info-row.vbp-verb-open{
  outline:1px solid rgba(0,0,0,.08);
  outline-offset:-1px;
}
.ruletext.vbp-post-content table.vbp-verb-toggle-table tr.vbp-verb-example-hidden{
  display:none!important;
}
.ruletext.vbp-post-content table.vbp-verb-toggle-table tr.vbp-verb-gap-row td{
  height:18px!important;
  min-height:18px!important;
  padding:0!important;
  border:0!important;
  background:var(--vbp-separator,#E8E8E8)!important;
  line-height:18px!important;
  font-size:1px!important;
}
@media(max-width:782px){
  .ruletext.vbp-post-content table.vbp-verb-toggle-table tr.vbp-verb-info-row > td,
  .ruletext.vbp-post-content table.vbp-verb-toggle-table tr.vbp-verb-info-row > th{
    padding-top:4px!important;
    padding-bottom:4px!important;
    line-height:1.2!important;
  }
  .ruletext.vbp-post-content table.vbp-verb-toggle-table tr.vbp-verb-info-row > td p,
  .ruletext.vbp-post-content table.vbp-verb-toggle-table tr.vbp-verb-info-row > th p{
    margin-top:1px!important;
    margin-bottom:1px!important;
    line-height:1.2!important;
  }
  .ruletext.vbp-post-content table.vbp-verb-toggle-table tr.vbp-verb-gap-row td{
    height:16px!important;
    min-height:16px!important;
    line-height:16px!important;
  }
}

/* v1.5.0: EXAMPLES / VOICE controls. Verb rows are display-only; examples are
   opened only from the EXAMPLES button. Buttons stay small, silver and rounded. */
.ruletext.vbp-post-content table.vbp-verb-toggle-table tr.vbp-verb-info-row{
  cursor:default!important;
  touch-action:auto;
}
.ruletext.vbp-post-content .vbp-verb-actions{
  float:right;
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin:0 0 2px 10px;
  position:relative;
  z-index:2;
}
.ruletext.vbp-post-content .vbp-verb-action{
  appearance:none;
  -webkit-appearance:none;
  border:1px solid #a8a8a8;
  border-radius:8px;
  background:#d8d8d8;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 1px 2px rgba(0,0,0,.12);
  color:#111;
  cursor:pointer;
  font-family:Arial,sans-serif;
  font-size:11px;
  font-weight:700;
  line-height:1;
  padding:6px 8px;
  min-height:26px;
  white-space:nowrap;
  text-transform:none;
}
.ruletext.vbp-post-content .vbp-verb-action:hover,
.ruletext.vbp-post-content .vbp-verb-action:focus-visible{
  background:#e6e6e6;
  border-color:#888;
}
.ruletext.vbp-post-content .vbp-examples-button[aria-expanded="true"],
.ruletext.vbp-post-content .vbp-voice-button.vbp-voice-active{
  background:#bfbfbf;
  border-color:#7f7f7f;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.16);
}
@media(max-width:782px){
  .ruletext.vbp-post-content .vbp-verb-actions{gap:4px;margin-left:6px}
  .ruletext.vbp-post-content .vbp-verb-action{
    border-radius:7px;
    font-size:9px;
    min-height:24px;
    padding:5px 6px;
  }
}


/* v1.6.0: centered action row + continuous TTS word tracking. */
.ruletext.vbp-post-content table.vbp-verb-toggle-table tr.vbp-verb-action-row{
  height:auto!important;
  min-height:0!important;
  background:transparent!important;
}
.ruletext.vbp-post-content table.vbp-verb-toggle-table tr.vbp-verb-action-row>td{
  height:auto!important;
  min-height:0!important;
  padding:3px 6px 4px!important;
  border:0!important;
  text-align:center!important;
  background:transparent!important;
  line-height:1!important;
}
.ruletext.vbp-post-content .vbp-verb-actions{
  float:none!important;
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  gap:7px!important;
  width:100%!important;
  margin:0!important;
  position:relative;
  z-index:2;
}
.ruletext.vbp-post-content .vbp-verb-action{
  flex:0 0 auto!important;
}
.ruletext.vbp-post-content table.vbp-verb-toggle-table tr.vbp-verb-info-row{
  cursor:default!important;
  touch-action:auto!important;
}
.ruletext.vbp-post-content table.vbp-verb-toggle-table tr.vbp-tts-current-row>td,
.ruletext.vbp-post-content table.vbp-verb-toggle-table tr.vbp-tts-current-row>th{
  box-shadow:inset 0 0 0 2px rgba(218,177,0,.22)!important;
}
::highlight(vbp-tts-word){
  background:#ffe96a;
  color:#111;
}
@media(max-width:782px){
  .ruletext.vbp-post-content table.vbp-verb-toggle-table tr.vbp-verb-action-row>td{
    padding:3px 4px!important;
  }
  .ruletext.vbp-post-content .vbp-verb-actions{gap:5px!important;}
}

/* v1.7.0: explicit Topic + Part selection, 20 verbs per part, and initial chooser state. */
#vbp-app .vbp-select{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:8px!important;
  align-items:end!important;
}
#vbp-app .vbp-select-field{min-width:0!important;display:block!important;}
#vbp-app .vbp-select-field>label{
  position:static!important;width:auto!important;height:auto!important;clip:auto!important;overflow:visible!important;
  display:block!important;margin:0 0 4px!important;padding:0!important;white-space:normal!important;
  font-size:13px!important;line-height:1.15!important;font-weight:800!important;color:#3f4b3f!important;
}
#vbp-app .vbp-select-control{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:6px!important;align-items:center!important;}
#vbp-app .vbp-select-field select{
  grid-column:auto!important;grid-row:auto!important;width:100%!important;height:44px!important;min-width:0!important;
}
#vbp-app .vbp-topic-field .vbp-sound{grid-column:auto!important;grid-row:auto!important;height:44px!important;min-height:44px!important;}
#vbp-app .vbp-topic-field,#vbp-app .vbp-part-field,#vbp-app .vbp-selected-name,#vbp-app .vbp-selection-message{grid-column:1!important;grid-row:auto!important;}
#vbp-app .vbp-selected-name{margin:0!important;min-height:0!important;}
#vbp-app .vbp-selection-message{
  grid-column:1!important;
  padding:10px 12px!important;
  border:1px solid #d3d7cf!important;
  border-radius:9px!important;
  background:#fff!important;
  text-align:center!important;
  font-weight:800!important;
  font-size:15px!important;
  line-height:1.3!important;
  color:#40473f!important;
}
#vbp-app .vbp-selection-message[hidden],#vbp-app .vbp-steps[hidden]{display:none!important;}
.ruletext.vbp-post-content table.vbp-verb-toggle-table tr.vbp-part-hidden{display:none!important;}

@media(max-width:782px){
  #vbp-app .vbp-select{
    flex:0 0 auto!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:auto!important;
    gap:7px!important;
  }
  #vbp-app .vbp-topic-field,#vbp-app .vbp-part-field,#vbp-app .vbp-selected-name,#vbp-app .vbp-selection-message{
    grid-column:1!important;grid-row:auto!important;
  }
  #vbp-app .vbp-select-field>label{font-size:12px!important;margin-bottom:3px!important;}
  #vbp-app .vbp-select-field select{height:40px!important;font-size:15px!important;padding:5px 8px!important;}
  #vbp-app .vbp-topic-field .vbp-sound{height:40px!important;min-height:40px!important;font-size:12px!important;padding:4px 8px!important;}
  #vbp-app .vbp-selected-name{font-size:13px!important;line-height:1.2!important;max-height:32px!important;}
  #vbp-app .vbp-selection-message{font-size:14px!important;padding:9px 10px!important;}
}

/* v1.8.0: Part-driven four-choice Verb Practice + navigation controls. */
#vbp-app .vbp-selection-actions{
  display:flex!important;justify-content:center!important;align-items:center!important;margin-top:1px!important;
}
#vbp-app .vbp-selection-actions .secondary{min-width:96px!important;}
#vbp-app .vbp-nav-actions{
  display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important;margin-top:7px!important;flex:0 0 auto!important;
}
#vbp-app .vbp-nav-actions button{width:100%!important;}
#vbp-practice .vbp-choice-bank{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;
  min-height:0!important;padding:10px!important;overflow:visible!important;
}
#vbp-practice .vbp-choice{
  width:100%!important;height:auto!important;min-height:46px!important;padding:9px 10px!important;
  font-size:17px!important;font-weight:800!important;line-height:1.2!important;text-align:center!important;
  white-space:normal!important;overflow-wrap:anywhere!important;
}
#vbp-practice .vbp-choice.vbp-choice-correct{background:#e6f4e9!important;border-color:#2f7a45!important;color:#1f5e34!important;}
#vbp-practice .vbp-choice.vbp-choice-wrong{background:#fde9e7!important;border-color:#b64a42!important;color:#8d2d27!important;}
#vbp-practice .vbp-choice:disabled{opacity:1!important;cursor:default!important;}
#vbp-app .vbp-four-actions{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important;}
#vbp-app .vbp-four-actions button[hidden]{display:none!important;}
@media(max-width:520px){
  #vbp-practice .vbp-choice-bank{gap:7px!important;padding:7px!important;}
  #vbp-practice .vbp-choice{min-height:42px!important;padding:7px 6px!important;font-size:15px!important;}
  #vbp-app .vbp-nav-actions{gap:5px!important;margin-top:5px!important;}
  #vbp-app .vbp-four-actions{gap:5px!important;}
}
#vbp-app .vbp-selection-actions[hidden]{display:none!important;}
#vbp-practice .vbp-four-actions{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
#vbp-translate .vbp-four-actions{grid-template-columns:repeat(4,minmax(0,1fr))!important;}
@media(max-width:380px){
  #vbp-translate .vbp-four-actions button{font-size:9px!important;padding-left:3px!important;padding-right:3px!important;}
}

/* v1.9.0: Practice selection goes into the answer box; SUBMIT checks/scoring. */
#vbp-practice .vbp-practice-answer{
  display:flex!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  gap:8px!important;
  min-height:50px!important;
  padding:6px 7px!important;
}
#vbp-practice .vbp-practice-answer-slot{
  flex:1 1 auto!important;
  min-width:0!important;
  min-height:36px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:6px 9px!important;
  border-radius:8px!important;
  font-size:17px!important;
  font-weight:800!important;
  line-height:1.15!important;
  text-align:center!important;
  overflow-wrap:anywhere!important;
}
#vbp-practice .vbp-practice-answer-slot.has-answer{
  flex:0 1 auto!important;
  width:fit-content!important;
  max-width:calc(100% - 104px)!important;
  min-width:0!important;
  border:1px solid #a5abb1!important;
  background:rgba(255,255,255,.82)!important;
  opacity:1!important;
  padding-left:10px!important;
  padding-right:10px!important;
}
#vbp-practice .vbp-practice-submit{margin-left:auto!important;}
#vbp-practice .vbp-practice-submit{
  flex:0 0 auto!important;
  width:auto!important;
  min-width:86px!important;
  height:38px!important;
  min-height:38px!important;
  padding:6px 12px!important;
}
#vbp-practice .vbp-choice.vbp-choice-selected{
  border-color:#69737c!important;
  box-shadow:inset 0 0 0 2px rgba(75,85,95,.18),0 2px 4px rgba(36,42,48,.16)!important;
  transform:translateY(-1px);
}
@media(max-width:520px){
  #vbp-practice .vbp-practice-answer{gap:5px!important;padding:5px!important;min-height:46px!important;}
  #vbp-practice .vbp-practice-answer-slot{font-size:16px!important;min-height:34px!important;padding:5px 6px!important;}
  #vbp-practice .vbp-practice-submit{min-width:78px!important;height:36px!important;min-height:36px!important;padding:5px 8px!important;font-size:13px!important;}
}


/* v1.9.2: two-level navigation + compact selected-answer pill. */
#vbp-practice .vbp-question-nav,
#vbp-practice .vbp-section-nav,
#vbp-translate .vbp-question-nav,
#vbp-translate .vbp-section-nav{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:7px!important;
  width:100%!important;
}
#vbp-practice .vbp-question-nav button,
#vbp-practice .vbp-section-nav button,
#vbp-translate .vbp-question-nav button,
#vbp-translate .vbp-section-nav button{
  width:100%!important;
}
#vbp-translate .vbp-translation-submit{width:100%!important;}
@media(max-width:520px){
  #vbp-practice .vbp-practice-answer-slot.has-answer{
    width:fit-content!important;
    max-width:calc(100% - 88px)!important;
    padding-left:8px!important;
    padding-right:8px!important;
  }
  #vbp-practice .vbp-question-nav,
  #vbp-practice .vbp-section-nav,
  #vbp-translate .vbp-question-nav,
  #vbp-translate .vbp-section-nav{gap:5px!important;}
}

/* v1.9.3: navigation color system.
   Question navigation (BACK/NEXT) = green.
   Section navigation / EXIT controls = red. */
#vbp-practice .vbp-question-nav button,
#vbp-translate .vbp-question-nav button{
  background:#2e7d32!important;
  color:#fff!important;
  border:1px solid #256628!important;
  box-shadow:0 2px 4px rgba(0,0,0,.16)!important;
}
#vbp-practice .vbp-question-nav button:hover,
#vbp-translate .vbp-question-nav button:hover{
  background:#276c2b!important;
  color:#fff!important;
}
#vbp-practice .vbp-question-nav button:disabled,
#vbp-translate .vbp-question-nav button:disabled{
  background:#78a97b!important;
  color:#f7fff7!important;
  border-color:#6a986d!important;
  opacity:1!important;
}

#vbp-practice .vbp-section-nav #vbp-psectionback,
#vbp-practice .vbp-section-nav #vbp-pexit,
#vbp-translate .vbp-section-nav #vbp-tsectionback,
#vbp-translate .vbp-section-nav #vbp-texit,
#vbp-app #vbp-lback,
#vbp-app #vbp-lexit,
#vbp-app #vbp-cback,
#vbp-app #vbp-cexit,
#vbp-app #vbp-selection-exit{
  background:#c62828!important;
  color:#fff!important;
  border:1px solid #a91f1f!important;
  box-shadow:0 2px 4px rgba(0,0,0,.16)!important;
}
#vbp-practice .vbp-section-nav #vbp-psectionback:hover,
#vbp-practice .vbp-section-nav #vbp-pexit:hover,
#vbp-translate .vbp-section-nav #vbp-tsectionback:hover,
#vbp-translate .vbp-section-nav #vbp-texit:hover,
#vbp-app #vbp-lback:hover,
#vbp-app #vbp-lexit:hover,
#vbp-app #vbp-cback:hover,
#vbp-app #vbp-cexit:hover,
#vbp-app #vbp-selection-exit:hover{
  background:#ad2020!important;
  color:#fff!important;
}


/* v1.9.4: score summary and 70% pass threshold. */
#vbp-complete .vbp-score-summary{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  padding:4px 0 10px;
}
#vbp-complete .vbp-score-line{font-size:22px;font-weight:800;line-height:1.25;}
#vbp-complete .vbp-score-counts{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 16px;font-size:16px;font-weight:800;}
#vbp-complete .vbp-score-right{color:#1f6b3c;}
#vbp-complete .vbp-score-wrong{color:#b3261e;}
#vbp-complete .vbp-pass-status{
  min-width:112px;
  padding:7px 18px;
  border-radius:999px;
  color:#fff!important;
  font-size:20px;
  font-weight:900;
  line-height:1.1;
  letter-spacing:.04em;
  text-align:center;
}
#vbp-complete .vbp-pass-status.vbp-pass{background:#2e7d32!important;border:1px solid #256628;}
#vbp-complete .vbp-pass-status.vbp-failed{background:#c62828!important;border:1px solid #a91f1f;}
@media(max-width:520px){
 #vbp-complete .vbp-score-line{font-size:19px;}
 #vbp-complete .vbp-score-counts{font-size:14px;gap:6px 12px;}
 #vbp-complete .vbp-pass-status{font-size:18px;min-width:100px;padding:6px 14px;}
}
\n\n/* v1.9.5: Admin-selectable learner content font weight (Normal / Bold).\n   Headings and controls intentionally keep their existing typography. */\n#vbp-app .ruletext.vbp-post-content table.vbp-verb-toggle-table tr.vbp-verb-info-row > td,\n#vbp-app .ruletext.vbp-post-content table.vbp-verb-toggle-table tr.vbp-verb-info-row > th,\n#vbp-app .ruletext.vbp-post-content table.vbp-verb-toggle-table tr.vbp-verb-info-row > td *,\n#vbp-app .ruletext.vbp-post-content table.vbp-verb-toggle-table tr.vbp-verb-info-row > th *,\n#vbp-app .ruletext.vbp-post-content table.vbp-verb-toggle-table tr.vbp-verb-example-row > td,\n#vbp-app .ruletext.vbp-post-content table.vbp-verb-toggle-table tr.vbp-verb-example-row > th,\n#vbp-app .ruletext.vbp-post-content table.vbp-verb-toggle-table tr.vbp-verb-example-row > td *,\n#vbp-app .ruletext.vbp-post-content table.vbp-verb-toggle-table tr.vbp-verb-example-row > th *,\n#vbp-app #vbp-practice-description,\n#vbp-app #vbp-pte,\n#vbp-app #vbp-practice .word,\n#vbp-app #vbp-practice .answer .word,\n#vbp-app #vbp-tte,\n#vbp-app #vbp-input {\n  font-weight:var(--vbp-content-weight,400)!important;\n}\n/* Keep action buttons independent from content font-weight setting. */\n#vbp-app .vbp-verb-action,\n#vbp-app .primary,\n#vbp-app .secondary,\n#vbp-app .vbp-mic,\n#vbp-app .vbp-restart {font-weight:800!important;}\n

/* v1.9.6: Practice live score — refreshes after every submitted answer. */
#vbp-practice .vbp-live-score{
 display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 14px;
 margin:6px 0 7px;padding:7px 9px;border:1px solid #d4dad1;border-radius:9px;
 background:rgba(255,255,255,.65);font-size:14px;font-weight:800;line-height:1.25;
}
#vbp-practice .vbp-live-right{color:#1f6b3c;}
#vbp-practice .vbp-live-wrong{color:#b3261e;}
#vbp-practice .vbp-live-percent{color:#20231f;}
@media(max-width:480px){
 #vbp-practice .vbp-live-score{font-size:12px;gap:5px 9px;padding:6px 7px;margin:4px 0 5px;}
}

/* v1.9.8: compact live-score labels with clearer spacing. */
#vbp-practice .vbp-live-score{
 display:grid!important;grid-template-columns:repeat(3,max-content);justify-content:center;align-items:center;column-gap:24px!important;row-gap:6px!important;
}
@media(max-width:480px){
 #vbp-practice .vbp-live-score{grid-template-columns:repeat(3,max-content);column-gap:14px!important;font-size:12px;}
}

/* v1.9.9: title, cleaner chooser, wider Learn content, score placement, and Translation live score. */
#vbp-app .vbp-app-title{
  flex:0 0 auto;
  margin:0 0 8px!important;
  padding:0 2px!important;
  text-align:center;
  font-size:clamp(22px,5.5vw,30px)!important;
  line-height:1.15!important;
  font-weight:900!important;
  color:#2f3538!important;
}
#vbp-app.vbp-activity-active .vbp-select{display:none!important;}
#vbp-app.vbp-selection-active .vbp-select{margin-top:28px!important;}
#vbp-app .vbp-select-control{display:block!important;}
#vbp-app .vbp-select-control select{width:100%!important;}

/* RIGHT / WRONG feedback belongs directly below the live score, not below the options. */
#vbp-practice .vbp-score-feedback,
#vbp-translate .vbp-score-feedback{
  flex:0 0 auto!important;
  min-height:20px!important;
  margin:2px 0 4px!important;
  padding:0!important;
  text-align:center!important;
}
#vbp-translate .vbp-live-score{
  display:grid!important;
  grid-template-columns:repeat(3,max-content)!important;
  justify-content:center!important;
  align-items:center!important;
  column-gap:24px!important;
  row-gap:6px!important;
  margin:6px 0 2px!important;
  padding:7px 9px!important;
  border:1px solid #d4dad1!important;
  border-radius:9px!important;
  background:rgba(255,255,255,.65)!important;
  font-size:14px!important;
  font-weight:800!important;
  line-height:1.25!important;
}
#vbp-translate .vbp-live-right{color:#1f6b3c!important;}
#vbp-translate .vbp-live-wrong{color:#b3261e!important;}
#vbp-translate .vbp-live-percent{color:#20231f!important;}

@media(max-width:782px){
  #vbp-app.vbp-selection-active .vbp-select{margin-top:clamp(70px,14vh,190px)!important;}
  #vbp-app .vbp-app-title{margin-top:2px!important;margin-bottom:5px!important;font-size:clamp(23px,6vw,29px)!important;}
  /* Bring the original post table close to the Learn card's left/right borders. */
  #vbp-learn .vbp-learn-scroll{
    margin-left:-7px!important;
    margin-right:-7px!important;
    padding-left:0!important;
    padding-right:0!important;
  }
  #vbp-learn .ruletext.vbp-post-content{
    padding-left:0!important;
    padding-right:0!important;
    margin-left:0!important;
    margin-right:0!important;
    border-radius:5px!important;
  }
  #vbp-learn .ruletext.vbp-post-content table{
    width:100%!important;
    max-width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
  }
  #vbp-practice .vbp-live-score,
  #vbp-translate .vbp-live-score{
    grid-template-columns:repeat(3,max-content)!important;
    column-gap:14px!important;
    font-size:12px!important;
    padding:6px 7px!important;
    margin:4px 0 2px!important;
  }
}
@media(max-width:390px){
  #vbp-app.vbp-selection-active .vbp-select{margin-top:clamp(55px,11vh,130px)!important;}
  #vbp-practice .vbp-live-score,
  #vbp-translate .vbp-live-score{column-gap:9px!important;font-size:11px!important;}
}

/* v1.10.0: three-button question navigation, compact answer box, score confirmation modal. */
#vbp-practice .vbp-question-nav.vbp-three-nav,
#vbp-translate .vbp-question-nav.vbp-three-nav{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:8px!important;
  width:100%!important;
  margin-top:8px!important;
}
#vbp-practice .vbp-question-nav.vbp-three-nav button,
#vbp-translate .vbp-question-nav.vbp-three-nav button{
  width:100%!important;
  min-width:0!important;
  min-height:46px!important;
  height:46px!important;
  padding:8px 10px!important;
  font-size:16px!important;
  font-weight:900!important;
  background:#2e7d32!important;
  color:#fff!important;
  border:1px solid #256628!important;
  border-radius:10px!important;
  box-shadow:0 2px 4px rgba(0,0,0,.16)!important;
  text-shadow:none!important;
}
#vbp-practice .vbp-question-nav.vbp-three-nav button:hover,
#vbp-translate .vbp-question-nav.vbp-three-nav button:hover{
  background:#276c2b!important;
  color:#fff!important;
}
#vbp-practice .vbp-question-nav.vbp-three-nav button:disabled,
#vbp-translate .vbp-question-nav.vbp-three-nav button:disabled{
  background:#78a97b!important;
  color:#f7fff7!important;
  border-color:#6a986d!important;
  opacity:1!important;
}
/* The Practice answer box now contains only the selected answer pill. */
#vbp-practice .vbp-practice-answer{
  justify-content:center!important;
}
#vbp-practice .vbp-practice-answer-slot.has-answer{
  max-width:100%!important;
}
#vbp-practice .vbp-practice-submit{display:none!important;}

/* End-of-section score confirmation. */
#vbp-app .vbp-score-modal[hidden]{display:none!important;}
#vbp-app .vbp-score-modal{
  position:fixed!important;
  inset:0!important;
  z-index:9999!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:18px!important;
  background:rgba(24,28,30,.48)!important;
}
#vbp-app .vbp-score-modal-card{
  width:min(92%,420px)!important;
  padding:18px!important;
  border-radius:14px!important;
  border:1px solid #bfc5c0!important;
  background:#fff!important;
  box-shadow:0 12px 34px rgba(0,0,0,.28)!important;
  text-align:center!important;
}
#vbp-app .vbp-score-modal-card h3{
  margin:0 0 12px!important;
  font-size:22px!important;
  font-weight:900!important;
}
#vbp-app .vbp-score-modal-grid{
  display:grid!important;
  grid-template-columns:repeat(3,max-content)!important;
  justify-content:center!important;
  gap:10px 18px!important;
  padding:12px 8px!important;
  margin-bottom:14px!important;
  border:1px solid #d4dad1!important;
  border-radius:10px!important;
  background:#f7f8f5!important;
  font-size:15px!important;
  font-weight:900!important;
}
#vbp-app .vbp-score-modal-right{color:#1f6b3c!important;}
#vbp-app .vbp-score-modal-wrong{color:#b3261e!important;}
#vbp-app .vbp-score-modal-percent{color:#20231f!important;}
#vbp-app #vbp-score-modal-ok{
  min-width:120px!important;
  min-height:44px!important;
  background:#2e7d32!important;
  color:#fff!important;
  border-color:#256628!important;
  text-shadow:none!important;
}
@media(max-width:520px){
  #vbp-practice .vbp-question-nav.vbp-three-nav,
  #vbp-translate .vbp-question-nav.vbp-three-nav{gap:6px!important;}
  #vbp-practice .vbp-question-nav.vbp-three-nav button,
  #vbp-translate .vbp-question-nav.vbp-three-nav button{
    min-height:44px!important;height:44px!important;font-size:14px!important;padding:7px 5px!important;
  }
  #vbp-app .vbp-score-modal-grid{grid-template-columns:1fr!important;gap:7px!important;font-size:16px!important;}
}


/* v1.10.1: skipped-as-wrong scoring and 80% pass/fail. */
#vbp-app .vbp-live-skipped{color:#7a5b00!important;font-weight:700!important;}
#vbp-app .vbp-score-modal-skipped{color:#7a5b00!important;}
#vbp-app .vbp-score-modal-status{margin-top:14px!important;padding:10px 12px!important;border-radius:10px!important;font-weight:800!important;text-align:center!important;font-size:16px!important;}
#vbp-app .vbp-score-modal-pass{background:#e8f5e9!important;color:#176b2c!important;border:1px solid #2e7d32!important;}
#vbp-app .vbp-score-modal-failed{background:#ffebee!important;color:#b71c1c!important;border:1px solid #c62828!important;}
#vbp-complete .vbp-score-skipped{color:#7a5b00!important;font-weight:700!important;}
#vbp-practice .vbp-live-score,#vbp-translate .vbp-live-score{grid-template-columns:repeat(4,max-content)!important;}
@media(max-width:520px){#vbp-practice .vbp-live-score,#vbp-translate .vbp-live-score{grid-template-columns:repeat(2,max-content)!important;justify-content:center!important;row-gap:5px!important;}}


/* v1.10.4: Practice auto-flow and equal remaining controls. */
#vbp-practice #vbp-pte{
  cursor:pointer!important;
  touch-action:manipulation;
}
#vbp-practice .vbp-question-nav,
#vbp-practice .vbp-section-nav{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
  width:100%!important;
}
#vbp-practice .vbp-question-nav > button,
#vbp-practice .vbp-section-nav > button{
  width:100%!important;
  min-width:0!important;
  min-height:54px!important;
  height:54px!important;
  padding:8px 10px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
@media(max-width:520px){
  #vbp-practice .vbp-question-nav,
  #vbp-practice .vbp-section-nav{gap:6px!important;}
  #vbp-practice .vbp-question-nav > button,
  #vbp-practice .vbp-section-nav > button{min-height:50px!important;height:50px!important;}
}
