/* ==========================================================================
   试卷库（/sjk）· 主站视觉体系
   依赖 nav.css 的变量与 .sb-hero / .sb-crumb / .sb-eyebrow / .sb-chips / .rise
   页面标识：.app.page-shijuan
   ========================================================================== */

.sj-wrap{display:flex;flex-direction:column;gap:16px;min-width:0}

/* ------------------------------------------------------------ 头图 */
.sj-hero{padding-bottom:30px}
.sj-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) 164px;gap:20px;align-items:center}
.sj-hero-sm{padding:24px 28px}
.sj-hero h1 em{font-style:normal}
.sj-hero-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}

.sj-btn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 16px;border-radius:12px;
  font-size:13px;font-weight:700;color:#fff;background:var(--grad);
  box-shadow:0 10px 24px -12px var(--glow-1);transition:transform .22s,box-shadow .22s,background .22s}
.sj-btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px -14px var(--glow-1)}
.sj-btn:active{transform:translateY(0)}
.sj-btn.ghost{background:var(--panel);color:var(--text-2);border:1px solid var(--border);box-shadow:none}
.sj-btn.ghost:hover{border-color:var(--accent);color:var(--accent)}
.sj-hero .sj-btn{background:#fff;color:#1c1f27;box-shadow:0 10px 26px -14px rgba(12,10,40,.55)}
.sj-hero .sj-btn:hover{box-shadow:0 16px 34px -16px rgba(12,10,40,.6)}
.sj-hero .sj-btn.ghost{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.34);box-shadow:none}
.sj-hero .sj-btn.ghost:hover{background:rgba(255,255,255,.24);color:#fff;border-color:rgba(255,255,255,.5)}

/* 右侧数字印章：与关于页 .ab-seal 同款气质（更克制，不循环闪动） */
.sj-seal{position:relative;width:156px;height:156px;border-radius:50%;margin-left:auto;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  background:radial-gradient(circle at 50% 32%,rgba(255,255,255,.26),rgba(255,255,255,.05) 68%);
  border:1px dashed rgba(255,255,255,.42);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 18px 44px -18px rgba(12,10,40,.6),inset 0 1px 0 rgba(255,255,255,.35)}
.sj-seal::before{content:"";position:absolute;inset:-9px;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0 290deg,rgba(255,255,255,.8) 336deg,transparent 360deg);
  -webkit-mask:radial-gradient(closest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));
  mask:radial-gradient(closest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));
  opacity:.7;animation:sj-spin 14s linear infinite}
@keyframes sj-spin{to{transform:rotate(360deg)}}
.sj-seal b{position:relative;z-index:1;font-size:32px;font-weight:800;line-height:1;letter-spacing:-1.5px;color:#fff;
  text-shadow:0 8px 30px rgba(255,255,255,.4)}
.sj-seal em{position:relative;z-index:1;font-style:normal;font-size:10.5px;letter-spacing:1px;color:rgba(255,255,255,.78)}

/* ------------------------------------------------------------ 主体两栏 */
.sj-body{display:grid;grid-template-columns:minmax(0,1fr) 272px;gap:16px;align-items:start}
.sj-main{display:flex;flex-direction:column;gap:16px;min-width:0}
.sj-side{position:sticky;top:calc(var(--top) + 16px);display:flex;flex-direction:column;gap:12px;min-width:0}

/* 区块 */
.sj-block{padding:18px;border-radius:18px;background:var(--panel);
  border:1px solid var(--card-border);box-shadow:var(--shadow-sm)}
.sj-bhead{display:flex;align-items:center;gap:11px;padding-bottom:14px;border-bottom:1px dashed var(--border)}
.sj-bico{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  font-size:16px;color:#fff;background:var(--grad);box-shadow:0 8px 20px var(--glow-1)}
.sj-btx{flex:1 1 auto;min-width:0}
.sj-btx h2{margin:0;font-size:15px;font-weight:800;color:var(--text);letter-spacing:-.2px}
.sj-btx h2 a{color:inherit}
.sj-btx h2 a:hover{color:var(--accent)}
.sj-btx p{margin:3px 0 0;font-size:11.5px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sj-more{flex:none;display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 11px;border-radius:10px;
  font-size:11.5px;font-weight:600;color:var(--accent);background:var(--primary-light);
  transition:background .2s,color .2s,box-shadow .2s}
.sj-more:hover{box-shadow:0 6px 16px var(--glow-1)}

/* ------------------------------------------------------------ 学科卡 */
.sj-subjects{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:12px;margin-top:14px}
.sj-subject{padding:14px;border-radius:14px;background:var(--surface-2);border:1px solid transparent;
  transition:background .22s,border-color .22s,box-shadow .22s,transform .22s}
.sj-subject:hover{background:var(--panel);border-color:var(--card-border);box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.sj-subject>header{display:flex;align-items:center;gap:10px}
.sj-sub-ico{flex:none;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  font-size:15px;color:var(--accent);background:var(--primary-light)}
.sj-sub-tx{flex:1 1 auto;min-width:0}
.sj-sub-tx b{display:block;font-size:13.5px;font-weight:800;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sj-sub-tx b a{color:inherit}
.sj-sub-tx b a:hover{color:var(--accent)}
.sj-sub-tx em{display:block;margin-top:1px;font-style:normal;font-size:11px;color:var(--muted)}
.sj-grades{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.sj-grades a{display:inline-flex;align-items:center;gap:4px;height:25px;padding:0 9px;border-radius:8px;
  font-size:11px;color:var(--muted);background:var(--panel);border:1px solid var(--border);
  transition:color .2s,border-color .2s,background .2s}
.sj-grades a em{font-style:normal;font-size:10px;opacity:.75}
.sj-grades a:hover{color:var(--accent);border-color:var(--accent)}
.sj-grades a.on{color:var(--accent);border-color:var(--accent);background:var(--primary-light)}

/* ------------------------------------------------------------ 试卷卡 */
.sj-papers{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:12px;margin-top:14px}
.sj-paper{display:flex;flex-direction:column;border-radius:14px;overflow:hidden;background:var(--surface-2);
  border:1px solid transparent;transition:background .22s,border-color .22s,box-shadow .22s,transform .22s}
.sj-paper:hover{background:var(--panel);border-color:var(--card-border);box-shadow:var(--shadow-sm);transform:translateY(-3px)}
.sj-thumb{position:relative;display:block;aspect-ratio:16/10;background:var(--panel);
  display:grid;place-items:center;overflow:hidden;border-bottom:1px solid var(--border)}
.sj-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s cubic-bezier(.22,.61,.36,1)}
.sj-paper:hover .sj-thumb img{transform:scale(1.05)}
.sj-thumb>i{font-size:26px;color:var(--muted);opacity:.55}
.sj-badge{position:absolute;left:8px;top:8px;height:21px;padding:0 7px;border-radius:6px;
  display:inline-flex;align-items:center;font-style:normal;font-size:10.5px;font-weight:700;
  color:#fff;background:rgba(24,26,36,.62);backdrop-filter:blur(6px);letter-spacing:.3px}
.sj-paper-bd{display:flex;flex-direction:column;gap:6px;padding:11px 12px 13px}
.sj-paper-bd b{font-size:12.5px;font-weight:700;line-height:1.55;color:var(--text);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sj-meta{display:flex;flex-wrap:wrap;gap:5px}
.sj-meta em{font-style:normal;font-size:10.5px;color:var(--text-2);
  padding:1px 6px;border-radius:5px;background:var(--panel);border:1px solid var(--border)}
.sj-date{margin-top:auto;font-size:10.5px;color:var(--muted)}
.tone-blue{color:#3b82f6}.tone-red{color:#ef4444}.tone-amber{color:#f59e0b}.tone-orange{color:#f97316}.tone-gray{color:var(--text-2)}
.sj-row-badge.tone-blue,.sj-badge.tone-blue{background:rgba(59,130,246,.9)}
.sj-row-badge.tone-red,.sj-badge.tone-red{background:rgba(239,68,68,.9)}
.sj-row-badge.tone-amber,.sj-badge.tone-amber{background:rgba(245,158,11,.92)}
.sj-row-badge.tone-orange,.sj-badge.tone-orange{background:rgba(249,115,22,.92)}
.sj-row-badge.tone-gray,.sj-badge.tone-gray{background:rgba(100,116,139,.85)}

/* ------------------------------------------------------------ 侧栏 */
.sj-box{padding:14px;border-radius:16px;background:var(--panel);
  border:1px solid var(--card-border);box-shadow:var(--shadow-sm);
  transition:transform .25s cubic-bezier(.22,.61,.36,1),box-shadow .25s,border-color .25s}
.sj-box:hover{transform:translateY(-2px);border-color:var(--accent)}
.sj-box h4{margin:0 0 11px;font-size:12.5px;font-weight:800;color:var(--text);display:flex;align-items:center;gap:6px}
.sj-box h4 i{color:var(--accent)}
.sj-rank{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.sj-rank li{display:flex;align-items:flex-start;gap:8px}
.sj-rank-no{flex:none;width:18px;height:18px;margin-top:1px;border-radius:6px;display:grid;place-items:center;
  font-size:10px;font-weight:800;color:var(--muted);background:var(--surface-2);border:1px solid var(--border)}
.sj-rank-no.top{color:#fff;background:var(--grad);border-color:transparent}
.sj-rank a{font-size:11.5px;line-height:1.6;color:var(--text-2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sj-rank a:hover{color:var(--accent)}
.sj-quick{display:flex;flex-wrap:wrap;gap:6px}
.sj-quick a{display:inline-flex;align-items:center;gap:5px;height:27px;padding:0 9px;border-radius:8px;
  font-size:11px;color:var(--text-2);background:var(--surface-2);border:1px solid var(--border);
  transition:color .2s,border-color .2s,background .2s}
.sj-quick a em{font-style:normal;font-size:10px;color:var(--muted)}
.sj-quick a:hover,.sj-quick a.on{color:var(--accent);border-color:var(--accent);background:var(--primary-light)}
.sj-note p{margin:0 0 8px;font-size:11.5px;line-height:1.75;color:var(--muted)}
.sj-note p:last-child{margin-bottom:0}

/* ------------------------------------------------------------ 学科页 */
.sj-secs{display:flex;flex-direction:column;gap:14px}
.sj-section{padding:16px 16px 6px;border-radius:18px;background:var(--panel);
  border:1px solid var(--card-border);box-shadow:var(--shadow-sm)}
.sj-mini{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column}
.sj-mini li+li{border-top:1px dashed var(--border)}
.sj-mini a{display:flex;align-items:center;gap:10px;padding:9px 2px;border-radius:10px;
  transition:background .2s,padding .2s}
.sj-mini a:hover{background:var(--surface-2);padding-left:8px}
.sj-mini-thumb{flex:none;width:56px;height:38px;border-radius:8px;overflow:hidden;display:grid;place-items:center;
  background:var(--surface-2);border:1px solid var(--border)}
.sj-mini-thumb img{width:100%;height:100%;object-fit:cover}
.sj-mini-thumb i{font-size:15px;color:var(--muted)}
.sj-mini-tx{flex:1 1 auto;min-width:0}
.sj-mini-tx b{display:block;font-size:12px;font-weight:600;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sj-mini-tx em{display:block;margin-top:2px;font-style:normal;font-size:10.5px;color:var(--muted)}
.sj-mini-go{flex:none;font-size:11px;color:var(--muted);opacity:.6}

/* ------------------------------------------------------------ 栏目 tabs */
.sj-tabs{display:flex;gap:8px;overflow-x:auto;padding:2px;scrollbar-width:none;-ms-overflow-style:none}
.sj-tabs::-webkit-scrollbar{display:none}
.sj-tab{flex:none;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 13px;border-radius:11px;
  font-size:12.5px;color:var(--text-2);background:var(--panel);border:1px solid var(--border);
  transition:color .2s,border-color .2s,background .2s,box-shadow .2s}
.sj-tab em{font-style:normal;font-size:10px;color:var(--muted)}
.sj-tab:hover{color:var(--accent);border-color:var(--accent)}
.sj-tab.on{color:var(--accent);border-color:var(--accent);background:var(--primary-light);font-weight:700;
  box-shadow:0 6px 16px var(--glow-1)}

/* ------------------------------------------------------------ 列表 */
.sj-panel{border-radius:18px;background:var(--panel);border:1px solid var(--card-border);
  box-shadow:var(--shadow-sm);overflow:hidden}
.sj-panel-hd{display:grid;grid-template-columns:minmax(0,1fr) 74px 78px 96px;gap:10px;
  padding:11px 16px;font-size:11px;color:var(--muted);
  background:var(--surface-2);border-bottom:1px solid var(--border)}
.sj-panel-hd span:not(:first-child){text-align:center}
.sj-rows{list-style:none;margin:0;padding:0}
.sj-row+.sj-row{border-top:1px dashed var(--border)}
.sj-row>a{display:grid;grid-template-columns:26px 64px minmax(0,1fr) 74px 78px 96px;gap:10px;
  align-items:center;padding:10px 16px;transition:background .2s}
.sj-row>a:hover{background:var(--surface-2)}
.sj-row-no{font-size:11px;color:var(--muted);text-align:center}
.sj-row-thumb{width:64px;height:44px;border-radius:8px;overflow:hidden;display:grid;place-items:center;
  background:var(--surface-2);border:1px solid var(--border)}
.sj-row-thumb img{width:100%;height:100%;object-fit:cover}
.sj-row-thumb i{font-size:16px;color:var(--muted)}
.sj-row-tx{min-width:0}
.sj-row-tx b{display:block;font-size:12.5px;font-weight:600;color:var(--text);line-height:1.5;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sj-row>a:hover .sj-row-tx b{color:var(--accent)}
.sj-row-tx em{display:block;margin-top:2px;font-style:normal;font-size:10.5px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sj-row-badge{justify-self:center;height:20px;padding:0 7px;border-radius:6px;display:inline-flex;align-items:center;
  font-size:10.5px;font-weight:700;color:#fff}
.sj-row-col{font-size:11px;color:var(--muted);text-align:center}
.sj-empty-row{padding:34px 16px;text-align:center;color:var(--muted);font-size:12px}
.sj-empty-row p{margin:0 0 6px;color:var(--text-2);font-size:12.5px}
.sj-empty-row code{padding:1px 6px;border-radius:5px;background:var(--surface-2);border:1px solid var(--border);
  font-size:11px;color:var(--accent)}
.sj-empty{margin:0;padding:18px 0;text-align:center;font-size:11.5px;color:var(--muted)}

/* 分页 */
.sj-panel-ft{padding:12px 16px;border-top:1px solid var(--border)}
.sj-page{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sj-page-btn{min-width:30px;height:30px;padding:0 9px;border-radius:9px;display:inline-flex;align-items:center;
  justify-content:center;font-size:11.5px;color:var(--text-2);background:var(--surface-2);
  border:1px solid var(--border);transition:color .2s,border-color .2s,background .2s}
.sj-page-btn:hover{color:var(--accent);border-color:var(--accent)}
.sj-page-btn.on{color:#fff;background:var(--grad);border-color:transparent;font-weight:700}
.sj-page-dot{color:var(--muted);font-size:11px}
.sj-page-info{margin-left:auto;font-size:11px;color:var(--muted)}

/* ------------------------------------------------------------ 详情 */
.sj-article{padding:24px 26px 20px}
.sj-art-hd h1{margin:0;font-size:clamp(19px,2.4vw,24px);line-height:1.42;font-weight:800;
  letter-spacing:-.4px;color:var(--text)}
.sj-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.sj-tag{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:8px;
  font-size:11px;color:var(--text-2);background:var(--surface-2);border:1px solid var(--border)}
.sj-tag.on{color:var(--accent);border-color:var(--accent);background:var(--primary-light)}
.sj-tag.free{color:#12b76a;border-color:rgba(18,183,106,.4);background:rgba(18,183,106,.1)}
.sj-tag.vip{color:#b7791f;border-color:rgba(183,121,31,.4);background:rgba(183,121,31,.1)}
.sj-tag.paid{color:#e5484d;border-color:rgba(229,72,77,.4);background:rgba(229,72,77,.1)}

.sj-meta-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;margin:16px 0 0;
  padding:1px;border-radius:12px;overflow:hidden;background:var(--border)}
/* 电脑端一行 6 个，手机端一行 3 个 */
@media (max-width:820px){.sj-meta-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.sj-meta-grid>div{padding:9px 11px;background:var(--panel);min-width:0}
.sj-meta-grid dt{font-size:10.5px;color:var(--muted)}
.sj-meta-grid dd{margin:3px 0 0;font-size:12px;font-weight:600;color:var(--text);word-break:break-word}
.sj-sec{margin-top:20px;padding-top:18px;border-top:1px dashed var(--border)}
.sj-sec h2{margin:0 0 12px;font-size:13.5px;font-weight:800;color:var(--text);display:flex;align-items:center;gap:7px}
.sj-sec h2 i{color:var(--accent)}
.sj-intro{font-size:12.5px;line-height:1.9;color:var(--text-2);word-break:break-word}
.sj-intro img{display:block;max-width:100%;height:auto!important;margin:0;border-radius:0;border:0}
/* 预览图容器：宽度收缩到图片自身（不拉伸放大），高度由脚本设为图片的 80%，
   底部 20% 直接裁掉不渲染（不用遮罩，避免半透明主题下透出内容） */
.sj-shot{position:relative;display:block;width:fit-content;max-width:100%;margin:14px auto;
  border-radius:10px;overflow:hidden;border:1px solid var(--border);line-height:0;
  box-shadow:0 16px 34px -24px rgba(15,23,42,.6)}
.sj-shot img{display:block;max-width:100%;height:auto!important;margin:0;border:0;border-radius:0}
.sj-intro a{color:var(--accent)}
.sj-intro p{margin:0 0 8px}
.sj-dls{display:flex;flex-direction:column;gap:10px}
.sj-dl{display:flex;align-items:center;gap:12px;padding:13px 15px;border-radius:14px;
  background:linear-gradient(135deg,rgba(18,183,106,.12),rgba(18,183,106,.04));
  border:1px solid rgba(18,183,106,.34);transition:transform .22s,box-shadow .22s,border-color .22s}
.sj-dl:hover{transform:translateY(-2px);border-color:#12b76a;box-shadow:0 14px 30px -18px rgba(18,183,106,.65)}
.sj-dl-ic{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  font-size:17px;color:#fff;background:linear-gradient(135deg,#12b76a,#0f9d58);
  box-shadow:0 8px 20px -10px rgba(18,183,106,.8)}
.sj-dl-tx{flex:1 1 auto;min-width:0}
.sj-dl-tx b{display:block;font-size:12.5px;font-weight:700;color:var(--text)}
.sj-dl-tx em{display:block;margin-top:2px;font-style:normal;font-size:11px;color:var(--muted)}
.sj-dl-go{flex:none;font-size:19px;color:#12b76a}
.sj-tip{margin:10px 0 0;font-size:11px;color:var(--muted)}
.sj-notice{font-size:12px;line-height:1.85;color:var(--text-2)}
.sj-notice img{max-width:100%;height:auto}
.sj-pn{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px;padding-top:18px;
  border-top:1px dashed var(--border)}
/* 上一篇 / 下一篇：图标胶囊 + 标签 + 标题，卡片式层次 */
.sj-pn-item{display:flex;align-items:center;gap:10px;min-width:0;padding:12px 14px;
  border-radius:14px;background:var(--panel);border:1px solid var(--card-border);
  box-shadow:var(--shadow-sm);
  transition:transform .22s cubic-bezier(.22,.61,.36,1),box-shadow .22s,border-color .22s,background .22s}
.sj-pn-item:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:var(--shadow)}
.sj-pn-item.next{flex-direction:row-reverse;text-align:right}
.sj-pn-ic{flex:none;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  font-size:15px;color:var(--accent);background:var(--primary-light);
  border:1px solid var(--card-border);transition:background .22s,color .22s,border-color .22s}
.sj-pn-item:hover .sj-pn-ic{background:var(--accent);border-color:transparent;color:#fff}
.sj-pn-tx{flex:1;min-width:0}
.sj-pn-tx>span{display:block;font-size:10.5px;font-weight:600;letter-spacing:.3px;color:var(--muted)}
.sj-pn a{display:block;margin-top:4px;font-size:12.5px;font-weight:700;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sj-pn a:hover{color:var(--accent)}
.sj-pn em{display:block;margin-top:4px;font-style:normal;font-size:12px;color:var(--muted)}
.sj-info{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
.sj-info li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 0;
  font-size:11.5px;border-bottom:1px dashed var(--border)}
.sj-info li:last-child{border-bottom:0}
.sj-info span{color:var(--muted)}
.sj-info b{font-weight:700;color:var(--text);text-align:right;word-break:break-all}
.sj-more-line{display:inline-flex;align-items:center;gap:5px;margin-top:10px;font-size:11.5px;font-weight:600;color:var(--accent)}
.sj-more-line:hover{text-decoration:underline}

/* 灯箱 */
.lightbox{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:40px 20px;
  background:rgba(8,15,30,.88);animation:sj-fade .2s ease}
.lightbox[hidden]{display:none}
.lightbox img{max-width:min(920px,92vw);max-height:88vh;width:auto;border-radius:10px;
  box-shadow:0 30px 60px rgba(0,0,0,.5)}
.lightbox-close{position:absolute;right:22px;top:18px;width:38px;height:38px;border-radius:12px;
  display:grid;place-items:center;font-size:20px;color:#fff;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.24);cursor:pointer}
.lightbox-close:hover{background:rgba(255,255,255,.24)}
@keyframes sj-fade{from{opacity:0}to{opacity:1}}

/* ------------------------------------------------------------ 404 */
.sj-404{margin:10px 0 4px;padding:54px 24px;border-radius:20px;text-align:center;
  background:var(--panel);border:1px solid var(--card-border);box-shadow:var(--shadow-sm)}
.sj-404>b{display:block;font-size:clamp(56px,10vw,92px);font-weight:800;line-height:1;letter-spacing:-4px;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sj-404 h1{margin:12px 0 6px;font-size:18px;font-weight:800;color:var(--text)}
.sj-404 p{margin:0;font-size:12.5px;color:var(--muted)}
.sj-404-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:20px}

/* ------------------------------------------------------------ 下载门槛 */
.sj-lock{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:16px 18px;border-radius:16px;
  background:var(--surface-2);border:1px dashed var(--card-border)}
.sj-lock-ic{flex:none;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-size:19px;
  color:var(--accent);background:var(--panel);box-shadow:var(--shadow-sm)}
.sj-lock-tx{flex:1;min-width:190px}
.sj-lock-tx b{display:block;font-size:13.5px;color:var(--text)}
.sj-lock-tx p{margin:4px 0 0;font-size:12px;line-height:1.7;color:var(--muted)}
.sj-lock .sj-btn{flex:none}
.sj-dl.is-busy{pointer-events:none;opacity:.55}

/* 下载弹窗（扫码看广告赚积分） */
.sj-modal{position:fixed;inset:0;z-index:210;display:grid;place-items:center;padding:20px}
.sj-modal[hidden]{display:none}
.sj-modal-mask{position:absolute;inset:0;background:rgba(8,15,30,.62);-webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);animation:sj-fade .2s ease}
.sj-modal-box{position:relative;width:100%;max-width:400px;max-height:88vh;overflow:auto;
  padding:26px 24px 22px;border-radius:20px;background:var(--panel-solid,#fff);
  border:1px solid var(--card-border);box-shadow:0 30px 70px rgba(8,15,30,.32);animation:sj-pop .22s ease}
.sj-modal-box h3{margin:0;font-size:17px;font-weight:800;color:var(--text);display:flex;align-items:center;gap:8px}
.sj-modal-box h3 i{color:var(--accent)}
.sj-modal-sub{margin:6px 0 16px;font-size:12px;color:var(--muted)}
.sj-modal-x{position:absolute;right:14px;top:12px;width:30px;height:30px;border:0;border-radius:9px;
  background:var(--surface-2);color:var(--muted);font-size:17px;line-height:1;cursor:pointer}
.sj-modal-x:hover{background:var(--border);color:var(--text)}
.sj-modal-qr{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px;border-radius:16px;
  background:var(--surface-2);border:1px solid var(--card-border)}
.sj-modal-qr img{width:180px;height:180px;object-fit:contain;border-radius:10px;background:#fff}
.sj-modal-qr span{font-size:11.5px;color:var(--muted)}
.sj-modal-qr.empty{padding:34px 16px;color:var(--muted)}
.sj-modal-qr.empty i{font-size:32px}
.sj-modal-steps{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.sj-modal-steps li{display:flex;align-items:flex-start;gap:9px;font-size:12.5px;line-height:1.6;color:var(--text-2)}
.sj-modal-steps b{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  font-size:11px;font-weight:700;color:#fff;background:var(--grad)}
.sj-modal-steps em{font-style:normal;font-weight:800;color:var(--accent)}
.sj-modal-note{margin:14px 0 0;font-size:11.5px;line-height:1.7;color:var(--muted)}
.sj-modal-meta{display:flex;gap:10px;margin-top:14px}
.sj-modal-meta span{flex:1;padding:9px 12px;border-radius:11px;background:var(--surface-2);
  font-size:11.5px;color:var(--muted);text-align:center}
.sj-modal-meta b{display:block;margin-top:2px;font-size:16px;color:var(--text)}
.sj-btn.full{width:100%;justify-content:center;margin-top:16px}
@keyframes sj-pop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}

/* ------------------------------------------------------------ 响应式 */
@media(max-width:1100px){
  .sj-body{grid-template-columns:minmax(0,1fr)}
  .sj-side{position:static;display:block}
  .sj-side-scroll{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:12px}
  .sj-side-scroll .sj-note{grid-column:1/-1}
}
@media(max-width:760px){
  .sj-hero-grid{grid-template-columns:minmax(0,1fr)}
  .sj-seal{display:none}
  .sj-subjects,.sj-papers{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
  .sj-panel-hd{grid-template-columns:minmax(0,1fr) 64px}
  .sj-panel-hd span:nth-child(3),.sj-panel-hd span:nth-child(4){display:none}
  .sj-row>a{grid-template-columns:22px 56px minmax(0,1fr) 64px;padding:10px 12px}
  .sj-row-col{display:none}
  .sj-row-thumb{width:56px;height:40px}
  .sj-article{padding:18px 16px 16px}
  .sj-pn{grid-template-columns:1fr}
  .sj-side-scroll{grid-template-columns:minmax(0,1fr)}
  .sj-page-info{width:100%;margin-left:0}
}
@media(max-width:480px){
  .sj-subjects,.sj-papers{grid-template-columns:minmax(0,1fr)}
  .sb-hero.sj-hero{padding:22px 18px}
}
@media(prefers-reduced-motion:reduce){
  .sj-seal::before{animation:none}
  .sj-paper,.sj-subject,.sj-box,.sj-dl,.sj-btn{transition:none}
}

/* ------------------------------------------------------------ 手机端：试卷说明抽屉
   完全对齐广告入驻页（front/ad.html）：面包屑右上角开关 + 右侧抽屉 + 抽屉左边框居中的收缩按钮 */
.sj-side-toggle{display:none;position:relative;margin-left:auto;align-items:center;gap:5px;
  height:28px;padding:0 11px;border:1px solid var(--card-border);border-radius:999px;
  background:var(--panel);color:var(--accent);font-size:11.5px;font-weight:700;cursor:pointer;
  transition:background .22s,color .22s,border-color .22s,transform .18s,box-shadow .22s,opacity .25s}
.sj-side-toggle i{font-size:13px;opacity:1;transition:transform .32s cubic-bezier(.22,.61,.36,1)}
.sj-side-toggle:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:0 8px 18px -12px rgba(99,102,241,.9)}
.sj-side-toggle:active{transform:scale(.95)}
/* 未展开时的呼吸光环，提示这里可以点 */
.sj-side-toggle::after{
  content:"";position:absolute;inset:-3px;border-radius:999px;border:1.5px solid var(--accent);
  opacity:0;pointer-events:none;animation:sjSidePulse 2.4s ease-out infinite;
}
.sj-side-toggle.on{background:var(--accent);border-color:transparent;color:#fff}
.sj-side-toggle.on i{transform:rotate(180deg)}
.sj-side-toggle.on::after{animation:none;opacity:0}
@keyframes sjSidePulse{
  0%{opacity:.5;transform:scale(.94)}
  70%{opacity:0;transform:scale(1.1)}
  100%{opacity:0;transform:scale(1.1)}
}
/* 遮罩 / 收缩按钮在电脑端都不出现 */
.sj-side-mask{display:none}
.sj-collapse{display:none}

@media(max-width:760px){
  /* 开关：固定悬浮在顶栏右下方，页面滚动时始终可见；抽屉打开后自动隐藏 */
  .sj-side-toggle{
    display:inline-flex;position:fixed;right:12px;top:calc(var(--top) + 10px);
    margin-left:0;z-index:90;height:30px;padding:0 12px;
    background:#fff;border-color:#e4e8f2;
    box-shadow:0 10px 24px -14px rgba(18,14,45,.5);
  }
  body.sj-drawer-open .sj-side-toggle{opacity:0;pointer-events:none}

  /* 遮罩：点空白处收起抽屉 */
  .sj-side-mask{
    display:block;position:fixed;inset:0;background:rgba(17,20,32,.46);
    z-index:165;opacity:0;pointer-events:none;transition:opacity .3s ease;
  }
  .sj-side-mask.on{opacity:1;pointer-events:auto}
  body.sj-drawer-open{overflow:hidden}

  /* 抽屉本体：只负责整体滑入，内部内容单独滚动；白色实底，不再透出页面内容 */
  .sj-side{
    position:fixed;top:0;right:0;bottom:0;left:auto;
    display:flex;flex-direction:column;gap:0;
    width:min(340px,88vw);height:auto;max-height:none;
    padding:0;overflow:hidden;
    background:#fff;z-index:170;
    border-left:1px solid #e9edf5;
    box-shadow:-24px 0 60px -30px rgba(18,14,45,.45);
    transform:translateX(105%);visibility:hidden;
    transition:transform .34s cubic-bezier(.22,.61,.36,1),visibility .34s;
  }
  .sj-side.open{transform:translateX(0);visibility:visible}
  .sj-side-scroll{
    display:flex;flex-direction:column;gap:12px;
    width:100%;height:100%;padding:14px 12px 24px;box-sizing:border-box;
    overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
    background:#fff;
  }
  .sj-side-scroll::-webkit-scrollbar{display:none;width:0;height:0}

  /* 卡片：整行拉满 + 浅灰实底 + 细边，和广告入驻抽屉一样的层次 */
  .sj-side .sj-box{
    width:100%;box-sizing:border-box;margin:0;padding:16px 15px;
    border-radius:16px;background:#f6f8fc;border:1px solid #e9edf5;
    box-shadow:0 1px 2px rgba(20,32,64,.05);
    transform:none;
  }
  .sj-side .sj-box:hover{transform:none;border-color:#e9edf5;box-shadow:0 1px 2px rgba(20,32,64,.05)}

  /* 标题：图标做成彩色圆角标签，标题字号/字重与正文拉开层次 */
  .sj-side .sj-box h4{margin:0 0 12px;font-size:13.5px;font-weight:800;gap:8px;letter-spacing:.2px}
  .sj-side .sj-box h4 i{
    flex:none;width:24px;height:24px;border-radius:8px;display:grid;place-items:center;
    font-size:13px;color:var(--accent);background:var(--primary-light,#eef0ff);border:1px solid #e6e9f7;
  }

  /* 试卷信息：左右两列各占一半，值贴到卡片右内边距，右侧不再留大片空白 */
  .sj-side .sj-info li{padding:9px 0;gap:14px;border-bottom:1px solid #e8ecf4}
  .sj-side .sj-info span{flex:none;min-width:64px;font-size:11.5px}
  .sj-side .sj-info b{flex:1;text-align:right;font-size:12px}
  .sj-side .sj-more-line{margin-top:10px}
  .sj-side .sj-rank a{font-size:12px}
  .sj-side .sj-note p{font-size:12px;line-height:1.8}

  /* 收缩按钮：白底 + 细边 + 投影，贴在抽屉左侧垂直中线 */
  .sj-collapse{
    display:grid;position:fixed;top:50%;left:calc(100vw - min(340px,88vw));
    transform:translateY(-50%);translate:calc(min(340px,88vw) + 12px) 0;
    width:22px;height:64px;padding:0;cursor:pointer;
    border:1px solid #e4e8f2;border-left:0;border-radius:0 12px 12px 0;
    background:#fff;color:#8b93a7;z-index:171;place-items:center;
    box-shadow:8px 8px 22px -10px rgba(18,14,45,.38);
    opacity:0;visibility:hidden;pointer-events:none;
    transition:translate .34s cubic-bezier(.22,.61,.36,1),opacity .26s ease,visibility .34s,
      width .22s ease,background .22s ease,color .22s ease;
  }
  .sj-side.open ~ .sj-collapse{translate:0 0;opacity:1;visibility:visible;pointer-events:auto}
  .sj-collapse i{font-size:12px}
  .sj-collapse:hover,.sj-collapse:focus-visible{width:28px;background:var(--accent);border-color:var(--accent);color:#fff}
}