*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:system-ui, sans-serif;
}
body{
    padding:20px 12px;
    background:#f7f7f7;
}
.container{
    max-width:700px;
    margin:0 auto;
}
h1{
    text-align:center;
    margin-bottom:24px;
    color:#222;
    font-size:26px;
}
.search-box{
    display:flex;
    gap:8px;
    margin-bottom:20px;
}
#charInput{
    flex:1;
    padding:12px 14px;
    font-size:18px;
    border:1px solid #ccc;
    border-radius:6px;
}
button{
    padding:12px 22px;
    cursor:pointer;
    border:none;
    background:#2563eb;
    color:white;
    border-radius:6px;
    font-size:16px;
}
button:hover{
    background:#1d4ed8;
}

/* 弹窗样式 */
.modal{
    display:none;
    position:fixed;
    left:0;top:0;
    width:100%;height:100%;
    background:rgba(0,0,0,0.6);
    align-items:center;
    justify-content:center;
    padding:16px;
}
.modal-content{
    background:#fff;
    padding:24px;
    border-radius:10px;
    position:relative;
    width:100%;
    max-width:420px;
    max-height:90vh;
    overflow-y:auto;
}
.close-btn{
    position:absolute;
    right:16px;top:12px;
    font-size:26px;
    cursor:pointer;
    color:#666;
}
.svg-wrap{
    text-align:center;
    margin:16px 0;
}
#hanziSvg{
    background:#fafafa;
    border-radius:8px;
    max-width:100%;
}
.control-bar{
    display:flex;
    gap:10px;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
}
.speed-box{
    margin-left:12px;
}
#speedSelect{
    padding:8px;
    font-size:16px;
}
/*汉字列表样式*/
.char-list{
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap:10px;
    margin:24px 0;
}
.char-card{
    padding:14px 8px;
    border:1px solid #ddd;
    border-radius:8px;
    text-align:center;
    cursor:pointer;
    transition:0.2s;
}
.char-card:hover{
    background:#eef2ff;
    border-color:#2563eb;
}
.char-card .c{
    font-size:32px;
    display:block;
}
.char-card .pinyin{
    font-size:13px;
    color:#555;
}
.char-card .lv{
    font-size:12px;
    color:#888;
}
.page-bar{
    display:flex;
    gap:12px;
    align-items:center;
    justify-content:center;
    margin-bottom:30px;
    flex-wrap:wrap;
}
#pageInfo{
    font-size:16px;
}
.char-info{
    text-align:center;
    font-size:18px;
    margin:12px 0;
    color:#222;
}
.meaning-box{
    margin:10px auto;
    font-size:15px;
    color:#444;
    line-height:1.6;
    max-width:320px;
}

/* ========== 移动端媒体查询 ========== */
@media (max-width: 480px) {
    body{
        padding:16px 8px;
    }
    h1{
        font-size:22px;
        margin-bottom:18px;
    }
    .search-box{
        flex-wrap:wrap;
    }
    #charInput{
        width:100%;
    }
    .search-box button{
        width:100%;
    }
    .char-list{
        grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
        gap:8px;
    }
    .char-card .c{
        font-size:28px;
    }
    .modal-content{
        padding:18px;
    }
}

/* 弹窗控件间距优化，手机更好点击 */
.control-bar {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 16px;
}
.control-bar button {
    padding: 8px 18px;
    font-size: 16px;
}
#speedSelect {
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid #ccc;
}
.close-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.2s;
}
.close-btn:hover {
    background-color: #eee;
}

/* 弹窗控件间距优化，手机更好点击 */
.control-bar {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 16px;
}
.control-bar button {
    padding: 8px 18px;
    font-size: 16px;
}
#speedSelect {
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid #ccc;
}
.close-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.2s;
}
.close-btn:hover {
    background-color: #eee;
}

/* 新增：限制弹窗最大宽度，窄手机不会溢出 */
.modal-content{
    max-width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
}