/* 学习流程页专用（对齐原型 learn-foot / learn-pad 布局） */
.learn-head{padding:12px 16px 0}
.lh-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.lh-row .lh-l{font-size:12.5px;color:var(--mu);font-weight:600}
.lh-row .lh-r{font-size:15px;font-weight:800;color:var(--pri);letter-spacing:.3px}
.steps{display:flex;gap:5px;margin-top:10px}
.step{flex:1;text-align:center;font-size:11px;font-weight:600;color:var(--mu);
  padding:6px 0;border-radius:9px;background:#fff;transition:.25s}
.step.cur{background:linear-gradient(135deg,#5b6cff,#8b5cf6);color:#fff;
  box-shadow:0 6px 16px -8px rgba(91,108,255,.9)}
.step.done{background:#e7f9f1;color:var(--ok)}
.learn-pad{padding:16px 16px 118px}
.learn-foot{position:fixed;left:0;right:0;bottom:calc(62px + env(safe-area-inset-bottom));
  max-width:480px;margin:0 auto;z-index:55;display:flex;gap:10px;padding:10px 16px 12px;
  background:linear-gradient(to top,rgba(242,244,249,.98) 0%,rgba(242,244,249,.92) 60%,rgba(242,244,249,.72) 100%);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid rgba(233,236,245,.9);box-shadow:0 -6px 20px -12px rgba(20,30,80,.28)}
.learn-foot .btn{margin-top:0;flex:1}

/* -------------------------------------------------------------
   页内字母键盘（拼写 / 填空环节）
   -------------------------------------------------------------
   手机自带输入法的英文联想会把要拼的词提示出来，所以输入环节不唤起
   系统键盘：输入框只读，字母由这块键盘上屏（bridge.js 的 AY.openLetterPad）。
   ------------------------------------------------------------- */
#ayLetterPad{position:fixed;left:0;right:0;
  bottom:calc(var(--tabbar-h,62px) + env(safe-area-inset-bottom,0px));
  max-width:var(--shell,480px);margin:0 auto;padding:8px 6px 10px;z-index:56;
  background:linear-gradient(to top,rgba(242,244,249,.99) 0%,rgba(242,244,249,.96) 70%,rgba(242,244,249,.88) 100%);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid rgba(233,236,245,.9);box-shadow:0 -6px 20px -12px rgba(20,30,80,.28)}
#ayLetterPad[hidden]{display:none}
.lp-row{display:flex;gap:5px;margin-bottom:6px;padding:0 2px}
.lp-row:last-child{margin-bottom:0}
.lp-row:nth-child(2){padding:0 15px}
.lp-key{flex:1;min-width:0;height:44px;border-radius:11px;background:#fff;color:#3b4668;
  font-size:17px;font-weight:700;line-height:1;user-select:none;-webkit-user-select:none;
  touch-action:manipulation;box-shadow:0 2px 0 rgba(20,30,80,.10);transition:transform .1s,background .1s}
.lp-key:active{transform:translateY(1px);background:#eef1fb;box-shadow:0 1px 0 rgba(20,30,80,.10)}
.lp-fn{flex:1.6;background:#e9ecf8;color:#4a5578;box-shadow:none}
.lp-fn:active{background:#dde2f4}
.lp-ok{flex:1.9;background:linear-gradient(135deg,#5b6cff,#8b5cf6);color:#fff;font-size:15px;box-shadow:none}
.lp-ok:active{background:linear-gradient(135deg,#4d5ef0,#7c4de6)}

/* 键盘占着底部：底部按钮条让位（键盘自带「确定」），正文留出键盘高度 */
body.keypad-open .learn-foot{display:none}
body.keypad-open .learn-pad{padding-bottom:228px}
body.keypad-open .pad{padding-bottom:228px}
/* 只读输入框给一个「正在输入」的观感 */
body.keypad-open .spell-input{border-color:#b9c1ff;background:#fff;box-shadow:0 0 0 4px rgba(91,108,255,.10)}

/* 横屏矮屏：键盘压薄一层，别把题目顶出屏幕 */
@media (orientation:landscape) and (max-height:560px){
  #ayLetterPad{padding:6px 6px 7px}
  .lp-row{gap:4px;margin-bottom:5px}
  .lp-row:nth-child(2){padding:0 12px}
  .lp-key{height:33px;font-size:15px;border-radius:8px}
  body.keypad-open .learn-pad,body.keypad-open .pad{padding-bottom:170px}
}