.imgwrap{
  width: 430px;
  height: 239px;
  border-radius:30px;
  overflow:hidden;
  margin: 0 auto;
}
.imgwrap img{
  width:100%;
  height:auto;
  display:block;
}

button{padding:8px 12px;margin:4px;background:#b9b9b9;color:#fff;border:none;border-radius:4px;cursor:pointer}

button:hover{

background:#666
}

.bottom-border-box {
    width: 790px;
    background-color: rgba(30, 32, 40, 0.45);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius:20px;
    position: fixed;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
}

.buttonq{padding:8px 12px;margin:4px;font-size:18px;background:#80acff;color:#fff;border:none;border-radius:4px;cursor:pointer}
.buttonq:hover{background:#666}


.buttondi{padding:8px 12px;margin:4px;font-size:18px;background:#b9b9b9;color:#fff;border:none;border-radius:4px;cursor:pointer}
.buttondi:hover{background:#666}

.pretty-ebutton{
    padding:10px 18px;
    line-height:1.4;
    font-size:26px;
    min-width: 150px;
    box-sizing: border-box;
}
.page-info{margin:8px 4px;color:#ccc;}
/* 打字练习样式 */
.type-char{color:#888;position:relative;}
.type-char.right{color:#11c320;}/* 打的字母绿色 */


.type-char.cursor{
    color:#888;/* 需要打的字母 */
}

.type-char.cursor::after{
    content:"";
    position:absolute;
    bottom:-2px;
    left:0;
    width:100%;
    height:2px;
background: linear-gradient(90deg, #4d7cff, #7a9cff);

    animation: blink 0.6s infinite;
}
@keyframes blink{
    0%,100%{opacity:1}
    50%{opacity:0}
}
.keyboard-wrap {
    background-color: rgba(30,32,40,0.45);
    border:1px solid rgba(255,255,255,0.12);
    border-radius:20px;
    padding:18px;
    margin: 0 auto;
    width: 750px;
}
.key-row {
    display:flex;
    gap:6px;
    margin-bottom:6px;
}
.key-row:last-child{
    margin-bottom:0;
}
.key {
    width:43px;
    height:43px;
    background-color:rgba(45,48,58,0.4);
    border:1px solid rgba(255,255,255,0.14);
    border-radius:10px;
    color:#fff;
    font-size:17px;
    display:flex;
    justify-content:center;
    align-items:center;
    user-select:none;
    cursor:pointer;
}
.key.active{
    background:linear-gradient(145deg,#404280,#2b2b55);
    border:1px solid #7276ff;
}
.key.w1 { width:76px; } /* Tab */
.key.w2 { width:98px; } /* Caps */
.key.w3 { width:122px; } /* Shift */
.key.w4 { width:64px; } /* Backspace */
.key.w5 { width:60px; height:106px; } /* 右侧回车 */
.key.w6 { width:60%; } /* 空格 */
.app {
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  text-align: center;
}
#app2{
  display:none;
  text-align: center; /* 水平居中 */
}
/* 如果想要块整体内部内容上下居中，可加上这个 */
#app2 h1{
  margin:0;
  text-align:center;
}
#result-content{
  text-align:center;
}
.word-card-wrap{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:20px 0;}
.word-card{border:1px solid #ccc;border-radius:8px;padding:10px;text-align:center;}
.word-ipa{font-size:13px;color:#c0392b;}
.word-pos{font-size:13px;color:#2980b9;margin:4px 0;}
.word-text{font-size:18px;font-weight:bold;margin-top:6px;}
.back-btn{margin-top:20px;padding:8px 16px;cursor:pointer;}
/* 新增：单词拼图 */
.puzzle-wrap{margin:20px 0;}
.puzzle-box{
border:1px solid #ccc;
    border-radius:15px;
    padding:16px;
    position:relative;
    min-height:48px;
    display:flex;
    align-items:center;

    font-size:20px;
  width: 750px;
  margin: 0 auto;
}
.puzzle-box-ctrl{
    position:absolute;
    top:8px;
    right:8px;
    display:flex;
    gap:6px;
}
.puzzle-box-ctrl button{
    width:28px;
    height:28px;
    padding:0;
    font-size:18px;
    line-height:1;
}
.puzzle-word-btn{margin:3px;padding:6px 20px;font-size:38px;}
.pubtn{margin:3px;padding:6px 20px;font-size:38px;}
/* ========= 新版多框填空css ========= */
.split-input-wrap{margin:20px 0;}
.split-input-wrap .item{
    display:inline-block;
    margin:0 4px;
}
.split-input-wrap input{
border: none;
  border-bottom: 3px solid #1959ef;
  font-size:34px;
  padding: 0 10px;
  outline: none; /* 去掉点击默认蓝色外框 */
  text-align: center;
  caret-color: #0066ff;
  background: transparent;
}
.split-input-wrap input.right{
    border-color:#0f0;
    color:#009900;
}
.split-input-wrap input.wrong{
    border-color:#f33;
    color:#0066ff;
}
.bbaifenbi:-webkit-full-screen {
  border: none;
}
.bbaifenbi:fullscreen {
  border: none;
}