/* lit.css —— 识字核心样式（自包含，公开站可独立使用）
 * 温暖奶油风 · 仅浅色 · 移动端优先
 */
:root{
  --cream-bg:#FAF4EA;
  --cream-surface:#FFFDF8;
  --cream-surface-2:#F6EEDF;
  --clay:#D98E6A;          /* 主色 · 陶土 */
  --clay-deep:#C2774F;
  --sage:#8FAE86;          /* 辅助色 · 鼠尾草绿 */
  --honey:#ECB95C;         /* 点缀 · 蜜糖 */
  --ink:#4A4138;           /* 正文 · 暖棕 */
  --ink-soft:#948679;      /* 弱化文字 */
  --line:#ECE1D0;          /* 描边 */
  --shadow-sm:0 2px 8px rgba(120,95,70,.08);
  --r:18px; --r-sm:12px;
  --sans:"PingFang SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
.lit-root{font-family:var(--sans);color:var(--ink);background:var(--cream-bg);font-size:15px;line-height:1.5;max-width:520px;margin:0 auto;padding:14px 14px calc(20px + env(safe-area-inset-bottom))}

/* 基础组件 */
.card{background:var(--cream-surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;box-shadow:var(--shadow-sm);margin-bottom:14px}
.label{font-size:12px;color:var(--ink-soft);margin-bottom:7px;display:flex;align-items:center;gap:5px}
.hint{font-size:12px;color:var(--ink-soft);margin-top:14px;line-height:1.6}
.row{display:flex;gap:10px;align-items:center}
.ar{color:var(--ink-soft);font-size:18px}
.btn-primary{width:100%;border:none;background:var(--clay);color:#fff;border-radius:14px;padding:15px;font-size:16px;font-weight:600;font-family:var(--sans);cursor:pointer;box-shadow:0 4px 14px rgba(217,142,106,.4);margin-top:14px}
.btn-primary:active{transform:translateY(1px)}
.btn-ghost{border:1px solid var(--line);background:var(--cream-surface);color:var(--ink);border-radius:14px;font-size:15px;font-weight:600;font-family:var(--sans);cursor:pointer;margin-top:0;padding:13px 28px}
.btn-ghost:active{transform:translateY(1px)}
.btn-ghost.on{background:var(--sage);color:#fff;border-color:var(--sage)}
.note-in{width:100%;border:1px solid var(--line);background:var(--cream-surface);border-radius:var(--r-sm);padding:11px 12px;font-size:13px;font-family:var(--sans);color:var(--ink);margin-top:12px}
.note-in::placeholder{color:#BCAF9F}
.set-row{display:flex;align-items:center;justify-content:space-between;padding:15px 2px;border-bottom:1px solid var(--line);font-size:15px;cursor:pointer}
.set-row:last-child{border-bottom:none}
.set-row.on{background:rgba(143,174,134,.08)}

/* 识字顶栏 */
.lit-top{position:sticky;top:0;background:var(--cream-bg);padding:6px 0 10px;z-index:5}
.lit-kid{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.lit-kid button{border:1px solid var(--line);background:var(--cream-surface);border-radius:999px;padding:8px 16px;font-size:14px;color:var(--ink-soft);cursor:pointer;font-family:var(--sans)}
.lit-kid button.on{background:var(--clay);color:#fff;border-color:var(--clay);font-weight:600}
.lit-kid #lit-kid-add{border:1px dashed var(--sage);color:var(--sage);font-weight:700;min-width:40px}
.lit-seg{display:flex;background:var(--cream-surface-2);border-radius:999px;padding:4px;gap:4px;margin-bottom:12px}
.lit-seg button{flex:1;border:none;background:transparent;font-family:var(--sans);font-size:13px;color:var(--ink-soft);padding:9px 0;border-radius:999px;cursor:pointer}
.lit-seg button.on{background:var(--cream-surface);color:var(--ink);box-shadow:var(--shadow-sm);font-weight:600}
.lit-date{border:1px solid var(--line);background:var(--cream-surface);border-radius:999px;padding:7px 14px;font-size:13px;font-family:var(--sans);color:var(--ink);display:block;margin:0 auto 12px;width:max-content}

/* 字符网格 */
.char-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.char{font-size:17px;padding:10px 14px;border-radius:12px;border:1px solid var(--line);background:var(--cream-surface);color:var(--ink-soft);cursor:pointer;user-select:none;min-width:46px;text-align:center;transition:all .12s}
.char:active{transform:scale(.95)}
.char.on{background:var(--clay);color:#fff;border-color:var(--clay);box-shadow:0 2px 8px rgba(217,142,106,.4)}
.char.pb{background:#FBF4E4;color:var(--clay-deep);border-color:var(--honey);box-shadow:0 1px 6px rgba(236,185,92,.25)}
.lit-sel{border:1px solid var(--line);background:var(--cream-surface);border-radius:999px;padding:8px 12px;font-size:13px;font-family:var(--sans);color:var(--ink);cursor:pointer}

/* 小统计卡 */
.mini-stat{flex:1;min-width:78px;background:var(--cream-surface);border:1px solid var(--line);border-radius:14px;padding:10px;text-align:center}
.mini-stat b{display:block;font-size:22px;color:var(--clay-deep);line-height:1.1}
.mini-stat span{font-size:11px;color:var(--ink-soft)}

/* 总结 */
.lit-advice{border-top:1px dashed var(--line);margin-top:12px;padding-top:10px;font-size:13px;line-height:1.65;color:var(--ink)}
.lit-advice p{margin-bottom:8px}
.lit-advice b{color:var(--clay-deep)}
.story-title{font-weight:700;color:var(--clay-deep)}