/* Kindle 兼容样式：不使用 flexbox / grid / position:absolute / vh / calc
   Kindle 浏览器为老旧 WebKit，仅可靠支持 inline-block / table / 文本对齐 / 固定 px。 */
html, body {
  margin: 0;
  padding: 0;
  background: #fff;
  color: #000;
  font-family: serif;
  line-height: 1.35;
}
/* 内容区两侧各留白 10%，顶部留间距（用 body padding，Kindle 必定生效） */
body {
  padding-left: 10%;
  padding-right: 10%;
  padding-top: 14px;
}
/* 去除链接文字下划线（仅 a，不动按钮/tile 的 border） */
a, a:link, a:visited, a:hover, a:active {
  text-decoration: none !important;
}
/* 文字类按钮（.ws-text 等无 border）也去下划线 */
.ws-text { text-decoration: none !important; }
/* 内容区不再设宽度（由 body padding 控制留白） */
.page {
  margin: 0;
  padding: 0;
}
h1 {
  font-size: 38px;
  text-align: center;
  margin: 14px 0 18px;
}
h2.section-title {
  font-size: 26px;
  margin: 20px 0 10px;
  border-bottom: 2px solid #000;
  padding-bottom: 4px;
}
.panel {
  border: 2px solid #000;
  padding: 12px;
  margin: 10px 0 18px;
  text-align: center;
}
.big-line { font-size: 28px; margin: 8px 0; text-align: center; }
.muted, .footnote { font-size: 18px; color: #1a1a1a; text-align: center; }

/* 按钮：块级，留左右边距，不贴屏幕边 */
.btn, button.btn {
  display: block;
  width: 100%;
  min-height: 48px;
  line-height: 48px;
  border: 2px solid #000;
  background: transparent;
  color: #000;
  text-align: center;
  text-decoration: none;
  font-size: 24px;
  margin: 10px 0;
  padding: 0 14px;
  font-family: serif;
  cursor: pointer;
}
/* 仅 primary 按钮（开始今天、下一字）有纯黑背景 */
.btn.primary, button.btn.primary { background: #000; color: #fff; }
.btn.mini {
  display: inline-block;
  min-height: 36px;
  line-height: 36px;
  font-size: 18px;
  margin: 0 8px 0 0;
  padding: 0 10px;
}

/* 今日学习页：返回按钮 80% 宽居中 */
.page-today .btn { width: 80%; margin: 14px auto; }

/* 今日学习 / 分类字网格：inline-block 两列，边框可显示，上下留距 */
.char-grid { text-align: center; }
.char-tile {
  display: inline-block;
  width: 44%;
  min-height: 96px;
  margin: 10px 6px;
  border: 2px solid #000;
  background: transparent;
  text-decoration: none;
  color: #000;
  text-align: center;
  vertical-align: top;
  font-family: serif;
}
.char-large { display: block; font-size: 56px; line-height: 72px; }
.pinyin-small { display: block; font-size: 18px; }

/* 返回链接：button 样式，无边框、无下划线，保证触控区域 */
.back-link {
  display: inline-block;
  background: transparent;
  border: none;
  color: #1a1a1a;
  font-size: 18px;
  font-family: serif;
  text-decoration: none;
  padding: 10px 12px;
  cursor: pointer;
  text-align: left;
  min-height: 44px;
  line-height: 24px;
}

/* 字学习页 topbar：table 三列，左首页/中标题居中/右空 */
.topbar {
  margin-bottom: 6px;
  height: 40px;
}
.topbar-table {
  width: 100%;
  border-collapse: collapse;
}
.topbar-table td {
  vertical-align: middle;
  padding: 0;
  width: 33%;
  line-height: 40px;
}
.topbar-left { text-align: left; }
.topbar-right { text-align: right; }
.topbar-center {
  text-align: center;
  font-size: 20px;
  color: #1a1a1a;
}

.pinyin-main {
  text-align: center;
  font-size: 34px;
  margin: 4px 0 8px;
}

/* 字卡：三列表格，字图在中列居中，喇叭在右列 */
.char-card {
  margin: 6px 0 10px;
  text-align: center;
}
.char-table {
  width: 100%;
  margin: 0 auto;
  border-collapse: collapse;
}
.char-table td {
  vertical-align: middle;
  padding: 0;
}
.char-spacer-cell { width: 30%; }
.char-img-cell { width: 200px; text-align: center; }
.char-horn-cell { width: 30%; text-align: right; padding-right: 4px; }
/* 字图：固定方形 200px，与 cell 宽匹配，防压扁/拉长 */
.stroke-img {
  width: 200px;
  height: 200px;
  border: none;
  display: inline-block;
}
.tian-grid {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  border: 2px solid #e0e0e0;
  text-align: center;
}
.grid-char {
  font-size: 140px;
  line-height: 200px;
  text-align: center;
}
.char-actions { text-align: center; margin: 8px 0 4px; }
.char-actions .icon-btn { margin: 0 4px; }

/* 圆形喇叭按钮：用 text-align:center 居中图标，line-height 撑高 */
.icon-btn {
  display: inline-block;
  background: #fff;
  border: 2px solid #bbb;
  border-radius: 50%;
  width: 56px;
  height: 56px;
  padding: 0;
  cursor: pointer;
  color: #333;
  text-align: center;
  vertical-align: middle;
  line-height: 56px;
  text-decoration: none;
}
.icon-btn:active { background: #eee; }
.horn-svg {
  display: inline-block;
  vertical-align: middle;
}

/* 笔顺预览：所有笔画小图一行横排，超出可滚动
   小图为字图的 1/3（260/3≈86px） */
.stroke-preview {
  text-align: center;
  margin: 4px 0 14px;
  overflow: hidden;
  white-space: normal;
}
.stroke-thumb {
  width: 72px;
  height: 72px;
  margin: 0 3px;
  border: 1px solid #e0e0e0;
  vertical-align: middle;
  display: inline-block;
}

/* 词组与例句：table 两列布局（Kindle 兼容），各列左对齐 */
.ws-list { margin: 6px 0 14px; }
.ws-table {
  width: 100%;
  border-collapse: collapse;
}
.ws-row { vertical-align: middle; }
.ws-cell {
  padding: 4px 6px;
  text-align: left;
  vertical-align: middle;
}
.ws-word-cell { width: 30%; white-space: nowrap; }
.ws-sentence-cell { width: 70%; }
.ws-text {
  background: none;
  border: none;
  font-family: serif;
  cursor: pointer;
  padding: 2px 4px;
  color: #000;
  text-align: left;
  vertical-align: middle;
}
.ws-text:active { background: #f0f0f0; }
.ws-word { font-size: 24px; }
.ws-sentence { font-size: 24px; line-height: 1.3; }
.ws-sentence strong { font-weight: bold; }
.ws-cell .icon-btn { width: 40px; height: 40px; line-height: 40px; margin-left: 4px; }

/* 底部上一字 / 下一字：table 两列等宽 */
.page-char { padding-bottom: 20px; }
.bottom-nav {
  margin-top: 20px;
  width: 100%;
}
.bottom-nav table { width: 100%; border-collapse: collapse; }
.bottom-nav td { width: 50%; padding: 0 4px; vertical-align: middle; }
.bottom-nav .btn { margin: 0; width: 100%; box-sizing: content-box; }

/* 家长互动卡（互动小贴士） */
.interact-card {
  margin: 10px 0 16px;
  padding: 10px 12px;
  border: 2px dashed #555;
  background: #fff;
}
.interact-title {
  font-size: 20px;
  color: #000;
  margin-bottom: 6px;
  font-weight: bold;
}
.interact-item {
  font-size: 20px;
  line-height: 1.5;
  color: #1a1a1a;
  margin: 4px 0;
  padding-left: 6px;
}

/* 已学汉字 */
.learned-grid { text-align: center; }
.learned-item {
  display: inline-block;
  width: 80px;
  min-height: 100px;
  margin: 8px;
  border: 2px solid #000;
  background: transparent;
  text-align: center;
  font-size: 48px;
  text-decoration: none;
  color: #000;
  font-family: serif;
  vertical-align: top;
}
.learned-item small { display: block; font-size: 16px; }

/* 首页分类网格：inline-block 两列 */
.cat-grid { text-align: center; }
.cat-tile {
  display: inline-block;
  width: 30%;
  margin: 8px 1.5%;
  padding: 10px 4px;
  border: 2px solid #000;
  background: transparent;
  text-decoration: none;
  color: #000;
  text-align: center;
  vertical-align: top;
  font-family: serif;
}
.cat-name { display: block; font-size: 20px; }
.cat-progress { display: block; font-size: 15px; color: #333; margin-top: 3px; }