/* ============================================================
   防雷网 - 题库下载模块样式 (dl) + 弹窗 + 预览 + 会员中心下载记录
   依赖: fanglei.css 设计变量 (--primary 等)
   ============================================================ */
:root{
  --dl-primary:#0F52BA;
  --dl-primary-d:#0a3d8f;
  --dl-primary-l:#eaf1fb;
  --dl-accent:#e6912c;
  --dl-green:#1a9e57;
  --dl-red:#e0463e;
  --dl-text:#2a3340;
  --dl-gray:#6b7785;
  --dl-border:#e6ebf1;
  --dl-bg:#f5f7fa;
}
.dl-layout{ display:flex; gap:24px; align-items:flex-start; padding-top:18px; padding-bottom:30px; }
.dl-main{ flex:1; min-width:0; }
.dl-side{ width:300px; flex:0 0 300px; }

/* ---------- 头部 ---------- */
.dl-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; margin-bottom:16px; }
.dl-title{ font-size:24px; font-weight:700; color:var(--dl-primary); margin:0 0 6px; }
.dl-title i{ margin-right:8px; }
.dl-sub{ margin:0; color:var(--dl-gray); font-size:13px; max-width:640px; line-height:1.6; }
.dl-head-stats{ display:flex; gap:10px; }
.dl-stat{ background:#fff; border:1px solid var(--dl-border); border-radius:10px; padding:10px 16px; text-align:center; min-width:78px; }
.dl-stat b{ display:block; font-size:20px; color:var(--dl-primary); line-height:1.1; }
.dl-stat span{ font-size:12px; color:var(--dl-gray); }

/* ---------- 提示横幅 ---------- */
.dl-banner{ display:flex; gap:10px; align-items:flex-start; background:linear-gradient(90deg,#eaf1fb,#f3f8ff);
  border:1px solid #cfe0f7; border-left:4px solid var(--dl-primary); border-radius:8px; padding:12px 16px; margin-bottom:16px; font-size:13px; color:#33445a; }
.dl-banner i{ color:var(--dl-primary); margin-top:2px; }
.dl-banner b{ color:var(--dl-primary); }

/* ---------- 筛选栏 ---------- */
.dl-filter{ display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; background:#fff; border:1px solid var(--dl-border);
  border-radius:10px; padding:14px 16px; margin-bottom:18px; }
.dl-filter-item{ display:flex; flex-direction:column; gap:5px; }
.dl-filter-item label{ font-size:12px; color:var(--dl-gray); font-weight:600; }
.dl-filter-item label i{ margin-right:4px; color:var(--dl-primary); }
.dl-filter select, .dl-filter input[type=text]{
  height:36px; border:1px solid var(--dl-border); border-radius:7px; padding:0 10px; font-size:13px; color:var(--dl-text);
  background:#fff; min-width:120px; outline:none; transition:border-color .15s; }
.dl-filter select:focus, .dl-filter input[type=text]:focus{ border-color:var(--dl-primary); }
.dl-filter-kw{ flex:1; min-width:200px; }
.dl-filter-kw{ position:relative; }
.dl-filter-kw input{ width:100%; padding-right:42px; }
.dl-filter-kw button{ position:absolute; right:0; top:0; height:36px; width:40px; border:none; background:var(--dl-primary);
  color:#fff; border-radius:0 7px 7px 0; cursor:pointer; }
.dl-filter-kw button:hover{ background:var(--dl-primary-d); }

/* ---------- 卡片网格 ---------- */
.dl-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.dl-card{ background:#fff; border:1px solid var(--dl-border); border-radius:12px; overflow:hidden; display:flex; flex-direction:column;
  transition:transform .18s, box-shadow .18s; }
.dl-card:hover{ transform:translateY(-3px); box-shadow:0 10px 26px rgba(15,82,186,.12); }
.dl-cover{ position:relative; height:140px; background:linear-gradient(135deg,var(--dl-primary-d),var(--dl-primary) 60%,#1a6fd8);
  display:flex; align-items:center; justify-content:center; color:#fff; }
.dl-cover.ph i{ font-size:42px; opacity:.92; }
.dl-cover.ph span{ position:absolute; bottom:10px; right:12px; font-size:12px; font-weight:700; letter-spacing:1px; opacity:.9; }
.dl-cover img{ width:100%; height:100%; object-fit:cover; }
.dl-cover-type{ position:absolute; top:10px; left:10px; background:rgba(255,255,255,.22); backdrop-filter:blur(2px);
  color:#fff; font-size:11px; font-weight:600; padding:2px 8px; border-radius:20px; }
.dl-card-body{ padding:14px; display:flex; flex-direction:column; flex:1; }
.dl-name{ font-size:15px; font-weight:700; color:var(--dl-text); margin:0 0 8px; line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:42px; }
.dl-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.dl-tag{ font-size:11px; font-weight:700; padding:2px 8px; border-radius:20px; }
.dl-tag.free{ background:#e6f7ee; color:var(--dl-green); }
.dl-tag.vip{ background:#fff3e3; color:var(--dl-accent); }
.dl-fmt{ font-size:11px; font-weight:700; padding:2px 8px; border-radius:5px; }
.dl-fmt.pdf{ background:#fdecec; color:#d83a3a; }
.dl-fmt.word{ background:#e9f1fb; color:#2b6cd4; }
.dl-q{ font-size:11px; color:var(--dl-gray); padding:2px 8px; background:var(--dl-bg); border-radius:5px; }
.dl-intro{ font-size:12.5px; color:var(--dl-gray); line-height:1.6; margin:0 0 10px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:38px; }
.dl-meta{ display:flex; justify-content:space-between; font-size:12px; color:var(--dl-gray); margin-bottom:12px; }
.dl-meta i{ margin-right:3px; }
.dl-dl-count{ color:var(--dl-gray); }
.dl-dl-count b{ color:var(--dl-primary); font-size:14px; }
.dl-actions{ display:flex; gap:8px; margin-top:auto; }
.dl-btn{ flex:1; height:38px; border-radius:8px; font-size:13px; font-weight:600; border:none; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:6px; text-decoration:none; transition:background .15s,opacity .15s; }
.dl-btn.primary{ background:var(--dl-primary); color:#fff; }
.dl-btn.primary:hover{ background:var(--dl-primary-d); }
.dl-btn.ghost{ background:#fff; color:var(--dl-primary); border:1px solid var(--dl-primary); }
.dl-btn.ghost:hover{ background:var(--dl-primary-l); }
.dl-btn.locked{ background:#c2cad4; color:#fff; cursor:not-allowed; }
.dl-btn:disabled{ opacity:.7; cursor:wait; }

/* ---------- 分页 ---------- */
.dl-pager{ display:flex; justify-content:center; gap:6px; margin-top:26px; flex-wrap:wrap; }
.dl-pager a{ min-width:36px; height:36px; padding:0 10px; display:inline-flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid var(--dl-border); border-radius:8px; color:var(--dl-text); font-size:13px; text-decoration:none; }
.dl-pager a:hover{ border-color:var(--dl-primary); color:var(--dl-primary); }
.dl-pager a.active{ background:var(--dl-primary); color:#fff; border-color:var(--dl-primary); }
.dl-pager .dl-page-prev, .dl-pager .dl-page-next{ font-weight:600; }

/* ---------- 侧栏 ---------- */
.dl-side-box{ background:#fff; border:1px solid var(--dl-border); border-radius:12px; padding:14px 16px; margin-bottom:16px; }
.dl-side-h{ font-size:14px; font-weight:700; color:var(--dl-text); margin:0 0 12px; padding-bottom:8px; border-bottom:1px solid var(--dl-border); }
.dl-side-h i{ color:var(--dl-primary); margin-right:6px; }
.dl-rank{ list-style:none; margin:0; padding:0; }
.dl-rank li{ display:flex; align-items:center; gap:8px; padding:7px 0; border-bottom:1px dashed var(--dl-border); font-size:13px; }
.dl-rank li:last-child{ border-bottom:none; }
.dl-rank-no{ width:20px; height:20px; border-radius:50%; background:var(--dl-bg); color:var(--dl-gray); font-size:11px; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 20px; }
.dl-rank-no.top{ background:var(--dl-red); color:#fff; }
.dl-rank-name{ flex:1; color:var(--dl-text); text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dl-rank-name:hover{ color:var(--dl-primary); }
.dl-rank-n{ color:var(--dl-gray); font-size:12px; }
.dl-recent{ list-style:none; margin:0; padding:0; }
.dl-recent li{ display:flex; align-items:center; gap:8px; padding:7px 0; font-size:13px; border-bottom:1px dashed var(--dl-border); }
.dl-recent li:last-child{ border-bottom:none; }
.dl-recent-ic{ font-size:15px; flex:0 0 16px; }
.dl-recent-ic.pdf{ color:#d83a3a; } .dl-recent-ic.word{ color:#2b6cd4; }
.dl-recent a{ flex:1; color:var(--dl-text); text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dl-recent a:hover{ color:var(--dl-primary); }
.dl-recent span{ color:var(--dl-gray); font-size:11px; flex:0 0 auto; }
.dl-ad{ background:linear-gradient(135deg,#0a3d8f,#1a6fd8); border:none; color:#fff; text-align:center; padding:18px 16px; }
.dl-ad-tag{ font-size:11px; opacity:.75; letter-spacing:2px; }
.dl-ad-body i{ font-size:30px; color:#ffd97a; margin:6px 0; }
.dl-ad-body p{ font-size:13px; margin:0 0 12px; line-height:1.5; }
.dl-ad-btn{ display:inline-block; background:#ffd97a; color:#0a3d8f; font-weight:700; font-size:13px; padding:7px 18px; border-radius:20px; text-decoration:none; }
.dl-mine a{ display:flex; align-items:center; justify-content:center; gap:8px; background:var(--dl-primary-l); color:var(--dl-primary);
  font-weight:700; text-decoration:none; border-radius:8px; padding:11px; font-size:13px; }
.dl-mine a:hover{ background:#dde9fb; }

/* ---------- 空状态 ---------- */
.dl-empty{ background:#fff; border:1px dashed var(--dl-border); border-radius:12px; padding:50px 20px; text-align:center; color:var(--dl-gray); }
.dl-empty i{ font-size:46px; color:#c2cad4; display:block; margin-bottom:12px; }
.dl-empty p{ margin:0 0 16px; font-size:14px; }
.dl-empty .fl-btn-primary{ display:inline-flex; align-items:center; gap:6px; }

/* ============================================================
   通用按钮 / 弹窗 / Toast
   ============================================================ */
.fl-btn-primary{ background:var(--dl-primary); color:#fff; border:none; border-radius:8px; padding:10px 18px; font-size:14px;
  font-weight:600; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:6px; transition:background .15s; }
.fl-btn-primary:hover{ background:var(--dl-primary-d); }
.fl-btn-ghost{ background:#fff; color:var(--dl-primary); border:1px solid var(--dl-primary); border-radius:8px; padding:10px 18px;
  font-size:14px; font-weight:600; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
.fl-btn-ghost:hover{ background:var(--dl-primary-l); }

.fl-modal{ position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center; }
.fl-modal[hidden]{ display:none; }
.fl-modal-mask{ position:absolute; inset:0; background:rgba(10,20,40,.55); }
.fl-modal-box{ position:relative; background:#fff; border-radius:14px; padding:24px; width:380px; max-width:92vw;
  box-shadow:0 20px 60px rgba(0,0,0,.3); animation:flPop .18s ease; }
@keyframes flPop{ from{ transform:scale(.94); opacity:0; } to{ transform:scale(1); opacity:1; } }
.fl-modal-x{ position:absolute; top:12px; right:14px; background:none; border:none; font-size:18px; color:var(--dl-gray); cursor:pointer; }
.fl-modal-box h3{ margin:0 0 6px; font-size:18px; color:var(--dl-text); }
.fl-modal-box h3 i{ color:var(--dl-primary); margin-right:8px; }
.fl-modal-sub{ font-size:13px; color:var(--dl-gray); margin:0 0 16px; line-height:1.6; }
#loginForm{ display:flex; flex-direction:column; gap:12px; }
#loginForm input{ height:42px; border:1px solid var(--dl-border); border-radius:8px; padding:0 12px; font-size:14px; outline:none; }
#loginForm input:focus{ border-color:var(--dl-primary); }
#loginSubmit{ height:42px; }
.fl-modal-msg{ font-size:13px; margin-top:10px; min-height:18px; }
.fl-modal-foot{ font-size:12px; color:var(--dl-gray); text-align:center; margin-top:14px; }
.fl-modal-foot a{ color:var(--dl-primary); text-decoration:none; }
.fl-vip-box{ text-align:center; }
.fl-vip-crown{ font-size:40px; color:#ffd97a; margin-bottom:6px; }
.fl-vip-box .fl-btn-primary{ width:100%; justify-content:center; margin-top:8px; }

.fl-toast{ position:fixed; top:24px; left:50%; transform:translateX(-50%); z-index:3000; background:rgba(30,40,60,.94);
  color:#fff; padding:11px 22px; border-radius:24px; font-size:14px; box-shadow:0 6px 20px rgba(0,0,0,.25); max-width:90vw; }
.fl-toast[hidden]{ display:none; }

/* ============================================================
   预览弹窗
   ============================================================ */
.fl-prev-modal{ align-items:stretch; padding:20px; }
.fl-prev-box{ width:min(900px,94vw); max-width:94vw; height:min(88vh,860px); display:flex; flex-direction:column; padding:0; overflow:hidden; }
.fl-prev-bar{ display:flex; align-items:center; justify-content:space-between; padding:12px 16px; background:var(--dl-primary);
  color:#fff; flex:0 0 auto; }
.fl-prev-title{ font-size:15px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fl-prev-title i{ margin-right:8px; }
.fl-prev-tools{ display:flex; align-items:center; gap:4px; }
.fl-prev-tools button{ background:rgba(255,255,255,.15); border:none; color:#fff; width:32px; height:32px; border-radius:6px;
  cursor:pointer; font-size:14px; display:inline-flex; align-items:center; justify-content:center; }
.fl-prev-tools button:hover{ background:rgba(255,255,255,.3); }
.fl-prev-tools #prevPageInfo{ min-width:56px; text-align:center; font-size:13px; }
.fl-prev-tools .fl-prev-close{ background:rgba(255,255,255,.15); margin-left:4px; }
.fl-prev-body{ flex:1; overflow:auto; background:#525659; display:flex; align-items:flex-start; justify-content:center; padding:18px;
  user-select:none; -webkit-user-select:none; }
#prevCanvas{ box-shadow:0 4px 20px rgba(0,0,0,.4); max-width:100%; }
.fl-prev-loading{ color:#fff; font-size:14px; display:flex; align-items:center; gap:8px; margin-top:40px; }
.fl-prev-error{ color:#fff; text-align:center; margin-top:50px; }
.fl-prev-error i{ font-size:40px; color:#ffb74d; display:block; margin-bottom:12px; }
.fl-prev-error p{ font-size:14px; line-height:1.6; max-width:320px; margin:0 auto; }
.fl-prev-foot{ display:flex; justify-content:space-between; gap:10px; padding:12px 16px; background:#fff; border-top:1px solid var(--dl-border); flex:0 0 auto; }
.fl-prev-foot .fl-btn-primary, .fl-prev-foot .fl-btn-ghost{ flex:0 0 auto; }

/* ============================================================
   会员中心 - 我的下载记录
   ============================================================ */
.uc-head{ padding:22px 0 14px; }
.uc-head h1{ font-size:22px; color:var(--dl-primary); margin:0 0 6px; }
.uc-head h1 i{ margin-right:8px; }
.uc-head p{ color:var(--dl-gray); font-size:13px; margin:0; }
.uc-list{ background:#fff; border:1px solid var(--dl-border); border-radius:12px; overflow:hidden; margin-top:8px; }
.uc-row{ display:grid; grid-template-columns:1fr 90px 160px 130px; align-items:center; padding:13px 18px; border-bottom:1px solid var(--dl-border); font-size:13px; }
.uc-row:last-child{ border-bottom:none; }
.uc-row-head{ background:var(--dl-bg); font-weight:700; color:var(--dl-gray); font-size:12px; }
.uc-c-name{ color:var(--dl-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:flex; align-items:center; gap:8px; }
.uc-fmt-ic{ font-size:15px; } .uc-fmt-ic.pdf{ color:#d83a3a; } .uc-fmt-ic.word{ color:#2b6cd4; }
.uc-c-fmt .dl-fmt{ display:inline-block; }
.uc-c-time{ color:var(--dl-gray); }

/* 题库下载页顶部 → 资质查询 导流卡片（双向互通） */
.dl-promo-zz{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:linear-gradient(120deg,#e8f1fb,#dbeafe); border:1px solid #bcd4f0;
  border-radius:10px; padding:12px 16px; margin-bottom:16px; text-decoration:none; color:var(--dl-text);
}
.dl-promo-zz > i{ font-size:20px; color:var(--dl-primary); flex:0 0 auto; }
.dl-promo-zz-t{ font-size:13.5px; color:var(--dl-gray); flex:1; min-width:200px; }
.dl-promo-zz-btn{ flex:0 0 auto; background:var(--dl-primary); color:#fff; font-weight:700; font-size:13px; padding:8px 15px; border-radius:7px; white-space:nowrap; }
.dl-promo-zz-btn i{ margin-left:4px; }

/* hover 提示浮层（按钮悬浮显示，移开隐藏） */
.dl-tip-wrap{ position:relative; display:inline-block; }
.dl-tip-wrap::after{
  content:attr(data-tip);
  position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
  background:rgba(30,40,60,.96); color:#fff; font-size:12px; font-weight:400; line-height:1.5;
  padding:7px 11px; border-radius:7px; width:max-content; max-width:240px; text-align:center;
  opacity:0; visibility:hidden; transition:opacity .15s; pointer-events:none; z-index:60;
  box-shadow:0 6px 18px rgba(0,0,0,.22);
}
.dl-tip-wrap:hover::after{ opacity:1; visibility:visible; }

/* 移动端预览弹窗高度自适应（85vh，内部滚动） */
@media (max-width:768px){
  .fl-prev-box{ height:85vh; }
  .fl-prev-body{ padding:10px; }
}
.uc-c-act{ text-align:right; }
.uc-c-act .dl-btn{ height:34px; font-size:12px; flex:none; padding:0 14px; }
.uc-del{ color:var(--dl-gray); font-size:12px; }
.uc-foot-note{ font-size:12px; color:var(--dl-gray); margin-top:12px; display:flex; align-items:center; gap:6px; }
.uc-foot-note i{ color:var(--dl-primary); }
.uc-login-tip .fl-btn-primary{ margin-top:6px; }

/* ============================================================
   响应式
   ============================================================ */
@media (max-width:980px){
  .dl-layout{ flex-direction:column; }
  .dl-side{ width:100%; flex:none; display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .dl-side .dl-ad, .dl-side .dl-mine{ grid-column:1 / -1; }
}
@media (max-width:768px){
  .dl-grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .dl-head{ flex-direction:column; align-items:flex-start; }
  .dl-head-stats{ width:100%; }
  .dl-filter{ gap:10px; }
  .dl-filter-item, .dl-filter select, .dl-filter input{ min-width:0; width:100%; }
  .dl-filter-kw{ width:100%; }
  .dl-side{ grid-template-columns:1fr; }
  .uc-row{ grid-template-columns:1fr 70px; grid-template-areas:"name name" "fmt time" "act act"; row-gap:6px; }
  .uc-row-head{ display:none; }
  .uc-c-name{ grid-area:name; }
  .uc-c-fmt{ grid-area:fmt; } .uc-c-time{ grid-area:time; text-align:right; }
  .uc-c-act{ grid-area:act; text-align:left; }
  .uc-c-act .dl-btn{ width:100%; }
}
@media (max-width:480px){
  .dl-grid{ grid-template-columns:1fr; }
}