/* ============================================================
   爱国小诗伴 · 样式层
   ============================================================ */
:root{
  --ink:#2a2520; --ink2:#6b6157; --ink3:#9a9086;
  --paper:#f8f3e9; --paper2:#f1e8d8; --card:rgba(255,252,246,.94);
  --gold:#b5904f; --gold-l:#e2cd9e; --red:#a33a30; --red-l:#c9604f;
  --green:#4f6f57; --blue:#4a6b8a;
  --line:rgba(107,97,87,.18);
  --shadow:0 6px 22px rgba(60,45,25,.10);
  --r:16px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:#20211f; color:var(--ink);
  display:flex; align-items:center; justify-content:center;
}
.serif{font-family:"Songti SC","STSong","Noto Serif SC","SimSun",serif}

/* ---------- 设备框 ---------- */
#screen{position:absolute;inset:0;overflow:hidden}
.phone{
  position:relative; width:min(430px,100vw); height:min(884px,100vh);
  background:#000; overflow:hidden; display:flex; flex-direction:column;
}
@media(min-width:520px) and (min-height:700px){
  .phone{border-radius:38px; height:min(844px,94vh); box-shadow:0 24px 70px rgba(0,0,0,.55),0 0 0 10px #111,0 0 0 12px #2a2a2a}
}
@media(max-width:519px),(max-height:699px){ .phone{border-radius:0} }

.bg{position:absolute;inset:0;background:url("assets/bg.jpg") center 62% / cover no-repeat;z-index:0}
.bg.home{background-position:center 74%}
.bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(248,243,233,.86) 0%,rgba(248,243,233,.72) 32%,rgba(248,243,233,.93) 78%,rgba(248,243,233,.99) 100%)}
.bg.home::after{background:linear-gradient(180deg,rgba(248,243,233,.44) 0%,rgba(242,231,209,.68) 40%,rgba(248,243,233,.97) 86%,#f8f3e9 100%)}

.app{position:relative;z-index:1;display:flex;flex-direction:column;height:100%;overflow:hidden}

/* ---------- 状态栏 / 顶栏 ---------- */
.statusbar{display:flex;justify-content:space-between;align-items:center;padding:11px 22px 3px;font-size:12.5px;font-weight:600;color:var(--ink);letter-spacing:.4px}
.topbar{display:flex;align-items:center;gap:10px;padding:6px 16px 10px;min-height:46px}
.topbar .back{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.72);border:1px solid var(--line);cursor:pointer;font-size:15px;color:var(--ink2)}
.topbar h1{font-size:17px;margin:0;font-weight:700;letter-spacing:1px;flex:1;text-align:center;padding-right:32px}
.topbar h1.left{text-align:left;padding-right:0}

/* ---------- 主体 ---------- */
.body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:0 16px 18px;-webkit-overflow-scrolling:touch}
.body::-webkit-scrollbar{width:0}
.sec{margin:16px 0 10px;display:flex;align-items:center;gap:8px}
.sec .dot{width:5px;height:16px;border-radius:3px;background:var(--gold)}
.sec h2{margin:0;font-size:15px;font-weight:700;letter-spacing:.6px}
.sec .hint{font-size:11.5px;color:var(--ink3);margin-left:auto}

/* ---------- 卡片 / 通用 ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px;box-shadow:var(--shadow);margin-bottom:12px}
.card.tight{padding:11px 13px}
.muted{color:var(--ink2)}
.mini{font-size:12px;color:var(--ink3);line-height:1.6}
.row{display:flex;align-items:center;gap:8px}
.between{display:flex;align-items:center;justify-content:space-between;gap:8px}
.wrap{flex-wrap:wrap}
hr{border:0;border-top:1px dashed var(--line);margin:12px 0}

.btn{border:0;border-radius:11px;padding:10px 16px;font-size:14px;font-weight:600;cursor:pointer;
  font-family:inherit;background:var(--paper2);color:var(--ink);transition:.16s;letter-spacing:.5px}
.btn:active{transform:scale(.97)}
.btn.pri{background:linear-gradient(135deg,#a33a30,#c9604f);color:#fff;box-shadow:0 4px 14px rgba(163,58,48,.28)}
.btn.gold{background:linear-gradient(135deg,#b5904f,#d9bc7c);color:#3a2c12}
.btn.ghost{background:rgba(255,255,255,.6);border:1px solid var(--line)}
.btn.sm{padding:7px 12px;font-size:12.5px;border-radius:9px}
.btn.block{display:block;width:100%;text-align:center}
.btn[disabled]{opacity:.45;pointer-events:none}

.chip{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:999px;font-size:12.5px;
  background:rgba(255,255,255,.75);border:1px solid var(--line);color:var(--ink2);cursor:pointer;transition:.15s}
.chip.on{background:var(--red);color:#fff;border-color:var(--red)}
.chip.gold{background:rgba(181,144,79,.16);border-color:rgba(181,144,79,.45);color:#7a5c22}

.tag{display:inline-block;font-size:11px;padding:2px 8px;border-radius:6px;background:rgba(181,144,79,.15);color:#7a5c22;font-weight:600}
.tag.g{background:rgba(79,111,87,.14);color:#3d5a44}
.tag.b{background:rgba(74,107,138,.14);color:#3a5670}
.tag.r{background:rgba(163,58,48,.12);color:#8f3128}

/* ---------- 首页 ---------- */
.home-hero{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;padding:0 26px 40px;text-align:center}
.avatar{width:132px;height:132px;border-radius:50%;object-fit:cover;object-position:center 18%;
  border:4px solid rgba(255,255,255,.92);box-shadow:0 10px 32px rgba(80,60,30,.26)}
.home-title{font-size:31px;font-weight:800;letter-spacing:6px;margin:18px 0 4px;text-shadow:0 2px 12px rgba(255,255,255,.9)}
.home-sub{font-size:13px;font-weight:600;letter-spacing:3px;color:#7a5c22;background:rgba(255,252,245,.92);padding:4px 15px;border-radius:999px;border:1px solid rgba(181,144,79,.55)}
.home-poem{margin:20px 0 6px;font-size:15px;line-height:2;color:#4a3f33;letter-spacing:2px}
.home-actions{display:flex;gap:12px;width:100%;margin-top:26px}
.home-actions .btn{flex:1;padding:13px 0;font-size:15px}
.home-foot{margin-top:18px;font-size:11.5px;color:#7a7264;letter-spacing:.5px;font-weight:500}

/* ---------- 古诗展示 ---------- */
.poem{text-align:center;padding:6px 0 2px}
.poem .pline{margin:7px 0}
.poem .py{font-size:10.5px;color:var(--gold);letter-spacing:1.2px;font-family:Georgia,serif}
.poem .hz{font-size:21px;letter-spacing:4px;font-weight:600;line-height:1.5}

/* ---------- 列表项 ---------- */
.item{display:flex;gap:10px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:13px;line-height:1.65}
.item:last-child{border-bottom:0}
.item .k{color:var(--red);font-weight:700;min-width:52px;flex-shrink:0}
.tick{display:flex;gap:9px;align-items:flex-start;padding:8px 0;font-size:13.5px;line-height:1.6;cursor:pointer}
.tick .box{width:19px;height:19px;border-radius:6px;border:1.5px solid var(--gold);flex-shrink:0;margin-top:2px;
  display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff;transition:.15s}
.tick.on .box{background:var(--gold);border-color:var(--gold)}
.tick.on span{color:var(--ink3);text-decoration:line-through}

/* ---------- 田字格书写板 ---------- */
.tian{position:relative;width:230px;height:230px;margin:6px auto 0;background:#fffdf7;
  border:2px solid #d9c9a8;border-radius:8px;overflow:hidden;touch-action:none}
.tian .grid{position:absolute;inset:0;pointer-events:none;z-index:1;
  background-image:repeating-linear-gradient(90deg,#e8dcc4 0 6px,transparent 6px 12px),
                   repeating-linear-gradient(180deg,#e8dcc4 0 6px,transparent 6px 12px);
  background-size:100% 1px,1px 100%;background-position:0 50%,50% 0;background-repeat:no-repeat}
.chghost{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;
  font-family:"Kaiti SC","STKaiti","KaiTi",serif;font-size:180px;color:#f2e6cf;user-select:none;pointer-events:none;line-height:1}
canvas.pad{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair}

/* ---------- 星级 ---------- */
.stars{letter-spacing:2px;font-size:15px;color:#d8d2c8}
.stars .f{color:var(--gold)}
.score-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px dashed var(--line);font-size:13px}
.score-row:last-child{border-bottom:0}
.score-row .nm{font-weight:600;min-width:62px}
.score-row .ds{font-size:11px;color:var(--ink3);flex:1;padding:0 8px;line-height:1.45}

/* ---------- 聊天 ---------- */
.chat{display:flex;flex-direction:column;gap:12px;padding-bottom:6px}
.msg{display:flex;gap:9px;align-items:flex-start}
.msg .ava{width:36px;height:36px;border-radius:50%;object-fit:cover;object-position:center 18%;flex-shrink:0;border:2px solid rgba(255,255,255,.9)}
.bubble{max-width:78%;padding:10px 13px;border-radius:14px;font-size:13.5px;line-height:1.75;background:#fff;border:1px solid var(--line);box-shadow:0 2px 8px rgba(60,45,25,.05)}
.msg.me{flex-direction:row-reverse}
.msg.me .bubble{background:linear-gradient(135deg,#4f6f57,#6c8f74);color:#fff;border-color:transparent}
.typing span{display:inline-block;width:6px;height:6px;margin:0 1px;border-radius:50%;background:var(--gold);animation:bl 1.2s infinite}
.typing span:nth-child(2){animation-delay:.2s}.typing span:nth-child(3){animation-delay:.4s}
@keyframes bl{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.composer{display:flex;gap:8px;padding:10px 0 2px;position:sticky;bottom:0;background:linear-gradient(180deg,rgba(248,243,233,0),rgba(248,243,233,.96) 32%)}

/* ---------- 输入 ---------- */
textarea,input[type=text]{width:100%;font-family:inherit;font-size:13.5px;padding:11px;border-radius:12px;
  border:1px solid var(--line);background:rgba(255,255,255,.85);resize:none;color:var(--ink);outline:none;line-height:1.6}
textarea:focus,input:focus{border-color:var(--gold);background:#fff}

/* ---------- 词云 ---------- */
.cloudbox{position:relative;height:250px;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.cloudbox canvas{position:absolute;inset:0;width:100%;height:100%}

/* ---------- 选项卡 ---------- */
.tabs{display:flex;gap:8px;padding:4px;background:rgba(255,255,255,.6);border:1px solid var(--line);border-radius:13px;margin-bottom:12px}
.tabs button{flex:1;border:0;background:transparent;padding:9px 4px;border-radius:10px;font-size:13px;font-weight:600;
  color:var(--ink2);cursor:pointer;font-family:inherit;transition:.15s}
.tabs button.on{background:#fff;color:var(--red);box-shadow:0 2px 8px rgba(60,45,25,.10)}

/* ---------- 底部导航 ---------- */
.tabbar{display:flex;background:rgba(255,253,249,.95);border-top:1px solid var(--line);backdrop-filter:blur(8px);padding:6px 0 8px}
.tabbar button{flex:1;border:0;background:transparent;cursor:pointer;font-family:inherit;
  display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;color:var(--ink3);padding:4px 0}
.tabbar button .ic{font-size:19px;line-height:1}
.tabbar button.on{color:var(--red);font-weight:700}

/* ---------- 柱状图 ---------- */
.bars{display:flex;align-items:flex-end;gap:10px;height:142px;padding:8px 4px 0;border-bottom:1px solid var(--line)}
.bar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:5px;height:100%}
.bar .fill{flex:none;width:100%;border-radius:6px 6px 0 0;background:linear-gradient(180deg,#c9604f,#a33a30);transition:height .7s cubic-bezier(.2,.8,.3,1)}
.bar .v{font-size:11px;font-weight:700;color:var(--red)}
.bar .n{font-size:10.5px;color:var(--ink3);white-space:nowrap}

/* ---------- 进度 ---------- */
.pbar{height:7px;border-radius:99px;background:rgba(107,97,87,.14);overflow:hidden}
.pbar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#b5904f,#d9bc7c);transition:width .6s}

/* ---------- 遮罩 / 投屏 ---------- */
.sheet{position:absolute;inset:0;z-index:30;background:rgba(20,18,15,.5);display:none;align-items:flex-end}
.sheet.on{display:flex}
.sheet .panel{width:100%;max-height:86%;overflow-y:auto;background:var(--paper);border-radius:22px 22px 0 0;padding:18px 16px 26px;animation:up .28s ease}
@keyframes up{from{transform:translateY(40px);opacity:.4}to{transform:translateY(0);opacity:1}}
.cast{position:absolute;inset:0;z-index:40;background:linear-gradient(160deg,#fbf6ec,#f0e6d3);display:none;flex-direction:column;padding:20px}
.cast.on{display:flex}
.cast h3{text-align:center;font-size:17px;letter-spacing:3px;margin:4px 0 2px}
.cast .sub{text-align:center;font-size:11.5px;color:var(--ink3);margin-bottom:10px}
.cast .cloudbox{flex:1;height:auto}

.empty{text-align:center;color:var(--ink3);font-size:12.5px;padding:26px 10px;line-height:1.8}
.toast{position:absolute;left:50%;bottom:96px;transform:translateX(-50%) translateY(8px);z-index:60;
  background:rgba(42,37,32,.92);color:#fff;font-size:12.5px;padding:9px 16px;border-radius:999px;
  opacity:0;transition:.25s;pointer-events:none;max-width:84%;text-align:center}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.note{font-size:11px;color:var(--ink3);line-height:1.7;background:rgba(181,144,79,.09);
  border-left:3px solid var(--gold-l);padding:8px 10px;border-radius:0 8px 8px 0;margin-top:10px}
.anim-draw{position:absolute;inset:0;z-index:2;pointer-events:none}