/* 案例检索网页版。视觉与本地版（pipeline/build_case_browser.py）一致：
   轻量科技蓝 + 灰蓝文字层级，色板取自 miniprogram/app.wxss。
   与本地版的差别：多了登录层、手机版卡片布局，少了内部列（可信度 / 原图 / 入库时间）。 */
:root{
  --accent:#3B7DF7;--accent-deep:#2456D9;--accent-soft:#EAF1FE;
  --ink:#1F2937;--body:#4B5563;--muted:#94A3B8;--line:#EDF1F7;--warn:#B8860B;--bad:#C0392B;
  --maxw:1360px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:-apple-system,"PingFang SC","Helvetica Neue",sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;background:#F4F7FB}
#app{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}
[hidden]{display:none !important}

/* ── 登录层 ── */
.gate{position:fixed;inset:0;background:linear-gradient(135deg,#3B7DF7 0%,#2456D9 100%);display:flex;align-items:center;justify-content:center;padding:20px;z-index:20}
.card{background:#fff;border-radius:18px;padding:30px 28px 24px;width:100%;max-width:380px;box-shadow:0 12px 40px rgba(20,40,100,.25);text-align:center}
.card h2{margin:0 0 6px;font-size:20px;font-weight:600}

.gsub{margin:0 0 18px;font-size:13px;color:var(--muted);line-height:1.6}
.card input{display:block;width:100%;margin:0 0 10px;padding:11px 14px;border:1.5px solid var(--line);border-radius:12px;font-size:15px;background:#FAFCFF;color:var(--ink)}
.card input:focus{outline:none;border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px rgba(59,125,247,.12)}
.card input::placeholder{color:var(--muted)}
button.primary{width:100%;margin-top:6px;padding:12px;border:0;border-radius:12px;background:var(--accent);color:#fff;font-size:15px;font-weight:600;cursor:pointer}
button.primary:hover{background:var(--accent-deep)}
button.primary:disabled{opacity:.6;cursor:default}
.gerr{min-height:20px;margin-top:10px;font-size:13px;color:var(--bad)}
.glink{display:inline-block;margin-top:6px;font-size:13px;color:var(--accent);cursor:pointer}
.qrbox{display:flex;justify-content:center;margin:6px 0 10px}
.qrbox svg{width:180px;height:180px}
.secret{font-size:12px;color:var(--muted);margin-bottom:14px;line-height:1.7;word-break:break-all}
.secret code{display:block;font-size:14px;color:var(--ink);letter-spacing:1px;user-select:all}

/* ── 顶栏 ── */
header{background:linear-gradient(135deg,#3B7DF7 0%,#2456D9 100%);color:#fff;padding:12px 24px;flex:0 0 auto}
.hd-inner{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;gap:14px}
header .logo-img{width:40px;height:40px;flex:0 0 auto}
header h1{font-size:18px;margin:0;font-weight:600;letter-spacing:.3px;white-space:nowrap}
header .sub{font-size:12px;color:rgba(255,255,255,.78);margin-top:4px}
header .tag{font-size:12px;background:rgba(255,255,255,.18);padding:3px 10px;border-radius:8px;font-weight:500;margin-left:6px}
header .sp{flex:1}
.stats{display:flex;gap:10px}
.stat{background:rgba(255,255,255,.15);border-radius:12px;padding:6px 14px;text-align:center}
.stat b{display:block;font-size:18px;font-weight:600}
.stat span{font-size:11px;color:rgba(255,255,255,.75)}
.user{display:flex;align-items:center;gap:12px;font-size:13px;white-space:nowrap}
.user a{color:rgba(255,255,255,.85);cursor:pointer;text-decoration:none}
.user a:hover{color:#fff;text-decoration:underline}
.quota{background:rgba(255,255,255,.18);padding:3px 10px;border-radius:8px;font-size:12px}
.quota.warn{background:rgba(255,200,80,.35)}

/* ── 搜索条 ── */
.bar{padding:12px 24px;background:#fff;border-bottom:1px solid var(--line);flex:0 0 auto;box-shadow:0 2px 10px rgba(37,78,168,.04);z-index:3}
.bar-inner{max-width:var(--maxw);margin:0 auto;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
#q{flex:1;min-width:240px;padding:10px 14px;border:1.5px solid var(--line);border-radius:12px;font-size:14px;color:var(--ink);background:#FAFCFF}
#q::placeholder{color:var(--muted)}
#q:focus{outline:none;border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px rgba(59,125,247,.1)}
#clear{padding:9px 15px;border:none;border-radius:12px;background:var(--accent-soft);color:var(--accent-deep);cursor:pointer;font-size:13px;font-weight:500}
#clear:hover{background:#DCE9FD}
#cnt{font-size:13px;color:var(--muted);white-space:nowrap}
.mfilters{display:none}

main{flex:1 1 auto;overflow:auto;padding:16px 24px 24px}
/* 表格 */
table{width:100%;max-width:var(--maxw);margin:0 auto;table-layout:fixed;border-collapse:separate;border-spacing:0;background:#fff;font-size:14px;border-radius:16px;overflow:hidden;box-shadow:0 4px 16px rgba(37,78,168,.05)}
th:nth-child(1),td:nth-child(1),th:nth-child(2),td:nth-child(2),th:nth-child(4),td:nth-child(4){text-align:center}
td:nth-child(1),td:nth-child(2),td:nth-child(4){white-space:nowrap}
thead tr:first-child th{position:sticky;top:0;background:var(--accent-soft);color:var(--accent-deep);padding:12px;text-align:left;font-weight:600;white-space:nowrap;z-index:3;border-bottom:1px solid #D7E5FC}
thead tr.frow th{position:sticky;top:43px;background:#F7FAFF;padding:6px 8px;z-index:2;border-bottom:1px solid #E3EBF7}
.fin,.fsel{width:100%;border:1px solid #DCE4F0;border-radius:8px;padding:5px 8px;font-size:12.5px;font-family:inherit;color:var(--ink);background:#fff;min-width:0}
.fin::placeholder{color:#B6C2D4}
.fin:focus,.fsel:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(59,125,247,.12)}
.fin.on,.fsel.on{border-color:var(--accent);background:#F2F7FF;font-weight:600}
tbody td{padding:12px;border-bottom:1px solid var(--line);vertical-align:middle;color:var(--body);line-height:1.55;overflow-wrap:anywhere}
tbody td b{font-weight:600;color:var(--ink)}
tbody tr:last-child td{border-bottom:none}
tbody tr{cursor:pointer;transition:background .12s}tbody tr:hover{background:#F7FAFF}
.empty-cell{text-align:center !important;color:var(--muted);padding:70px 20px !important;font-size:15px;line-height:2}
.empty-cell span{font-size:13px;color:#B0BCCD}
.more-cell{text-align:center !important;color:var(--muted);padding:14px !important}
.sub-dir{color:var(--muted);font-weight:400;font-size:12.5px}
.fail{color:var(--bad);font-weight:600}
/* 分布 */
.dist{max-width:var(--maxw);margin:0 auto 14px;background:#fff;border:1px solid #E3EBF7;border-radius:14px;padding:12px 16px;box-shadow:0 2px 10px rgba(37,78,168,.04);font-size:13px}
.dist-hd{color:var(--muted);font-size:12px;margin-bottom:8px}
.dist-hd b{color:var(--accent-deep);font-size:13px}
.dist-list{display:flex;flex-wrap:wrap;gap:8px}
.dist-item{display:flex;align-items:center;gap:6px;background:var(--accent-soft);border-radius:8px;padding:4px 11px;cursor:pointer}
.dist-item:hover{background:#DCE9FD}
.dist-item b{color:var(--accent-deep);font-weight:600}
.dist-item span{color:var(--muted);font-size:12px}
.notice{max-width:var(--maxw);margin:0 auto 12px;background:#FFF8E6;border:1px solid #F5E1A4;color:#7A5A00;border-radius:12px;padding:10px 14px;font-size:13px}
.notice.bad{background:#FDECEC;border-color:#F3B9B9;color:#8A1F1F}
/* 抽屉 */
#drawer{position:fixed;top:0;right:-560px;width:540px;max-width:92vw;height:100vh;height:100dvh;background:#fff;box-shadow:-6px 0 28px rgba(37,78,168,.16);transition:right .25s;z-index:30;display:flex;flex-direction:column}
#drawer.open{right:0}
#drawer .dh{background:linear-gradient(135deg,#3B7DF7 0%,#2456D9 100%);color:#fff;padding:16px 20px;display:flex;justify-content:space-between;align-items:center;font-weight:600;gap:12px}
#drawer .dh b{overflow-wrap:anywhere}
#dClose{background:none;border:none;color:#fff;font-size:22px;cursor:pointer;flex:0 0 auto}
#drawer .db{padding:16px 20px;overflow:auto;flex:1}
.kv{display:flex;border-bottom:1px solid var(--line);padding:9px 0;font-size:13.5px}
.kv b{flex:0 0 118px;color:var(--muted);font-weight:500}
.kv span{flex:1;overflow-wrap:anywhere;color:var(--body)}
#mask{position:fixed;inset:0;background:rgba(31,41,55,.28);display:none;z-index:29}#mask.on{display:block}
footer{flex:0 0 auto;background:#fff;border-top:1px solid var(--line);padding:8px 24px;font-size:12px;color:var(--muted)}
.ft-inner{max-width:var(--maxw);margin:0 auto;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.cards{display:none}
main::-webkit-scrollbar,#drawer .db::-webkit-scrollbar{width:8px;height:8px}
main::-webkit-scrollbar-thumb,#drawer .db::-webkit-scrollbar-thumb{background:#D5DCE8;border-radius:8px}

/* ── 手机版（≤720px）：表格换成卡片，筛选框折成一块面板 ── */
@media (max-width:720px){
  header{padding:10px 14px}
  .hd-inner{gap:10px;flex-wrap:wrap}
  header .logo-img{width:32px;height:32px}
  header h1{font-size:16px}
  header .tag{display:none}
  header .sub{display:none}
  header .sp{display:none}
  .stats{display:none}
  .user{margin-left:auto;font-size:12px;gap:8px}
  .bar{padding:10px 14px}
  #q{min-width:0;font-size:15px}
  #cnt{width:100%;text-align:right}
  .mfilters{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 14px 10px;background:#fff;border-bottom:1px solid var(--line)}
  .mfilters .fin,.mfilters .fsel{padding:9px 10px;font-size:14px}
  .mfilters #mSchool{grid-column:1 / -1}
  main{padding:12px 12px 20px}
  #tbl{display:none}
  .cards{display:block}
  .ccard{background:#fff;border-radius:14px;padding:12px 14px;margin-bottom:10px;box-shadow:0 2px 10px rgba(37,78,168,.05);cursor:pointer}
  .ccard .c1{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--muted);margin-bottom:4px}
  .ccard .c2{font-size:15px;font-weight:600;color:var(--ink);margin-bottom:8px}
  .ccard .c3{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;font-size:13.5px;color:var(--body)}
  .ccard .c3 i{font-style:normal;color:var(--muted);font-size:12px;padding-top:2px}
  .ccard .c3 b{font-weight:600;color:var(--ink)}
  .cempty{text-align:center;color:var(--muted);padding:50px 20px;font-size:14px;line-height:2}
  .cmore{text-align:center;color:var(--muted);padding:12px;font-size:13px}
  .dist{margin-bottom:10px;padding:10px 12px}
  #drawer{width:100vw;max-width:100vw;right:-100vw}
  .kv b{flex-basis:96px}
  footer{padding:8px 14px;font-size:11px}
  .ft-inner{justify-content:center}
  #ftRight{display:none}
  /* 手机上分布区只留最多的 8 种，不然一屏全是标签 */
  .dist-item:nth-child(n+9){display:none}
}