/* ===== 985学习伙伴 · 游戏化 + 移动端共享样式 ===== */
:root{
  --sg-bg:#0f1424; --sg-card:#1d2740; --sg-card2:#243150; --sg-line:#2c3a5e;
  --sg-txt:#e8edf7; --sg-sub:#9fb0d0; --sg-brand:#6c8cff; --sg-brand2:#9b6cff;
  --sg-gold:#ffce5c; --sg-green:#3ddc97; --sg-red:#ff6b7a; --sg-cyan:#4fd6e0; --sg-orange:#ff9f5c;
}
*{box-sizing:border-box}
/* 底部导航存在时，给内容留出空间 */
body.sg-has-tab{padding-bottom:78px}

/* ===== 顶部 HUD（嵌入各页 .topbar） ===== */
.sg-hud{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sg-ava{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--sg-brand),var(--sg-brand2));
  display:grid;place-items:center;font-size:19px;flex:none}
.sg-name{font-weight:800;font-size:14px;color:var(--sg-txt);max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sg-lv{font-size:11px;font-weight:700;color:#3a2400;background:linear-gradient(135deg,var(--sg-gold),var(--sg-orange));
  padding:3px 8px;border-radius:999px;white-space:nowrap}
.sg-coin,.sg-fire{display:inline-flex;align-items:center;gap:3px;font-size:13px;font-weight:800;color:var(--sg-txt)}
.sg-coin b,.sg-fire b{color:var(--sg-gold)}
.sg-fire b{color:var(--sg-orange)}
.sg-xpwrap{width:100%;height:5px;border-radius:99px;background:var(--sg-card2);overflow:hidden;margin-top:5px}
.sg-xpwrap i{display:block;height:100%;background:linear-gradient(90deg,var(--sg-brand),var(--sg-brand2));border-radius:99px;transition:width .6s}
.sg-hud-mini{font-size:11px;font-weight:700;color:var(--sg-sub);margin-left:8px;white-space:nowrap;flex:none}

/* ===== 底部导航 ===== */
.sg-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:200;display:flex;
  background:rgba(16,20,36,.96);backdrop-filter:blur(10px);border-top:1px solid var(--sg-line);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));}
.sg-tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  color:var(--sg-sub);text-decoration:none;font-size:11px;font-weight:700;padding:4px 0;border-radius:12px}
.sg-tabbar a span{font-size:22px;line-height:1}
.sg-tabbar a.on{color:#fff;background:linear-gradient(135deg,rgba(108,140,255,.25),rgba(155,108,255,.2))}
.sg-tabbar a.on span{transform:translateY(-1px)}

/* ===== toast ===== */
.sg-toast{position:fixed;left:50%;bottom:92px;transform:translateX(-50%) translateY(16px);
  background:linear-gradient(135deg,var(--sg-brand),var(--sg-brand2));color:#fff;
  padding:11px 20px;border-radius:999px;font-weight:800;font-size:14px;z-index:999;opacity:0;
  transition:.25s;pointer-events:none;box-shadow:0 10px 30px rgba(108,140,255,.4)}
.sg-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ===== 新手引导弹窗 ===== */
.sg-mask{position:fixed;inset:0;background:rgba(5,8,20,.78);display:flex;align-items:center;justify-content:center;z-index:500;padding:20px}
.sg-modal{background:var(--sg-card);border:1px solid var(--sg-line);border-radius:20px;padding:22px;
  width:100%;max-width:380px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.sg-mt{font-size:20px;font-weight:800;color:var(--sg-txt);text-align:center}
.sg-ms{font-size:13px;color:var(--sg-sub);text-align:center;margin:8px 0 16px}
.sg-fld{margin-bottom:14px}
.sg-fld label{display:block;font-size:12px;color:var(--sg-sub);margin-bottom:7px}
.sg-fld input{width:100%;background:var(--sg-card2);border:1px solid var(--sg-line);color:var(--sg-txt);
  border-radius:12px;padding:11px 13px;font-size:15px;outline:none;font-family:inherit}
.sg-avs,.sg-grs{display:flex;gap:8px;flex-wrap:wrap}
.sg-av{width:42px;height:42px;border-radius:12px;background:var(--sg-card2);border:1px solid var(--sg-line);
  display:grid;place-items:center;font-size:22px;cursor:pointer}
.sg-av.on{background:linear-gradient(135deg,var(--sg-brand),var(--sg-brand2));border-color:transparent}
.sg-gr{padding:7px 13px;border-radius:999px;font-size:13px;background:var(--sg-card2);border:1px solid var(--sg-line);color:var(--sg-sub);cursor:pointer}
.sg-gr.on{background:linear-gradient(135deg,var(--sg-brand),var(--sg-brand2));color:#fff;border-color:transparent}
.sg-go{width:100%;margin-top:8px;border:none;border-radius:14px;padding:14px;font-size:15px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,var(--sg-brand),var(--sg-brand2));cursor:pointer}
.sg-go:active{transform:scale(.98)}

/* ===== 成长报告页 ===== */
.rp-wrap{max-width:640px;margin:0 auto;padding:14px 14px 20px}
.rp-hero{background:linear-gradient(135deg,#6c5cff,#00d4b8);border-radius:20px;padding:18px;color:#fff;position:relative;overflow:hidden}
.rp-hero .ava{width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,.22);display:grid;place-items:center;font-size:32px}
.rp-hero .nm{font-size:20px;font-weight:800;margin-top:10px}
.rp-hero .sub{font-size:13px;opacity:.9;margin-top:2px}
.rp-hero .lv{position:absolute;top:18px;right:18px;background:rgba(255,255,255,.22);padding:5px 12px;border-radius:999px;font-weight:800;font-size:13px}
.rp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:14px 0}
.rp-stat{background:var(--sg-card);border:1px solid var(--sg-line);border-radius:14px;padding:13px;text-align:center}
.rp-stat .n{font-size:24px;font-weight:800;color:var(--sg-txt)}
.rp-stat .n.gold{color:var(--sg-gold)}.rp-stat .n.green{color:var(--sg-green)}.rp-stat .n.orange{color:var(--sg-orange)}
.rp-stat .l{font-size:11.5px;color:var(--sg-sub);margin-top:3px}
.rp-card{background:var(--sg-card);border:1px solid var(--sg-line);border-radius:16px;padding:16px;margin-bottom:14px}
.rp-card h3{margin:0 0 12px;font-size:16px;font-weight:800;color:var(--sg-txt);display:flex;align-items:center;gap:6px}
.rp-subj{margin-bottom:11px}
.rp-subj .top{display:flex;justify-content:space-between;font-size:13px;color:var(--sg-txt);margin-bottom:5px}
.rp-subj .top .lv{color:var(--sg-sub);font-size:12px}
.rp-subj .bar{height:9px;border-radius:99px;background:var(--sg-card2);overflow:hidden}
.rp-subj .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--sg-brand),var(--sg-brand2));border-radius:99px}
.rp-subj.done .bar i{background:linear-gradient(90deg,var(--sg-gold),var(--sg-orange))}
.rp-badges{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.rp-badge{text-align:center;font-size:10.5px;color:var(--sg-sub)}
.rp-badge .b{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;font-size:25px;margin:0 auto 4px;background:var(--sg-card2);border:1px solid var(--sg-line)}
.rp-badge.on .b{background:linear-gradient(135deg,var(--sg-gold),var(--sg-orange));border-color:transparent}
.rp-badge.on{color:var(--sg-txt)}
.rp-trend{display:flex;align-items:flex-end;gap:6px;height:90px;margin-top:6px}
.rp-trend .d{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.rp-trend .d .col{width:100%;max-width:26px;border-radius:6px 6px 0 0;background:linear-gradient(180deg,var(--sg-brand),var(--sg-brand2))}
.rp-trend .d .lb{font-size:10px;color:var(--sg-sub);margin-top:4px}
.rp-share{width:100%;border:none;border-radius:14px;padding:15px;font-size:15px;font-weight:800;color:#3a2400;
  background:linear-gradient(135deg,var(--sg-gold),var(--sg-orange));cursor:pointer;margin-top:4px}
.rp-share:active{transform:scale(.98)}
.rp-share.ghost{background:var(--sg-card2);color:var(--sg-txt);border:1px solid var(--sg-line);margin-top:10px}
.rp-poster{display:none;margin-top:14px;text-align:center}
.rp-poster img{width:100%;max-width:340px;border-radius:16px;box-shadow:0 12px 30px rgba(0,0,0,.4)}
.rp-tip{font-size:12px;color:var(--sg-sub);text-align:center;margin-top:10px;line-height:1.6}
.rp-parent{background:linear-gradient(120deg,rgba(108,140,255,.14),rgba(155,108,255,.1));border:1px solid var(--sg-line);
  border-radius:16px;padding:15px;margin-bottom:14px}
.rp-parent .t{font-size:14px;font-weight:800;color:var(--sg-txt);margin-bottom:6px}
.rp-parent p{font-size:12.5px;color:var(--sg-sub);line-height:1.7;margin:0}

/* ===== 移动端通用微调 ===== */
@media (max-width:560px){
  .sg-name{max-width:52px}
  .rp-badges{grid-template-columns:repeat(5,1fr);gap:6px}
  .rp-badge .b{width:44px;height:44px;font-size:22px}
  /* 顶部栏在空间不足时换行，HUD 移到第二行 */
  .topbar{flex-wrap:wrap}
  .sg-hud{width:100%;justify-content:flex-start;margin-top:6px;order:3}
  /* 聊天区留出底部导航空间 */
  .ai-wrap{height:auto!important;min-height:calc(100vh - 160px);padding-bottom:6px}
  .c-wrap{padding-bottom:20px}
}