/* 学习 · 随机抽题（浅冰蓝玻璃主题，与出行择日一致） */
:root{
  --bg:#eaf1f9;
  --panel:rgba(255,255,255,.72);        /* 大卡片底 */
  --panel-deep:rgba(255,255,255,.62);   /* 子卡 / 输入框底 */
  --panel-line:rgba(255,255,255,.9);
  --line:rgba(44,62,93,.12);
  --ink:#2c3e5d;                        /* 主文字 */
  --sub:rgba(44,62,93,.6);
  --bright:#2f7ce8;                     /* 主题蓝 */
  --bright-deep:#1f5fd6;
  --title:#1e3a6e;
  --tint:rgba(47,124,232,.10);
  --tint-line:rgba(47,124,232,.30);

  /* 兼容旧变量名（原米金主题遗留） */
  --gold:var(--bright);
  --gold-d:var(--bright-deep);
  --gold-l:rgba(47,124,232,.14);

  --ok:#2fa864; --ok-bg:#eef8f2; --ok-line:#a9d9bf;
  --no:#e2574a; --no-bg:#fdf1ef; --no-line:#f1c2ba;
}
*{box-sizing:border-box;}
.hidden{display:none !important;}
[hidden]{display:none !important;}

body{
  margin:0;padding:14px 12px 44px;color:var(--ink);min-height:100vh;
  background:
    radial-gradient(1100px 560px at 50% -8%, rgba(255,255,255,.95), transparent 62%),
    radial-gradient(900px 480px at 12% 88%, rgba(147,197,253,.22), transparent 58%),
    radial-gradient(900px 480px at 88% 92%, rgba(160,150,250,.16), transparent 58%),
    linear-gradient(180deg,#f2f7fd 0%,#e7eff9 46%,#dbe8f6 100%);
  background-attachment:fixed;
  font-family:'PingFang SC','Microsoft YaHei',system-ui,sans-serif;
  -webkit-text-size-adjust:100%;
}
/* 共享主题的 .stars 是米白/绿的固定底图层，会盖住 body 背景 → 这里换成同款冰蓝 */
.stars{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1100px 560px at 50% -8%, rgba(255,255,255,.95), transparent 62%),
    radial-gradient(900px 480px at 12% 88%, rgba(147,197,253,.22), transparent 58%),
    radial-gradient(900px 480px at 88% 92%, rgba(160,150,250,.16), transparent 58%),
    linear-gradient(180deg,#f2f7fd 0%,#e7eff9 46%,#dbe8f6 100%);
}
.wrap{max-width:820px;margin:26px auto 0;}

/* ---------------- 顶栏 ---------------- */
.top-bar{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;
  padding:0 2px;max-width:820px;margin:0 auto;
  background:transparent;border-bottom:none;
}
.link-back{
  grid-column:1;justify-self:start;
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
  color:var(--sub);text-decoration:none;font-size:14px;
}
.link-back:hover{color:var(--bright-deep);}
.page-title{
  grid-column:2;margin:0;white-space:nowrap;
  font-size:20px;font-weight:700;letter-spacing:2px;color:var(--title);
  text-shadow:0 2px 10px rgba(47,124,232,.18);
}

/* ---------------- 通用按钮 ---------------- */
.btn{
  border:1px solid rgba(120,150,200,.42);border-radius:999px;padding:11px 26px;
  font-size:14.5px;font-weight:700;font-family:inherit;cursor:pointer;
  background:#fff;color:var(--bright-deep);
  transition:transform .12s,box-shadow .15s,background .15s,border-color .15s;
}
.btn.primary{
  background:linear-gradient(90deg,#3fb9f9 0%,#5c8cf8 55%,#8d7cf9 100%);
  color:#fff;border:none;
  box-shadow:0 5px 18px rgba(92,140,248,.34),inset 0 1px 0 rgba(255,255,255,.5);
}
/* 权重需压过共享主题的 .btn.primary:hover:not(:disabled)（绿色 hover） */
.btn.primary:hover:not(:disabled){
  background:linear-gradient(90deg,#5cc6fb 0%,#7ba2fa 55%,#a291fb 100%);
  box-shadow:0 8px 22px rgba(92,140,248,.44);transform:translateY(-1px);
}
.btn.ghost:hover{background:#f4f8ff;border-color:rgba(96,150,240,.6);}
.btn:active{transform:translateY(0);}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none;}
.btn.text{border:none;background:transparent;color:var(--sub);padding:10px 4px;}

/* ---------------- 视图一：入口 ---------------- */
.subject-grid{display:grid;grid-template-columns:1fr;gap:12px;}
.subject-card{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;
  width:100%;text-align:left;cursor:pointer;font-family:inherit;
  padding:18px 18px;border-radius:22px;
  border:1.5px solid var(--panel-line);
  background:var(--panel);
  box-shadow:0 8px 28px rgba(96,125,170,.18);
  backdrop-filter:blur(8px);
  transition:transform .16s,box-shadow .18s,border-color .18s;
}
.subject-card:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 32px rgba(96,125,170,.28);
  border-color:rgba(96,150,240,.6);
}
.subject-card:active{transform:translateY(0);}
.subject-icon{
  display:grid;place-items:center;width:52px;height:52px;border-radius:16px;
  color:#fff;font-size:22px;font-weight:800;letter-spacing:0;
  box-shadow:0 6px 16px rgba(47,124,232,.28);
}
.icon-bazi{background:linear-gradient(145deg,#6fa8f5,#2f7ce8);}
.icon-fs{background:linear-gradient(145deg,#5ec8d8,#2f8fe8);}
.icon-zr{background:linear-gradient(145deg,#f0b45e,#e8894a);}
.icon-zw{background:linear-gradient(145deg,#b98cf0,#7b4fd0);box-shadow:0 6px 16px rgba(123,79,208,.28);}
.subject-body{display:flex;flex-direction:column;gap:5px;min-width:0;}
.subject-body b{font-size:17px;color:var(--title);letter-spacing:.5px;}
.subject-body em{
  font-style:normal;font-size:12.5px;line-height:1.6;color:var(--sub);
}
.subject-go{
  flex:0 0 auto;font-size:12.5px;font-weight:700;color:var(--bright-deep);
  padding:6px 12px;border-radius:999px;background:var(--tint);white-space:nowrap;
}

/* 模式切换 */
.mode-row{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:16px;padding:14px 16px;border-radius:18px;
  border:1.5px solid var(--panel-line);background:rgba(255,255,255,.58);
  box-shadow:0 6px 20px rgba(96,125,170,.12);
  backdrop-filter:blur(6px);
}
.mode-label{display:flex;flex-direction:column;gap:3px;min-width:0;}
.mode-label b{font-size:13.5px;color:var(--title);}
.mode-label span{font-size:12px;color:var(--sub);line-height:1.5;}
.seg{
  display:inline-flex;gap:4px;padding:4px;border-radius:999px;
  background:rgba(233,241,252,.9);border:1.5px solid rgba(120,150,200,.32);
}
.seg button{
  border:none;background:transparent;font-family:inherit;font-size:13px;font-weight:700;
  color:var(--sub);padding:8px 20px;border-radius:999px;cursor:pointer;transition:.15s;white-space:nowrap;
}
.seg button.active{
  background:#fff;color:var(--bright-deep);
  box-shadow:0 2px 8px rgba(92,140,248,.22);
}

/* ---------------- 视图二：答题 ---------------- */
.quiz-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 2px 10px;}
.quiz-bar-left{display:flex;align-items:center;gap:8px;min-width:0;}
.quiz-subject{font-size:14px;font-weight:800;color:var(--title);letter-spacing:.5px;}
.quiz-mode{
  font-size:11.5px;font-weight:700;color:var(--bright-deep);
  padding:3px 9px;border-radius:999px;background:var(--tint);
}
.quiz-bar-right{display:flex;align-items:center;gap:10px;}
.quiz-clock{
  font-size:14px;font-weight:700;color:var(--bright-deep);
  font-variant-numeric:tabular-nums;letter-spacing:.5px;
}
.quiz-clock.warn{color:var(--no);}
.quiz-quit{
  border:1px solid rgba(120,150,200,.4);background:rgba(255,255,255,.8);color:var(--sub);
  font-family:inherit;font-size:12px;font-weight:700;padding:5px 12px;border-radius:999px;cursor:pointer;
}
.quiz-quit:hover{color:var(--bright-deep);border-color:rgba(96,150,240,.6);}

.progress{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.progress-track{flex:1 1 auto;height:8px;border-radius:999px;background:rgba(120,150,200,.2);overflow:hidden;}
.progress-track i{
  display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,#5cc6fb,#5c8cf8 60%,#8d7cf9);
  transition:width .25s ease;
}
.progress-text{flex:0 0 auto;font-size:12.5px;color:var(--sub);font-variant-numeric:tabular-nums;}
.progress-text b{color:var(--bright-deep);font-size:15px;}

.q-card{
  background:var(--panel);border:1.5px solid var(--panel-line);border-radius:22px;
  padding:20px 20px 18px;
  box-shadow:0 8px 28px rgba(96,125,170,.18);
  backdrop-filter:blur(8px);
}
.q-head{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap;}
.q-topic{
  font-size:12px;font-weight:700;color:var(--bright-deep);
  padding:3px 10px;border-radius:999px;background:var(--tint);
}
.q-diff{font-size:11.5px;color:var(--sub);padding:3px 9px;border-radius:999px;border:1px solid rgba(120,150,200,.38);}
.q-diff.d2{color:#1f5fd6;border-color:rgba(47,124,232,.45);}
.q-diff.d3{color:#b9503f;border-color:rgba(226,87,74,.4);}
.q-multi{
  font-size:11.5px;font-weight:700;color:#8a5cd8;
  padding:3px 9px;border-radius:999px;background:rgba(140,110,240,.12);
  border:1px solid rgba(140,110,240,.3);
}
.q-stem{
  margin:0 0 16px;font-size:16px;line-height:1.85;color:#22355a;letter-spacing:.2px;
  text-wrap:pretty;
}

.q-options{display:flex;flex-direction:column;gap:9px;}
.opt{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:flex-start;gap:11px;
  width:100%;text-align:left;font-family:inherit;cursor:pointer;
  padding:13px 14px;border-radius:14px;
  border:1.5px solid rgba(120,150,200,.32);background:rgba(255,255,255,.86);
  color:#22355a;font-size:14.5px;line-height:1.7;
  transition:border-color .15s,background .15s,box-shadow .15s;
}
.opt:hover{border-color:rgba(96,150,240,.6);background:#f6faff;}
.opt-key{
  flex:0 0 auto;display:grid;place-items:center;width:25px;height:25px;border-radius:8px;
  background:rgba(47,124,232,.10);color:var(--bright-deep);
  font-size:12.5px;font-weight:800;line-height:1;
  transition:.15s;
}
.opt-text{min-width:0;word-break:break-word;}
.opt.picked{border-color:var(--bright);background:#f0f6ff;box-shadow:0 0 0 3px rgba(47,124,232,.14);}
.opt.picked .opt-key{background:var(--bright);color:#fff;}
.opt.correct{border-color:var(--ok-line);background:var(--ok-bg);box-shadow:none;}
.opt.correct .opt-key{background:var(--ok);color:#fff;}
.opt.wrong{border-color:var(--no-line);background:var(--no-bg);}
.opt.wrong .opt-key{background:var(--no);color:#fff;}
.opt.locked{cursor:default;}
.opt.locked:not(.correct):not(.wrong):hover{border-color:rgba(120,150,200,.32);background:rgba(255,255,255,.86);}
.opt.locked.correct:hover{border-color:var(--ok-line);background:var(--ok-bg);}
.opt.locked.wrong:hover{border-color:var(--no-line);background:var(--no-bg);}
.opt-mark{justify-self:end;font-size:12px;font-weight:800;line-height:1;align-self:center;}
.opt.correct .opt-mark{color:var(--ok);}
.opt.wrong .opt-mark{color:var(--no);}

.q-feedback{
  margin-top:15px;padding:13px 14px;border-radius:14px;
  border:1.5px solid rgba(120,150,200,.3);background:rgba(255,255,255,.72);
}
.q-feedback.is-no{border-color:var(--no-line);background:var(--no-bg);}
.q-feedback.is-ok{border-color:var(--ok-line);background:var(--ok-bg);}
.fb-verdict{margin:0 0 6px;font-size:13.5px;font-weight:800;}
.fb-verdict.ok{color:var(--ok);}
.fb-verdict.no{color:var(--no);}
.fb-text{margin:0;font-size:13px;line-height:1.9;color:#2c3e5d;text-wrap:pretty;}
.fb-src{margin:8px 0 0;font-size:11.5px;color:rgba(44,62,93,.5);}

.q-actions{display:flex;gap:10px;margin-top:16px;}
.q-actions .btn{flex:1 1 0;min-width:0;text-align:center;}

/* ---------------- 视图三：成绩 ---------------- */
.result-card{
  display:grid;grid-template-columns:auto 1fr;align-items:center;gap:20px;
  padding:20px;border-radius:22px;border:1.5px solid var(--panel-line);
  background:var(--panel);
  box-shadow:0 8px 28px rgba(96,125,170,.18);
  backdrop-filter:blur(8px);
}
.score-ring{position:relative;width:112px;height:112px;flex:0 0 auto;}
.score-ring svg{width:100%;height:100%;transform:rotate(-90deg);}
.score-ring .ring-bg{fill:none;stroke:rgba(120,150,200,.22);stroke-width:9;}
.score-ring .ring-fg{
  fill:none;stroke:var(--bright);stroke-width:9;stroke-linecap:round;
  stroke-dasharray:326.7;stroke-dashoffset:326.7;
  transition:stroke-dashoffset .7s cubic-bezier(.22,.8,.3,1);
}
.score-center{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1px;
}
.score-center b{font-size:32px;line-height:1;color:var(--bright-deep);font-variant-numeric:tabular-nums;}
.score-center span{font-size:11.5px;color:var(--sub);}
.result-main{min-width:0;}
.result-main h2{margin:0 0 4px;font-size:18px;color:var(--title);}
.result-sub{margin:0 0 10px;font-size:12.5px;color:var(--sub);line-height:1.6;}
/* 知识点命中：等宽网格排列，名称左定、分数右定，多行之间也能对齐 */
.topic-chips{
  display:grid;gap:7px;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  margin-top:2px;
}
.topic-chip{
  display:flex;align-items:center;justify-content:space-between;gap:7px;
  min-width:0;padding:5px 8px 5px 10px;border-radius:10px;
  border:1px solid rgba(120,150,200,.32);background:rgba(255,255,255,.86);
  color:#3d5478;font-size:11.5px;line-height:1.5;
  box-shadow:0 1px 2px rgba(96,125,170,.07);
  transition:border-color .15s,box-shadow .15s,background .15s;
}
.topic-chip .tc-name{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.topic-chip .tc-score{
  flex:0 0 auto;min-width:32px;padding:1px 4px;border-radius:999px;
  text-align:center;font-size:10.5px;font-weight:800;letter-spacing:.2px;
  font-variant-numeric:tabular-nums;
  color:var(--bright-deep);background:rgba(47,124,232,.10);
}
.topic-chip.full{border-color:rgba(47,168,100,.34);background:rgba(255,255,255,.9);color:#2f6b4e;}
.topic-chip.full .tc-score{color:#fff;background:var(--ok);}
.topic-chip.zero{border-color:var(--no-line);background:var(--no-bg);color:#a63f31;}
.topic-chip.zero .tc-score{color:#fff;background:var(--no);}
@media (hover:hover){
  .topic-chip:hover{border-color:var(--tint-line);box-shadow:0 3px 10px rgba(96,125,170,.14);}
}

.result-actions{display:flex;gap:10px;margin-top:14px;}
.result-actions .btn{flex:1 1 0;text-align:center;}

.review-title{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  margin:22px 2px 10px;font-size:15px;color:var(--bright-deep);
}
.review-title span{font-size:11.5px;font-weight:400;color:var(--sub);}
.review-list{display:flex;flex-direction:column;gap:8px;}
.review-item{
  border:1.5px solid var(--panel-line);border-radius:16px;background:rgba(255,255,255,.7);
  overflow:hidden;box-shadow:0 4px 16px rgba(96,125,170,.10);
  backdrop-filter:blur(6px);
}
.review-head{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;
  width:100%;text-align:left;font-family:inherit;cursor:pointer;
  padding:12px 14px;border:none;background:transparent;color:inherit;
}
.review-no{
  display:grid;place-items:center;width:24px;height:24px;border-radius:8px;
  font-size:12px;font-weight:800;color:#fff;background:#9db0cc;
}
.review-item.ok .review-no{background:var(--ok);}
.review-item.no .review-no{background:var(--no);}
.review-stem{
  min-width:0;font-size:13.5px;line-height:1.6;color:#22355a;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.review-tag{font-size:11.5px;font-weight:700;color:var(--sub);white-space:nowrap;}
.review-item.ok .review-tag{color:var(--ok);}
.review-item.no .review-tag{color:var(--no);}
.review-body{display:none;padding:0 14px 14px;border-top:1px dashed rgba(120,150,200,.3);}
.review-item.open .review-body{display:block;}
.review-item.open .review-stem{white-space:normal;}
.review-body .q-stem{margin:12px 0 10px;font-size:14px;}
.review-body .q-options{gap:7px;}
.review-body .opt{padding:10px 12px;font-size:13.5px;cursor:default;pointer-events:none;}
.review-exp{
  margin:12px 0 0;padding:11px 12px;border-radius:12px;
  background:rgba(240,246,255,.9);border:1.5px solid rgba(120,150,200,.28);
  font-size:12.5px;line-height:1.85;color:#2c3e5d;
}
.review-exp b{color:var(--bright-deep);}

/* ---------------- 提示 / 遮罩 ---------------- */
.toast{
  position:fixed;left:50%;bottom:34px;transform:translateX(-50%);
  max-width:88vw;padding:11px 18px;border-radius:999px;
  background:rgba(35,53,90,.94);color:#fff;font-size:13px;line-height:1.5;
  box-shadow:0 8px 24px rgba(30,50,90,.3);z-index:120;text-align:center;
}
.loading{
  position:fixed;inset:0;z-index:99;display:flex;flex-direction:column;gap:12px;
  align-items:center;justify-content:center;
  background:rgba(234,241,249,.78);backdrop-filter:blur(3px);
}
.loading .ring{
  width:34px;height:34px;border-radius:50%;border:3px solid rgba(47,124,232,.22);
  border-top-color:var(--bright);animation:spin .8s linear infinite;
}
.loading .load-tip{
  font-size:12.5px;color:rgba(44,62,93,.66);letter-spacing:.4px;font-variant-numeric:tabular-nums;
}
@keyframes spin{to{transform:rotate(360deg);}}

.foot{
  font-size:11.5px;color:rgba(44,62,93,.5);line-height:1.7;margin:22px 2px 0;text-align:center;
}

/* ---------------- 响应式 ---------------- */
@media (max-width:560px){
  body{padding-left:9px;padding-right:9px;padding-bottom:36px;}
  .wrap{margin-top:16px;}
  .top-bar{padding:0 2px;gap:6px;}
  .link-back{font-size:13px;}
  .page-title{font-size:16.5px;letter-spacing:1px;}
  .subject-card{padding:15px 14px;gap:11px;border-radius:18px;}
  .subject-icon{width:44px;height:44px;border-radius:13px;font-size:19px;}
  .subject-body b{font-size:15.5px;}
  .subject-body em{font-size:11.5px;}
  .subject-go{display:none;}
  .mode-row{flex-direction:column;align-items:stretch;gap:10px;padding:13px 14px;}
  .seg{width:100%;}
  .seg button{flex:1 1 0;padding:9px 0;text-align:center;}
  .q-card{padding:16px 14px 15px;border-radius:18px;}
  .q-stem{font-size:15px;line-height:1.8;}
  .opt{padding:12px 12px;font-size:14px;gap:9px;}
  .result-card{grid-template-columns:1fr;justify-items:stretch;text-align:center;gap:14px;padding:18px 14px;}
  .score-ring{width:100px;height:100px;justify-self:center;}
  .result-main{width:100%;}
  .topic-chips{grid-template-columns:repeat(auto-fill,minmax(146px,1fr));gap:6px;text-align:left;}
  .review-head{grid-template-columns:auto 1fr;gap:9px;}
  .review-tag{grid-column:2;justify-self:start;}
  .quiz-subject{font-size:13px;}
  .btn{padding:11px 18px;font-size:14px;}
}
