/* =====================================================================
   职业技能等级认定模拟考试系统 — 样式表
   设计语言：渐变主视觉 + 白底悬浮卡 + 柔和多层阴影 + 统一线性图标
   ===================================================================== */

/* ---------- 自托管数字/显示字体（Sora，仅拉丁与数字，中文回退系统中文字体） ---------- */
@font-face{font-family:'Sora';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/sora-400.woff2') format('woff2');}
@font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/sora-600.woff2') format('woff2');}
@font-face{font-family:'Sora';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/sora-700.woff2') format('woff2');}
@font-face{font-family:'Sora';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/sora-800.woff2') format('woff2');}

/* ---------- 设计变量 ---------- */
:root{
  --grad:linear-gradient(135deg,#4257EC 0%,#2930A4 100%);
  --brand:#2F45D8;--brand2:#5B6FF0;--brand-ink:#1B2A9B;--brand-soft:#EBEEFE;
  --ok:#0EA472;--ok-soft:#E4F6EF;
  --bad:#E5484D;--bad-soft:#FDECEC;
  --warn:#DE8E07;--warn-soft:#FFF3DC;
  --ink:#0E1730;--ink2:#5A6478;--ink3:#98A2B3;
  --bg:#EDF0F7;--bg2:#F4F6FB;--card:#fff;--line:#E7EAF3;
  --r-lg:20px;--r-md:14px;--r-sm:10px;
  --sh-1:0 1px 2px rgba(16,24,40,.05),0 10px 24px -12px rgba(16,24,40,.14);
  --sh-2:0 18px 40px -18px rgba(24,36,120,.45);
  --font-display:'Sora',"PingFang SC","Microsoft YaHei",sans-serif;
  /* ---- 旧变量别名（兼容既有内联样式）---- */
  --primary:#2F45D8;--primary-dark:#1B2A9B;--primary-light:#EBEEFE;
  --success:#0EA472;--success-light:#E4F6EF;
  --danger:#E5484D;--danger-light:#FDECEC;
  --warn-light:#FFF3DC;
  --text:#0E1730;--text2:#5A6478;--muted:#98A2B3;--border:#E7EAF3;
  --radius:14px;--shadow:var(--sh-1);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;min-height:100%;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",sans-serif;
  background:
    radial-gradient(760px 420px at 8% -8%, #DDE4FF 0%, transparent 58%),
    radial-gradient(680px 460px at 96% 0%, #E3F3EE 0%, transparent 55%),
    var(--bg);
  color:var(--ink);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;background:none;color:inherit;}
a{color:var(--brand);text-decoration:none;}
svg{display:block;}
select,input,textarea{font-family:inherit;color:var(--ink);}
select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235A6478' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:34px !important;}

.hidden{display:none !important;}

/* ---------- 布局 ---------- */
.app{min-height:100vh;display:flex;flex-direction:column;}
.topbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);padding:10px 16px;display:flex;align-items:center;gap:10px;min-height:56px;}
.topbar .ttl{font-size:16px;font-weight:700;flex:1;text-align:center;letter-spacing:.02em;}
.topbar .back{position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:34px;height:34px;border-radius:11px;background:#F1F3F9;color:var(--ink2);
  display:flex;align-items:center;justify-content:center;font-size:0;}
.topbar .back svg{width:18px;height:18px;}
.content{flex:1;padding:18px 16px 24px;max-width:760px;width:100%;margin:0 auto;}
.card{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:18px;margin-bottom:16px;}
.sec-title{font-size:13px;font-weight:700;color:var(--ink2);letter-spacing:.05em;margin:0 0 12px;
  display:flex;align-items:center;gap:8px;}
.sec-title .tag{margin-left:auto;font-weight:600;}
.sub{color:var(--ink2);font-size:13.5px;}
.muted{color:var(--ink3);}

/* ---------- 按钮 ---------- */
.btn{display:flex;align-items:center;justify-content:center;gap:7px;height:48px;border-radius:var(--r-md);
  font-size:15.5px;font-weight:700;padding:0 18px;transition:transform .15s,box-shadow .15s,background .15s;}
.btn svg{width:18px;height:18px;flex-shrink:0;}
.btn:active{transform:scale(.985);}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 14px 26px -14px rgba(41,48,164,.8);}
.btn-primary:disabled{opacity:.85;box-shadow:none;}
.btn-block{width:100%;}
.btn-ghost{background:#F1F3F9;color:var(--ink2);}
.btn-ghost:active{background:#E7EAF3;}

.icon-btn{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  border:none;background:#F1F3F9;color:var(--ink2);}
.icon-btn svg{width:18px;height:18px;}
.icon-btn.glass{background:rgba(255,255,255,.18);color:#fff;border:1px solid rgba(255,255,255,.32);}

/* ---------- 表单 ---------- */
.field{margin-bottom:14px;}
.field label{display:block;font-size:12.5px;color:var(--ink3);margin-bottom:7px;font-weight:600;letter-spacing:.03em;}
.field input[type=text],.field input[type=password],.field input[type=number],.field select,.field textarea{
  width:100%;height:46px;border:1.5px solid var(--line);border-radius:12px;padding:0 12px;font-size:15px;background:#fff;}
.field textarea{height:auto;padding:10px 12px;line-height:1.7;resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft);}
.chips{display:flex;gap:8px;flex-wrap:wrap;}
.chip{padding:8px 14px;border-radius:20px;border:1px solid var(--line);font-size:14px;cursor:pointer;}
.chip.on{background:var(--brand);color:#fff;border-color:var(--brand);}

/* ---------- 首页 Hero ---------- */
.hero{background:var(--grad);position:relative;overflow:hidden;padding:0 0 58px;}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(300px 200px at 88% 4%, rgba(255,255,255,.28), transparent 62%),
             radial-gradient(280px 220px at 4% 100%, rgba(120,140,255,.5), transparent 60%);}
.hero-in{position:relative;z-index:2;max-width:760px;margin:0 auto;padding:22px 18px 0;}
.hero-top{display:flex;align-items:center;gap:12px;}
.logo{width:44px;height:44px;border-radius:14px;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.38);
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-family:var(--font-display);font-size:19px;flex-shrink:0;}
.hero-title{color:#fff;font-size:15px;font-weight:700;line-height:1.34;flex:1;}
.hero-title em{display:block;font-style:normal;font-weight:400;font-size:12px;opacity:.75;margin-top:2px;}
.hero-greet{color:#fff;margin:22px 2px 0;font-family:var(--font-display);font-size:23px;font-weight:800;letter-spacing:-.3px;}
.hero-greet span{display:block;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;
  font-size:13px;font-weight:400;opacity:.78;margin-top:6px;letter-spacing:0;}

/* 范围选择：白底悬浮卡，骑跨 hero 下边界 */
.home-content{margin-top:-40px;position:relative;z-index:5;}
.scope-cards{display:grid;grid-template-columns:1.25fr 1fr;gap:12px;margin-bottom:6px;}
.scope-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px;
  box-shadow:0 14px 26px -12px rgba(20,30,90,.38);}
.scope-card .k{font-size:11px;color:var(--ink3);font-weight:600;letter-spacing:.04em;display:block;margin-bottom:5px;}
.scope-card select{width:100%;height:24px;border:none;padding:0 22px 0 0 !important;font-size:15px;font-weight:700;
  background:transparent;background-position:right center;}
.scope-card select:focus{outline:none;box-shadow:none;}
.scope-tip{font-size:12.5px;color:var(--ink3);margin:10px 2px 0;line-height:1.7;}

/* ---------- 四宫格入口 ---------- */
.grid4{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:16px 0;}
.tile{background:var(--card);border-radius:18px;box-shadow:var(--sh-1);padding:15px 14px;position:relative;
  overflow:hidden;cursor:pointer;transition:transform .15s,box-shadow .15s;}
.tile:active{transform:scale(.98);}
.tile.primary{background:var(--grad);color:#fff;box-shadow:0 18px 32px -18px rgba(41,48,164,.8);}
.tile.primary::after{content:"";position:absolute;right:-28px;top:-28px;width:100px;height:100px;border-radius:50%;background:rgba(255,255,255,.14);}
.t-ico{width:42px;height:42px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  background:var(--brand-soft);color:var(--brand);margin-bottom:11px;position:relative;}
.t-ico svg{width:21px;height:21px;}
.tile.primary .t-ico{background:rgba(255,255,255,.2);color:#fff;}
.t-ico.warm{background:var(--warn-soft);color:var(--warn);}
.t-ico.green{background:var(--ok-soft);color:var(--ok);}
.t-ico.gray{background:#EEF0F6;color:var(--ink2);}
.t-name{font-size:15px;font-weight:700;position:relative;}
.t-sub{font-size:11.5px;color:var(--ink3);margin-top:4px;line-height:1.5;position:relative;}
.tile.primary .t-sub{color:rgba(255,255,255,.8);}
.t-badge{position:absolute;right:12px;top:12px;background:var(--warn-soft);color:var(--warn);
  font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;}
.tile.disabled{opacity:.5;filter:grayscale(.35);cursor:not-allowed;}
.tile.disabled:active{transform:none;}

/* ---------- 我的成绩 ---------- */
.stat4{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;}
.st{padding:6px 2px;text-align:center;position:relative;}
.st+.st::before{content:"";position:absolute;left:0;top:18%;height:64%;width:1px;background:var(--line);}
.st b{font-family:var(--font-display);font-size:23px;font-weight:800;color:var(--brand);display:block;line-height:1.25;}
.st.hi b{color:var(--ok);}
.st span{font-size:11px;color:var(--ink3);}

/* ---------- 题库统计 ---------- */
.bar{height:12px;border-radius:8px;overflow:hidden;display:flex;gap:2px;margin:2px 0 14px;background:#EDF0F7;}
.bar i{display:block;height:100%;border-radius:4px;}
.legend{display:flex;flex-wrap:wrap;gap:12px 18px;font-size:12.5px;color:var(--ink2);}
.legend em{width:9px;height:9px;border-radius:3px;display:inline-block;margin-right:6px;vertical-align:1px;}
.legend b{color:var(--ink);font-family:var(--font-display);font-weight:700;}
.legend .sep{margin-left:auto;color:var(--ink3);}

/* ---------- 页脚 ---------- */
.footnote{text-align:center;color:var(--ink3);font-size:12px;padding:8px 16px 24px;line-height:2;}
.footnote a{color:inherit;text-decoration:none;white-space:nowrap;}

/* ---------- 答题进度 ---------- */
.progress{font-size:13px;color:var(--ink2);text-align:center;margin-bottom:9px;font-weight:700;letter-spacing:.06em;}
.pbar{height:6px;border-radius:4px;background:#E4E8F3;overflow:hidden;margin:0 0 16px;}
.pbar-fill{height:100%;width:0;border-radius:4px;background:linear-gradient(90deg,var(--brand2),var(--brand));transition:width .25s;}

/* ---------- 题目卡 ---------- */
.q-card{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:18px;margin-bottom:16px;}
.q-head{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:15px;}
.q-idx{font-family:var(--font-display);font-weight:800;color:var(--brand);font-size:15px;}
.q-type{font-size:11px;font-weight:700;padding:4px 9px;border-radius:8px;background:var(--brand-soft);color:var(--brand-ink);flex-shrink:0;}
.tag{font-size:11px;font-weight:600;padding:4px 9px;border-radius:8px;background:#F1F3F9;color:var(--ink2);}
.q-img{display:flex;flex-direction:column;gap:10px;margin:12px 0;min-width:0;}
.q-img img{display:block;margin:0 auto;max-width:100%;width:auto;height:auto;max-height:60px;object-fit:contain;
  border-radius:10px;border:1px solid var(--line);cursor:zoom-in;background:#fff;}
.opts{margin-top:14px;display:flex;flex-direction:column;gap:9px;}
.opt{display:flex;align-items:center;gap:11px;border:1.5px solid var(--line);border-radius:var(--r-md);
  padding:12px 13px;cursor:pointer;transition:border-color .15s,background .15s;font-size:15px;line-height:1.6;}
.opt .key{width:27px;height:27px;border-radius:9px;background:#F1F3F9;color:var(--ink2);display:flex;
  align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0;
  font-family:var(--font-display);transition:background .15s,color .15s;}
.opt.sel{border-color:var(--brand);background:var(--brand-soft);}
.opt.sel .key{background:var(--brand);color:#fff;}
.opt.ok{border-color:var(--ok);background:var(--ok-soft);}
.opt.ok .key{background:var(--ok);color:#fff;}
.opt.bad{border-color:var(--bad);background:var(--bad-soft);}
.opt.bad .key{background:var(--bad);color:#fff;}
.opt img.opt-img{display:block;max-width:100%;height:auto;max-height:60px;object-fit:contain;
  border-radius:8px;border:1px solid var(--line);flex-shrink:1;min-width:0;background:#fff;}
.explain{margin-top:14px;padding:13px;border-radius:var(--r-md);background:#F7F8FC;border:1px solid var(--line);
  font-size:13.5px;color:var(--ink2);line-height:1.75;}
.explain b{color:var(--ink);}
.explain.ok{background:var(--ok-soft);border-color:#BFE8D9;}
.explain.ok b{color:var(--ok);}
.explain.bad{background:var(--bad-soft);border-color:#F6C9CB;}
.explain.bad b{color:var(--bad);}

/* ---------- 考试头部 / 倒计时 ---------- */
.timer{display:flex;align-items:center;gap:6px;background:var(--brand-soft);color:var(--brand-ink);
  font-family:var(--font-display);font-weight:800;font-size:14px;padding:7px 11px;border-radius:11px;
  flex-shrink:0;white-space:nowrap;}
.timer svg{width:15px;height:15px;flex-shrink:0;}
.timer.danger{background:var(--bad);color:#fff;}
.exam-prog{margin-top:12px;}
.exam-prog .m{display:flex;justify-content:space-between;font-size:12px;color:var(--ink2);font-weight:600;margin-bottom:7px;}
.exam-prog .m b{color:var(--brand);font-family:var(--font-display);}

/* ---------- 弹层（答题卡 / 成绩） ---------- */
.sheet-mask{position:fixed;inset:0;background:rgba(10,14,28,.5);backdrop-filter:blur(2px);z-index:1000;
  display:flex;align-items:center;justify-content:center;padding:16px;}
.sheet{background:#fff;border-radius:22px;width:min(520px,100%);max-height:86vh;display:flex;flex-direction:column;
  box-shadow:0 30px 60px -20px rgba(10,14,28,.6);}
.sheet-h{display:flex;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line);}
.sheet-h b{font-size:16px;font-weight:700;}
.sheet-h .x{margin-left:auto;width:32px;height:32px;border-radius:10px;background:#F1F3F9;color:var(--ink2);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.sheet-h .x svg{width:14px;height:14px;}
.sheet-b{padding:16px 18px;overflow:auto;}
.sheet-f{display:flex;gap:10px;padding:14px 18px;border-top:1px solid var(--line);}
.sheet-f .btn{height:46px;flex:1;}
.dotgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:9px;}
.dot{height:44px;border-radius:12px;border:1.5px solid var(--line);background:#fff;color:var(--ink3);
  font-weight:700;font-family:var(--font-display);font-size:14px;display:flex;align-items:center;justify-content:center;
  transition:.15s;}
.dot.done{background:var(--brand);border-color:var(--brand);color:#fff;}
.dot.cur{border-color:var(--brand);color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft);}
.legend2{display:flex;flex-wrap:wrap;gap:14px;font-size:12px;color:var(--ink2);margin-bottom:14px;align-items:center;}
.legend2 em{width:13px;height:13px;border-radius:4px;display:inline-block;margin-right:6px;vertical-align:-2px;
  border:1.5px solid var(--line);}
.legend2 .d em{background:var(--brand);border-color:var(--brand);}
.sheet-stat{font-size:13px;color:var(--ink2);margin-bottom:14px;}
.sheet-stat b{font-family:var(--font-display);}
.sheet-stat .a{color:var(--brand);}
.sheet-stat .u{color:var(--bad);}

/* 成绩弹窗 */
.result-card{background:#fff;border-radius:24px;width:min(360px,100%);padding:26px 22px 20px;text-align:center;
  box-shadow:0 30px 60px -20px rgba(10,14,28,.6);position:relative;overflow:hidden;}
.result-card::before{content:"";position:absolute;top:-72px;left:50%;transform:translateX(-50%);
  width:230px;height:230px;border-radius:50%;background:radial-gradient(circle,#E9EDFF,transparent 68%);}
.result-card .cap{position:relative;font-size:13px;font-weight:700;color:var(--ink2);letter-spacing:.08em;}
.ring{width:150px;height:150px;margin:18px auto 4px;border-radius:50%;position:relative;
  display:flex;align-items:center;justify-content:center;
  background:conic-gradient(var(--ok) 0% 0%, #E7EAF3 0% 100%);}
.ring::before{content:"";position:absolute;inset:11px;border-radius:50%;background:#fff;}
.ring b{position:relative;font-family:var(--font-display);font-size:42px;font-weight:800;line-height:1;}
.ring b i{font-size:14px;font-style:normal;font-weight:700;color:var(--ink3);margin-left:2px;}
.result-note{font-size:12.5px;font-weight:700;margin-top:6px;position:relative;}
.result-meta{display:flex;justify-content:center;gap:24px;margin:16px 0 20px;position:relative;}
.result-meta div{font-size:11.5px;color:var(--ink3);}
.result-meta b{display:block;font-family:var(--font-display);font-size:18px;color:var(--ink);margin-bottom:2px;}
.result-meta b.a{color:var(--brand);}
.result-meta b.u{color:var(--bad);}
.result-btns{display:flex;gap:10px;position:relative;}
.result-btns .btn{height:46px;flex:1;}

/* ---------- 设置：分组行 ---------- */
.st-row{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);}
.st-row:last-child{border-bottom:none;}
.st-row .ic{width:38px;height:38px;border-radius:12px;background:var(--brand-soft);color:var(--brand);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.st-row .ic svg{width:18px;height:18px;}
.st-row .tx{flex:1;min-width:0;}
.st-row .tx b{font-size:14.5px;font-weight:600;display:block;}
.st-row .tx span{font-size:11.5px;color:var(--ink3);}
.st-row .val{font-size:13px;color:var(--ink2);font-weight:700;font-family:var(--font-display);}

/* ---------- 上传拖放区 ---------- */
.drop{border:1.6px dashed #C9D2EA;border-radius:16px;padding:22px 18px;text-align:center;
  background:#F8FAFF;cursor:pointer;transition:.15s;color:var(--ink2);}
.drop:hover,.drop.on{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-ink);}
.drop .d-ico{width:46px;height:46px;border-radius:14px;background:var(--brand-soft);color:var(--brand);
  display:flex;align-items:center;justify-content:center;margin:0 auto 11px;}
.drop .d-ico svg{width:22px;height:22px;}
.drop code{background:#EEF1F8;padding:1px 6px;border-radius:5px;font-size:12px;}
.drop input[type=file]{display:none;}

/* ---------- 题库列表卡片 ---------- */
.qa{border:1px solid var(--line);border-radius:16px;padding:14px;margin-bottom:10px;background:#fff;}
.qa .top{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:9px;}
.mini-opt{display:flex;gap:8px;padding:4px 0;align-items:flex-start;font-size:14px;color:var(--ink2);}
.mini-opt i{font-style:normal;font-weight:700;color:var(--brand);width:20px;flex-shrink:0;font-family:var(--font-display);}
.pill{font-size:11px;font-weight:700;padding:4px 9px;border-radius:20px;background:var(--brand-soft);color:var(--brand-ink);}
.pill.g{background:var(--ok-soft);color:var(--ok);}
.pill.r{background:var(--bad-soft);color:var(--bad);}
.pill.w{background:var(--warn-soft);color:var(--warn);}
.pill.n{background:#F1F3F9;color:var(--ink2);}

/* ---------- 提示条 / 消息 ---------- */
.warn{background:var(--warn-soft);color:var(--warn);border-radius:12px;padding:12px 14px;font-size:13px;line-height:1.7;}
.msg{font-weight:700;font-size:14.5px;line-height:1.7;}
.msg.ok{color:var(--ok);}
.msg.err{color:var(--bad);}
.resultgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-top:4px;}
.rs{text-align:center;background:transparent;border-radius:10px;padding:8px 4px;position:relative;}
.rs+.rs::before{content:"";position:absolute;left:0;top:18%;height:64%;width:1px;background:var(--line);}
.rs .n{font-size:23px;font-weight:800;font-family:var(--font-display);color:var(--brand);line-height:1.25;}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;}
.stat{background:#F8FAFF;border-radius:14px;padding:14px;text-align:center;}
.stat .num{font-size:24px;font-weight:800;font-family:var(--font-display);color:var(--brand);}
.stat .lbl{font-size:12.5px;color:var(--ink3);margin-top:2px;}

@media (max-width:480px){
  .hero-greet{font-size:21px;}
  .st b,.rs .n{font-size:21px;}
}