/* ============================================================
   浆果 AI · 果冻花园「全站皮肤」ui-skin.css v2
   范围：所有页面（学科页 / 工具页 / 游戏页 / 报告页）
   原则：只改观感（颜色 / 圆角 / 阴影 / 动效），
        绝不动布局、定位、尺寸、层级。
   回退：删掉页面里的 <link ... ui-skin.css> 一行即可。
   ============================================================ */

:root{
  --jg-mint:#4FD1A5;   --jg-mint-d:#2FB98A;   --jg-mint-l:#E4FAF3;
  --jg-sky:#5CB8FF;    --jg-sky-d:#2F95E8;    --jg-sky-l:#E3F3FF;
  --jg-peach:#FF9F68;  --jg-peach-d:#F57C3E;  --jg-peach-l:#FFF0E6;
  --jg-honey:#FFC94D;  --jg-honey-d:#F0A800;  --jg-honey-l:#FFF8E0;
  --jg-berry:#FF7FA8;  --jg-berry-d:#F05A8C;  --jg-berry-l:#FFEBF1;
  --jg-grape:#9B7BF5;  --jg-grape-d:#7B57E0;  --jg-grape-l:#F1ECFF;

  --jg-ink:#3A3153; --jg-ink-2:#6E6685; --jg-ink-3:#A29BB5;
  --jg-line:#EFEAF7; --jg-card:#FFFFFF; --jg-bg:#FFFBF5;

  --jg-r-xs:10px; --jg-r-sm:14px; --jg-r-md:20px; --jg-r-lg:26px;
  --jg-sh-1:0 2px 10px rgba(90,70,150,.06);
  --jg-sh-2:0 6px 22px rgba(90,70,150,.10);
  --jg-sh-3:0 12px 34px rgba(90,70,150,.14);
  --jg-ease:cubic-bezier(.34,1.56,.64,1);

  /* 兼容旧变量名，避免依赖旧主题的页面失色 */
  --berry-500:#9B7BF5; --berry-600:#7B57E0;
  --ink:#3A3153;
}

/* ─────────── 1. 全局底色 ─────────── */
html{-webkit-text-size-adjust:100%;}
body{
  font-family:'PingFang SC','HarmonyOS Sans','Hiragino Sans GB','Microsoft YaHei',system-ui,sans-serif !important;
  color:var(--jg-ink);
  background-color:var(--jg-bg);
  background-image:
    radial-gradient(900px 420px at 92% -60px, rgba(155,123,245,.07), transparent 62%),
    radial-gradient(760px 380px at -80px 22%, rgba(92,184,255,.07), transparent 60%) !important;
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}

/* ─────────── 2. 卡片：大圆角 + 果冻质感 ─────────── */
.card,.sec,.box,.panel-card,.q,.item,.tile,.mod,.tool,
.c-stat,.stat-card,.kpi,.cpa-card,.hcard,.gcard,
.quiz,.paper-card,.review-card,.mistake-card,
.opt,.option,.choice,.answer-card,.fb,.feedback{
  border-radius:var(--jg-r-lg) !important;
  box-shadow:var(--jg-sh-2) !important;
  border-color:var(--jg-line) !important;
}

/* 可点击卡片：上浮 + 回弹 */
a.card,.gcard,.tile,.mod,.item[onclick],.opt,.option,.choice{
  transition:transform .2s var(--jg-ease), box-shadow .2s !important;
}
a.card:hover,.gcard:hover,.tile:hover,.mod:hover,.opt:hover,.option:hover,.choice:hover{
  transform:translateY(-3px);
  box-shadow:var(--jg-sh-3) !important;
}
a.card:active,.gcard:active,.tile:active,.mod:active,.opt:active,.option:active,.choice:active{
  transform:scale(.975);
}

/* ─────────── 3. 按钮：胶囊 + 渐变 + 回弹 ─────────── */
button,.btn,.btn-pri,.primary,.pill,.chip,.tabbtn,.seg-btn{
  border-radius:999px !important;
  transition:transform .16s var(--jg-ease), box-shadow .18s, background .18s, border-color .18s !important;
  font-family:inherit;
}
button:active,.btn:active,.pill:active,.chip:active,.tabbtn:active,.seg-btn:active{
  transform:scale(.955);
}

/* 主按钮：果冻紫渐变 */
.btn.pri,.btn-pri,.primary,.btn.primary,.primary-btn,.main-btn,
.save-btn,.start-btn,.submit-btn,.gen-btn,.btn-main{
  background:linear-gradient(135deg,var(--jg-grape),#B49BFF) !important;
  color:#fff !important;
  border:none !important;
  box-shadow:0 8px 22px rgba(155,123,245,.34) !important;
}
.btn.pri:hover,.btn-pri:hover,.primary:hover,.save-btn:hover,.start-btn:hover{
  box-shadow:0 12px 28px rgba(155,123,245,.42) !important;
}

/* 次要按钮 */
.btn.ghost,.btn-gray,.btn.gray,.ghost-btn{
  background:#F5F1FC !important;
  color:var(--jg-grape-d) !important;
  box-shadow:none !important;
}

/* ─────────── 4. 标题：渐变字 ─────────── */
.hero h1,.page-header h1,.hd h1,.setup-page h1,.top h1,
header h1,h1.page-title,.panel-title{
  background:linear-gradient(135deg,var(--jg-grape-d),var(--jg-sky-d) 55%,var(--jg-mint-d));
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  letter-spacing:.2px;
  font-weight:900;
}

/* ─────────── 5. 表单 ─────────── */
input,select,textarea{
  border-radius:var(--jg-r-sm) !important;
  border-color:var(--jg-line) !important;
  transition:border-color .18s, box-shadow .18s;
  font-family:inherit;
}
input:focus,select:focus,textarea:focus{
  outline:none !important;
  border-color:var(--jg-sky) !important;
  box-shadow:0 0 0 4px rgba(92,184,255,.14) !important;
}

/* 分段选择 / 年级 / 册次 / 单元 */
.seg-tabs>*, .pg, .seg > *, .grade-btn, .term-btn, .unit-btn, .tabbtn{
  border-radius:999px !important;
  transition:all .18s var(--jg-ease) !important;
}
.seg-tabs>.on, .pg.on, .grade-btn.on, .term-btn.on, .unit-btn.on, .tabbtn.on{
  background:linear-gradient(135deg,var(--jg-grape),#B49BFF) !important;
  color:#fff !important;
  box-shadow:0 6px 16px rgba(155,123,245,.32) !important;
  border-color:transparent !important;
}

/* ─────────── 6. 标签 / 徽标 ─────────── */
.tag,.badge,.label-chip,.chip.on{
  border-radius:999px !important;
}
.tag{background:var(--jg-grape-l) !important;color:var(--jg-grape-d) !important;}

/* ─────────── 7. 进度条 ─────────── */
.bar,.progress,.bar-fill,.prog{
  border-radius:999px !important;
}
.bar-fill,.progress>.fill,.fill{
  background:linear-gradient(90deg,var(--jg-mint),var(--jg-sky)) !important;
}

/* ─────────── 8. 表格 / 列表 ─────────── */
tr,.list-row,.row{border-color:var(--jg-line) !important;}
th{color:var(--jg-ink-2) !important;font-weight:700;}

/* ─────────── 9. 答题反馈色统一 ─────────── */
.right,.correct,.ok,.is-right{
  background:var(--jg-mint-l) !important;
  border-color:rgba(79,209,165,.5) !important;
  color:var(--jg-mint-d) !important;
}
.wrong,.error,.is-wrong{
  background:var(--jg-berry-l) !important;
  border-color:rgba(255,127,168,.5) !important;
  color:var(--jg-berry-d) !important;
}

/* ─────────── 10. 页面入场动画 ─────────── */
@keyframes jgFadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.card,.sec,.q,.gcard,.tile{
  animation:jgFadeUp .4s var(--jg-ease) both;
}
.card:nth-child(2),.q:nth-child(2){animation-delay:.04s}
.card:nth-child(3),.q:nth-child(3){animation-delay:.08s}
.card:nth-child(4),.q:nth-child(4){animation-delay:.12s}

/* ─────────── 11. 滚动条 ─────────── */
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-thumb{background:rgba(155,123,245,.28);border-radius:999px;}
::-webkit-scrollbar-thumb:hover{background:rgba(155,123,245,.45);}
::-webkit-scrollbar-track{background:transparent;}

/* ─────────── 12. 无障碍 ─────────── */
:focus-visible{outline:3px solid rgba(92,184,255,.45);outline-offset:3px;border-radius:8px;}

/* ─────────── 13. 降级动效 ─────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}