/* ==================================================================
   多旋翼题库 · 题库入口页
   独立样式，与 portal.css / 各子系统样式解耦
   设计约束：移动优先、大拇指友好点击区、无内联 onclick（主站 CSP）
   ================================================================== */
:root{
  --p:#3461b8; --p-d:#2a4f96; --p-l:#4a74c4; --p-soft:#eaf1ff;
  --ink:#18202e; --ink-2:#5b6673; --ink-3:#8b95a3;
  --line:#e6ebf2; --bg:#f4f6fa; --card:#fff;
  --ok:#15803d; --ok-soft:#e8f6ed;
  --wait:#92400e; --wait-soft:#fdf5e7;
  --r:16px; --r-sm:11px;
  --sat:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg); color:var(--ink); font-size:14px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:520px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;
  background:var(--bg);box-shadow:0 0 40px rgba(16,24,40,.06);}

/* ---------- 返回门户条 ---------- */
.portal-bar{display:flex;align-items:center;gap:6px;padding:9px 16px;background:#f1f6f8;
  color:var(--p-d);font-size:12.5px;font-weight:600;text-decoration:none;
  border-bottom:1px solid var(--line);}
.portal-bar:active{background:#e4eef0;}
.portal-bar .ar{font-size:16px;line-height:1;}

/* ---------- 头部 ---------- */
.hero{background:linear-gradient(150deg,var(--p-d) 0%,var(--p) 52%,var(--p-l) 100%);
  color:#fff;padding:22px 20px 20px;position:relative;overflow:hidden;}
.hero::after{content:'';position:absolute;right:-46px;top:-56px;width:180px;height:180px;
  border-radius:50%;background:rgba(255,255,255,.09);}
.hero-row{display:flex;align-items:center;gap:11px;position:relative;z-index:1;}
.logo{width:40px;height:40px;border-radius:11px;background:rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;flex:none;
  border:1px solid rgba(255,255,255,.24);}
.logo svg{width:23px;height:23px;stroke:#fff;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;}
.hero h1{margin:0;font-size:19px;font-weight:700;letter-spacing:.3px;}
.hero .sub{font-size:12px;opacity:.85;margin-top:2px;}

/* ---------- 身份条 ---------- */
.ident{margin:14px 16px 0;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:12px 14px;display:flex;align-items:center;gap:10px;}
.ident .ava{width:34px;height:34px;border-radius:50%;flex:none;display:flex;
  align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,var(--p),var(--p-l));}
.ident .ava.gray{background:#c3ccd8;}
.ident .nm{font-size:14px;font-weight:700;}
.ident .rl{font-size:11.5px;color:var(--ink-3);margin-top:1px;}
.ident .sp{flex:1;min-width:0;}
.ident .out{font-size:12px;color:var(--p);cursor:pointer;padding:6px 10px;border-radius:8px;flex:none;}
.ident .out:active{background:var(--p-soft);}

/* ---------- 题库卡片 ---------- */
.sec-t{font-size:12px;font-weight:700;color:var(--ink-3);letter-spacing:1.2px;
  margin:20px 18px 9px;}
.grid{display:flex;flex-direction:column;gap:12px;padding:0 16px;}
.bk{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:16px;cursor:pointer;position:relative;overflow:hidden;
  display:flex;gap:13px;align-items:flex-start;min-height:112px;
  flex-wrap:wrap;                 /* 实操卡展开时面板要能整行落下 */
  transition:transform .16s ease,box-shadow .16s ease;
}
.bk:active{transform:scale(.98);}
@media (hover:hover){ .bk:hover{box-shadow:0 6px 20px rgba(16,24,40,.09);} }
.bk-ico{width:48px;height:48px;border-radius:13px;flex:none;display:flex;
  align-items:center;justify-content:center;background:var(--p-soft);}
.bk-ico svg{width:26px;height:26px;fill:none;stroke:var(--p);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;}
.bk.qa .bk-ico{background:#eef7f1;}
.bk.qa .bk-ico svg{stroke:#2f7a52;}
.bk-body{flex:1;min-width:0;}
.bk-nm{font-size:16px;font-weight:700;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.bk-ds{font-size:11.5px;color:var(--ink-2);margin-top:4px;line-height:1.6;}
.bk-meta{margin-top:9px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.pill{font-size:10.5px;padding:2px 7px;border-radius:6px;font-weight:600;white-space:nowrap;}
.pill.n{background:#f1f4f8;color:var(--ink-2);font-variant-numeric:tabular-nums;}
.pill.ok{background:var(--ok-soft);color:var(--ok);}
.pill.no{background:var(--wait-soft);color:var(--wait);}
.pill.in{background:var(--p-soft);color:var(--p-d);}
.bk-live{margin-top:9px;font-size:11.5px;color:var(--ink-3);
  border-top:1px dashed var(--line);padding-top:8px;}
.bk-live b{color:var(--p-d);font-variant-numeric:tabular-nums;font-weight:700;}
.bk-go{position:absolute;right:13px;bottom:11px;color:#c3ccd8;font-size:17px;}

/* ---------- 建设中占位卡 / 实操进度展开卡（2026-09-15 加） ---------- */
.bk-nm .bk-suffix{font-weight:600;color:var(--ink-3);font-size:13px;}
.bk.soon{cursor:default;opacity:.72;}
.bk.soon:active{transform:none;}
.bk.soon .bk-ico{background:#f1f4f8;}
.bk.soon .bk-ico svg{stroke:#a9b3c0;}
.bk.exp.open{border-color:var(--p-l);box-shadow:0 6px 20px rgba(52,97,184,.10);}
.bk-go.tx{font-size:11px;color:var(--ink-3);bottom:13px;}
.bk-go.arw{font-size:12px;color:var(--p);bottom:13px;font-weight:600;}

.bk-panel{flex:1 0 100%;margin-top:12px;border-top:1px dashed var(--line);padding-top:11px;}
.bk-panel .pg-load,.bk-panel .pg-tip{font-size:12px;color:var(--ink-3);line-height:1.7;}
.bk-panel .pg-tip b{color:var(--p-d);}
.pg-t{font-size:11px;font-weight:700;color:var(--ink-3);letter-spacing:.6px;margin:6px 0 7px;}
.pg-t:first-child{margin-top:0;}
.pg-row{display:flex;align-items:center;gap:9px;margin-bottom:7px;}
.pg-nm{flex:0 0 92px;font-size:12px;color:var(--ink-2);}
.pg-bar{flex:1;height:6px;border-radius:4px;background:#eef1f6;overflow:hidden;}
.pg-bar i{display:block;height:100%;border-radius:4px;background:#c3ccd8;transition:width .3s ease;}
.pg-row.t .pg-bar i{background:#e0a33c;}      /* 训练中 */
.pg-row.m .pg-bar i{background:#2f9e5e;}      /* 已掌握 */
.pg-tx{flex:0 0 44px;text-align:right;font-size:11px;color:var(--ink-3);}
.pg-row.t .pg-tx{color:#92600e;}
.pg-row.m .pg-tx{color:var(--ok);font-weight:600;}
.pg-kv{display:flex;gap:8px;font-size:12px;margin-bottom:5px;}
.pg-kv .k{flex:0 0 56px;color:var(--ink-3);}
.pg-kv .v{flex:1;color:var(--ink);}
.pg-exam{background:var(--p-soft);border-radius:var(--r-sm);padding:9px 11px;margin-bottom:4px;}
.pg-exam-t{font-size:12.5px;font-weight:700;color:var(--p-d);display:flex;justify-content:space-between;
  align-items:baseline;gap:8px;}
.pg-exam-d{font-size:11.5px;font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums;}
.pg-exam .pg-kv .k{color:var(--ink-3);}
.pg-dl{margin-top:3px;font-size:11.5px;color:var(--p-d);font-weight:600;}
.pg-dl.ok{color:#15803d;}
.pg-dl.no{color:#b4453c;}
.pg-cmt{margin-top:8px;background:#fbfcfe;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:8px 10px;font-size:12px;color:var(--ink-2);line-height:1.7;}
.pg-cmt .k{display:block;font-size:11px;color:var(--ink-3);margin-bottom:2px;font-weight:700;}
.pg-ft{margin-top:9px;font-size:10.5px;color:var(--ink-3);}

/* ---------- 底部 ---------- */
.foot{margin-top:auto;padding:18px 16px calc(22px + var(--sat));text-align:center;
  color:var(--ink-3);font-size:11.5px;line-height:1.8;}
.foot b{color:var(--ink-2);font-weight:600;}

/* ---------- 骨架/提示 ---------- */
.sk{height:112px;border-radius:var(--r);background:linear-gradient(90deg,#eef1f6,#f6f8fb,#eef1f6);
  background-size:200% 100%;animation:sk 1.2s ease-in-out infinite;}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}
.err{margin:14px 16px 0;background:var(--wait-soft);border:1px solid #f0dcc0;border-radius:var(--r-sm);
  padding:10px 12px;font-size:12px;color:var(--wait);}

@media (max-width:360px){
  .bk{flex-direction:column;}
  .bk-go{top:13px;bottom:auto;}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation-duration:.01ms!important;}
}