* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
    display: flex; justify-content: center; min-height: 100vh; color: #3d3226;
    background: radial-gradient(circle at 18% 10%, rgba(255,255,255,.9), transparent 45%),
                repeating-linear-gradient(0deg, rgba(120,90,50,.03) 0 1px, transparent 1px 4px),
                linear-gradient(160deg, #fbf6ea, #f6efdd 55%, #f2e9d4);
}
#app { width: 100%; max-width: 430px; padding: 14px 14px 22px; position: relative; display: flex; flex-direction: column; }
.seal {
    position: absolute; top: 10px; right: 12px; width: 50px; height: 50px;
    border: 2px solid #b23a2e; border-radius: 8px; color: #b23a2e;
    font-size: 11px; line-height: 1.05; display: flex; align-items: center; justify-content: center;
    text-align: center; transform: rotate(-7deg); opacity: .8;
    font-family: "STKaiti", "KaiTi", serif; font-weight: 700;
}

.view { display: none; flex-direction: column; flex: 1; }
.view.active { display: flex; }

h1, h2, h3 { font-family: "STKaiti", "KaiTi", serif; letter-spacing: 3px; color: #8f2b21; font-weight: 400; text-align: center; }
h1 { font-size: 28px; margin-top: 10px; margin-bottom: 20px; }
h2 { font-size: 23px; margin-bottom: 15px; }

.btn {
    width: 100%; min-height: 52px; margin-top: 10px; border: none; border-radius: 10px;
    font-family: inherit; font-size: 16px; font-weight: 700; color: #3d3226;
    background: linear-gradient(#fffdf7, #f4ecda); box-shadow: 0 3px 0 rgba(120,90,50,.2);
    cursor: pointer; display: flex; justify-content: center; align-items: center;
}
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(120,90,50,.2); }
.btn:disabled { opacity: 0.5; pointer-events: none; }
.btn.conf { background: linear-gradient(#fdeec4, #f7dfa0); color: #8f2b21; }
.btn.danger { color: #b23a2e; }

.grade-tabs { display: flex; gap: 10px; margin-bottom: 15px; }
.btn-grade { flex: 1; min-height: 44px; font-size: 15px; }
.btn-grade.active { background: linear-gradient(#fdeec4, #f7dfa0); color: #8f2b21; }

.kp-list { display: flex; flex-direction: column; gap: 10px; }
.kp-btn { min-height: 52px; font-weight: 600; }

.card {
    margin-top: 8px; padding: 18px 16px; border-radius: 12px; text-align: center; position: relative;
    background: linear-gradient(#fffdf7, #f7f1e2); box-shadow: 0 3px 0 rgba(120,90,50,.18), inset 0 0 0 1px rgba(120,90,50,.16);
}

.hud { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: #6b5a3e; font-weight: 600; padding-right: 60px; }
.hud b { color: #b23a2e; font-size: 18px; }
.bar { display: flex; gap: 4px; margin: 8px 0 4px; }
.bar i { flex: 1; height: 7px; border-radius: 4px; background: rgba(120,90,50,.16); }
.bar i.ok { background: linear-gradient(#8fbf6a, #6d9b48); }
.bar i.no { background: linear-gradient(#e08d80, #c2574a); }
.bar i.now { background: #fdeec4; box-shadow: inset 0 0 0 1.5px #b23a2e; }

.q { font-family: "STKaiti", "KaiTi", serif; font-size: 36px; letter-spacing: 2px; line-height: 1.35; }
.ans { display: inline-block; min-width: 104px; margin-left: 8px; padding: 2px 10px; border-bottom: 3px solid #b23a2e; font-family: inherit; }
.ans.empty { color: #c9b898; }

.stamp {
    position: absolute; right: 8px; top: 50%; width: 52px; height: 52px;
    border: 2.5px solid #6d9b48; border-radius: 9px; color: #4c7a2f;
    display: flex; align-items: center; justify-content: center;
    font-family: "STKaiti", "KaiTi", serif; font-size: 20px; transform: translateY(-50%) rotate(-8deg) scale(.6);
    opacity: 0; transition: .22s;
}
.stamp.show { opacity: .92; transform: translateY(-50%) rotate(-8deg) scale(1); }
.stamp.no { border-color: #c2574a; color: #a83c2e; }

.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 10px; }
.keypad button {
    min-height: 58px; border: none; border-radius: 10px; font-size: 25px; font-family: inherit; color: #3d3226;
    background: linear-gradient(#fffdf7, #f7f1e2); box-shadow: 0 3px 0 rgba(120,90,50,.2), inset 0 0 0 1px rgba(120,90,50,.14);
}
.keypad button:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(120,90,50,.2); }
.keypad button.conf { background: linear-gradient(#fdeec4, #f7dfa0); color: #8f2b21; font-weight: 800; box-shadow: 0 3px 0 rgba(178,58,46,.32), inset 0 0 0 1.6px rgba(178,58,46,.4); }

.tip {
    margin-top: 10px; padding: 10px 72px 10px 12px; border-radius: 0 10px 10px 0; font-size: 14px; line-height: 1.55; min-height: 42px;
    background: #fbeeea; border-left: 5px solid #a8331f; color: #8f2b21;
}
.tip.ok { background: #eef7e6; border-left-color: #6d9b48; color: #3f6b2a; }
.tip .big { font-family: "STKaiti", "KaiTi", serif; font-size: 19px; letter-spacing: 2px; }

/* Sheet for Settle / Wrong / Report */
.sheet {
    width: 100%; max-width: 380px; margin: 0 auto; padding: 20px 16px; border-radius: 12px; text-align: center;
    background: radial-gradient(circle at 20% 8%, #fffdf7, transparent 60%), linear-gradient(#fdfaf1, #f6efdd);
    box-shadow: 0 4px 0 rgba(120,90,50,.28), inset 0 0 0 2px rgba(178,58,46,.32);
    display: flex; flex-direction: column; gap: 10px;
}

.stars { font-size: 30px; letter-spacing: 6px; margin: 10px 0 4px; color: #e0a72b; }
.stats { font-size: 13px; color: #6b5a3e; margin-bottom: 10px; }
.stats b { color: #b23a2e; font-size: 16px; }
.wronglist { text-align: left; font-size: 13.5px; line-height: 1.9; color: #8f2b21; background: #fffdf7; border-radius: 10px; padding: 10px 12px; box-shadow: inset 0 0 0 1px rgba(120,90,50,.16); }

/* Over modal */
.over { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; padding: 18px; background: rgba(60,48,34,.42); z-index: 9; }
.over.on { display: flex; }

/* Custom list items for report/wrong book */
.paper-item {
    background: #fffdf7; border-radius: 10px; padding: 12px; margin-bottom: 10px; text-align: left;
    box-shadow: inset 0 0 0 1px rgba(120,90,50,.16);
}
.chart-bar-wrap { display: flex; align-items: center; margin-bottom: 8px; font-size: 13px; }
.chart-label { width: 45%; padding-right: 8px; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chart-bar-bg { width: 55%; background: rgba(120,90,50,.1); height: 16px; border-radius: 8px; overflow: hidden; position: relative; }
.chart-bar-fill { height: 100%; background: #b23a2e; }
.chart-val { position: absolute; right: 6px; top: 0; line-height: 16px; color: #3d3226; font-size: 11px; }

.bottom-actions { margin-top: 20px; }

/* 印章与提示条平级：绝对定位在提示条右侧，避免被 #tip 的 innerHTML 重写抹掉 */
.tip-wrap { position: relative; }
.tip-wrap .stamp { top: 50%; right: 10px; }

/* === 首屏可读性与层级修正（人工微调） === */
body {
    /* 底纹压淡一点，让卡片浮起来 */
    background: radial-gradient(circle at 18% 8%, rgba(255,255,255,.95), transparent 42%),
                linear-gradient(160deg, #f7f0e0, #f1e7d2 55%, #ece0c7);
}
.btn {
    background: linear-gradient(#ffffff, #fdf8ec);
    box-shadow: 0 3px 0 rgba(120,90,50,.22), inset 0 0 0 1.5px rgba(120,90,50,.22);
}
.btn.danger { color: #a8331f; background: linear-gradient(#fff6f2, #fde9e1); box-shadow: 0 3px 0 rgba(178,58,46,.28), inset 0 0 0 1.5px rgba(178,58,46,.45); }
.kp-btn { font-size: 16px; letter-spacing: .3px; min-height: 54px; }
.grade-tabs { background: rgba(120,90,50,.07); padding: 5px; border-radius: 12px; }
.btn-grade { box-shadow: none; background: transparent; margin-top: 0; }
.btn-grade.active { background: linear-gradient(#fdeec4, #f6dc97); color: #8f2b21; font-weight: 800; box-shadow: 0 2px 0 rgba(120,90,50,.22), inset 0 0 0 1.6px rgba(178,58,46,.55); }
.home-bottom { margin-top: 18px; padding-top: 16px; border-top: 2px dashed rgba(120,90,50,.4); }
/* === 竖式模式 === */
.q.vertical {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 40px;
    line-height: 1.2;
    letter-spacing: 4px;
}
.q.vertical .row-op {
    position: relative;
    width: 100%;
    text-align: right;
}
.q.vertical .op {
    position: absolute;
    left: -10px;
    bottom: 0;
}
.q.vertical .line {
    width: 100%;
    min-width: 80px;
    border-bottom: 3px solid #3d3226;
    margin-top: 5px;
    margin-bottom: 5px;
}
.q.vertical .ans-row {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    width: 100%;
}
.q.vertical .ans-box {
    width: 36px; height: 46px; border: 2px solid #c9b898; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-family: inherit; font-size: 32px; color: #3d3226; background: #fffdf7;
}
.q.vertical .ans-box.active { border-color: #b23a2e; box-shadow: 0 0 0 2px rgba(178,58,46,0.2); }


/* 竖式/横式切换按钮：视觉仍是小药丸，但点按区域 ≥44px */
#btn-toggle-layout { min-height: 44px !important; padding: 0 12px !important; font-size: 13px !important;
    display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 0 rgba(120,90,50,.18), inset 0 0 0 1.4px rgba(178,58,46,.45); }

/* 竖式/限时加入后纵向空间吃紧：按 360x640 与 320x568 两个视口压紧，保证键盘整块在屏内 */
.card { padding: 12px 14px !important; }
.q { font-size: 32px !important; line-height: 1.3 !important; }
.q.vertical .vform { font-size: 30px !important; line-height: 1.12 !important; letter-spacing: 4px !important; }
.q.vertical .vline { margin: 4px 6px 6px !important; }
.q.vertical .ans-box { min-width: 38px !important; height: 42px !important; font-size: 26px !important; }
.tip { margin-top: 8px !important; padding: 8px 12px !important; }
.bar { margin: 6px 0 3px !important; }
.keypad { margin-top: 8px !important; gap: 8px !important; }
.keypad button { min-height: 54px !important; }
.hud { padding-top: 0 !important; padding-bottom: 0 !important; }

/* 小屏（≤340px 宽或 ≤620px 高）：竖式排版再收一档，保证键盘整块可见且不横向溢出 */
@media (max-width: 340px), (max-height: 620px) {
    #app { padding: 10px 10px 14px; }
    .q { font-size: 30px !important; }
    .q.vertical .vform { font-size: 24px !important; line-height: 1.05 !important; letter-spacing: 3px !important; }
    .q.vertical .ans-box { min-width: 32px !important; height: 36px !important; font-size: 22px !important; }
    .q.vertical .vline { margin: 3px 5px 4px !important; }
    .keypad button { min-height: 50px !important; font-size: 22px !important; }
    .keypad { gap: 7px !important; margin-top: 7px !important; }
    .tip { padding: 7px 10px !important; margin-top: 7px !important; font-size: 13px !important; }
    #btn-toggle-layout { min-height: 44px !important; padding: 0 9px !important; font-size: 12px !important; }
}