/* ============================================================
   统一设计语言 — 首页 / 个人中心 / 练习页共享
   设计令牌：玫红(primary) + 蓝(secondary) + 琥珀(accent)
   ============================================================ */
:root{
  --grad-bg:linear-gradient(135deg,#fff1f2 0%,#ffe4e6 30%,#e0f2fe 60%,#fffbeb 100%);
  --text-main:#1e293b;
  --text-sub:#64748b;
  --text-muted:#94a3b8;
}

*{-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}

body{
  font-family:'Inter','Noto Sans SC',sans-serif;
  background:var(--grad-bg);
  background-attachment:fixed;
  min-height:100vh;
  color:var(--text-main);
}
.chinese-text{font-family:'Noto Sans SC',sans-serif}

/* ---- 毛玻璃卡片 ---- */
.glass-card{
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.62);
  box-shadow:0 8px 32px rgba(15,23,42,.06);
}

/* ---- 动画 ---- */
@keyframes fadeIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.animate-fade-in{animation:fadeIn .5s ease-out forwards}
.animate-slide-up{animation:slideUp .5s ease-out forwards;opacity:0}
.shake{animation:shake .3s ease-in-out 2}

/* ---- 主按钮（玫红渐变） ---- */
.btn-primary{
  background:linear-gradient(135deg,#f43f5e,#be123c);
  color:#fff;border:none;font-weight:600;cursor:pointer;
  transition:all .25s cubic-bezier(.4,0,.2,1);
  box-shadow:0 8px 25px rgba(225,29,72,.28);
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(225,29,72,.38)}
.btn-primary:active{transform:scale(.97)}

/* ---- 输入框 ---- */
.input-field{
  width:100%;padding:12px 16px;border:2px solid #e2e8f0;border-radius:14px;
  font-size:14px;outline:none;transition:all .2s;background:#fff;
}
.input-field:focus{border-color:#e11d48;box-shadow:0 0 0 3px rgba(225,29,72,.08)}

/* ---- 提示消息 ---- */
.msg{font-size:13px;padding:10px 14px;border-radius:10px;margin-top:10px}
.msg-success{background:#ecfdf5;color:#059669;border:1px solid #a7f3d0}
.msg-error{background:#fef2f2;color:#dc2626;border:1px solid #fecaca}

/* ---- 弹窗 ---- */
.modal-overlay{
  position:fixed;inset:0;background:rgba(15,23,42,.45);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  z-index:2000;display:flex;align-items:center;justify-content:center;
  padding:20px;opacity:0;pointer-events:none;transition:opacity .25s;
}
.modal-overlay.show{opacity:1;pointer-events:auto}
.modal-dialog{
  background:#fff;border-radius:24px;box-shadow:0 25px 60px rgba(0,0,0,.25);
  width:100%;max-width:420px;max-height:90vh;overflow-y:auto;padding:32px 28px;
  transform:scale(.92) translateY(14px);transition:transform .28s cubic-bezier(.34,1.56,.64,1);
}
.modal-overlay.show .modal-dialog{transform:none}

/* ---- Toast ---- */
.toast{
  position:fixed;top:24px;left:50%;transform:translateX(-50%) translateY(-120px);
  padding:13px 24px;border-radius:14px;font-weight:500;font-size:14px;
  z-index:9999;transition:transform .35s cubic-bezier(.34,1.56,.64,1);
  box-shadow:0 10px 30px rgba(0,0,0,.15);
}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast.error{background:#fef2f2;color:#dc2626;border:1px solid #fecaca}
.toast.success{background:#f0fdf4;color:#16a34a;border:1px solid #bbf7d0}

/* ---- 滚动条 ---- */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:#94a3b8}

/* ---- 笔顺/写字演示（练习页 Luyện viết） ---- */
.hanzi-box{width:130px;height:130px;position:relative;border-radius:12px;overflow:hidden;background:#fff}
.mizi-bg{position:absolute;inset:0;background-size:cover}
.hanzi-box svg,.hanzi-box canvas{position:relative;z-index:1}
.hanzi-box.write-box{width:170px;height:170px;border:2px solid #fecdd3;border-radius:14px;background:#fff}
.stroke-box{width:80px;height:80px;position:relative;background:transparent}
.stroke-box svg{position:relative;z-index:1}

/* ---- 描一描弹层（练习页 Luyện viết 描一描） ---- */
.trace-mask{position:fixed;inset:0;background:rgba(15,23,42,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:2147483647;display:none;align-items:center;justify-content:center;padding:20px}
.trace-mask.show{display:flex}
.trace-panel{background:#fff;border-radius:24px;padding:22px;max-width:320px;width:100%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.trace-panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.trace-panel-head .t-title{font-size:15px;font-weight:700;color:#1e293b}
.trace-panel-head .t-close{width:32px;height:32px;border-radius:50%;border:none;background:#f1f5f9;color:#64748b;font-size:16px;cursor:pointer;line-height:1}
.trace-box{width:200px;height:200px;margin:0 auto;position:relative;border-radius:16px;background:#fef2f2;border:2px solid #fecdd3;overflow:hidden}
.trace-box svg{position:relative;z-index:1}
.trace-hint{font-size:13px;color:#94a3b8;margin-top:12px;min-height:20px}
.trace-char-tag{display:inline-block;min-width:40px;padding:4px 10px;border-radius:10px;background:#f43f5e;color:#fff;font-size:22px;font-weight:700;margin-bottom:12px}
.trace-dots{display:flex;gap:6px;justify-content:center;margin-bottom:12px}
.trace-dots span{width:8px;height:8px;border-radius:50%;background:#e2e8f0;transition:all .2s}
.trace-dots span.on{background:#f43f5e}
.trace-dots span.done{background:#10b981}