/* ============ 配色体系 ============
   主体色: 白 —— 页面底色、卡片、面板统一用白。
   辅助色: 黑 / 金(鎏金) / 紫 / 红 / 蓝 / 浅灰, 各司其职:
     蓝 = 操作色(链接、主按钮、焦点环);   金 = 品牌强调(logo、导航激活条、品牌字);
     紫 = 资质类标识(域名、键详情);        红 = 风险与漏洞;
     黑 = 深色块与浮层(toast、遮罩);       浅灰 = 底色分层与分隔线(bg2/bg3/line)。
   夜间模式(星空黑)在下方 [data-skin="night"] 整组覆盖同一套变量, 组件样式零改动。 */
:root{
  --bg:#ffffff; --bg0:#ffffff; --bg2:#f7f8fa; --bg3:#eef1f5;
  --card:#ffffff; --card2:#fbfcfd; --hover:#f4f6f9;
  --side:#ffffff;
  --line:#e6e9ee; --line2:#d5dae1;
  --tx:#0f1115; --mut:#5c6675; --dim:#949cab;
  --ink:#0f1115;
  --blue:#1857d6; --blue2:#0f47b8; --bluebg:rgba(24,87,214,.07); --lineb:rgba(24,87,214,.45);
  --gold:#a8802f; --goldbg:rgba(168,128,47,.10);
  --violet:#976ea8; --violetbg:rgba(151,110,168,.11);
  --ruby:#d92d20; --rubybg:rgba(217,45,32,.08);
  --glass:rgba(255,255,255,.9);
  --scrim:rgba(15,17,21,.30);
  --sel:rgba(24,87,214,.16);
  --net-dot:rgba(15,17,21,.11); --net-line:rgba(15,17,21,.055);
  --toastbg:#0f1115; --toastfg:#ffffff;
  --scroll:#d8dde4; --scroll2:#c2c9d2;
  /* 兼容别名（渲染原语引用） */
  --btn:#1857d6; --btnhover:#0f47b8;
  --ok:#1857d6; --warn:#a8802f; --bad:#d92d20;
  --agate:#1857d6; --yel:#a8802f; --cyan:#1857d6;
  --sh:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.05);
  --sh2:0 4px 16px rgba(16,24,40,.07);
  --mono:"JetBrains Mono","SFMono-Regular",Consolas,"Courier New",monospace;
  --sans:-apple-system,"Inter","SF Pro Text","PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",sans-serif;
}
/* ============ 夜间模式：星空黑 ============
   近黑的深空底(#0b0e14) + 灰白正文, 正文对比度 > 13:1, 字看得清;
   金与蓝整体提亮, 深底上强调色与操作色依然分明。 */
:root[data-skin="night"]{
  --bg:#0b0e14; --bg0:#0b0e14; --bg2:#11151d; --bg3:#171d28;
  --card:#0f131b; --card2:#12161f; --hover:#161c27;
  --side:#0a0d12;
  --line:#1f2632; --line2:#2c3644;
  --tx:#e9edf4; --mut:#9aa5b6; --dim:#7b8798;
  --ink:#e9edf4;
  --blue:#5b9dff; --blue2:#84b4ff; --bluebg:rgba(91,157,255,.14); --lineb:rgba(91,157,255,.45);
  --gold:#d9b463; --goldbg:rgba(217,180,99,.14);
  --violet:#b492d6; --violetbg:rgba(180,146,214,.15);
  --ruby:#ff6255; --rubybg:rgba(255,98,85,.15);
  --glass:rgba(11,14,20,.86);
  --scrim:rgba(0,0,0,.55);
  --sel:rgba(91,157,255,.28);
  --toastbg:#11151d; --toastfg:#f2f5fa;
  --scroll:#2c3644; --scroll2:#3b4757;
  --btn:#2557d6; --btnhover:#3a6ae8;
  --ok:#5b9dff; --warn:#d9b463; --bad:#ff6255;
  --agate:#5b9dff; --yel:#d9b463; --cyan:#5b9dff;
  --sh:0 1px 2px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.4);
  --sh2:0 8px 26px rgba(0,0,0,.55);
}
*{box-sizing:border-box;margin:0;padding:0}
::selection{background:var(--sel)}
body{background:var(--bg);color:var(--tx);font:13.5px/1.62 var(--sans);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
/* ===== 背景底纹：几何线连点 =====
   白昼主题专有、刻意压得很淡(只要一层质感, 不抢内容); 夜间是纯星空黑, 整层隐藏。
   点靠零长子路径 + round 线帽画成圆点, 所以一条 path 就是全部点 / 全部线。 */
.bgnet{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.bgnet-line{fill:none;stroke:var(--net-line);stroke-width:1}
.bgnet-dot{fill:none;stroke:var(--net-dot);stroke-width:5;stroke-linecap:round}
:root[data-skin="night"] .bgnet{display:none}
a{color:var(--blue);text-decoration:none;transition:color .12s ease}
a:hover{color:var(--blue2)}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:var(--scroll2)}
::-webkit-scrollbar-track{background:transparent}

/* ===== 左侧固定导航 ===== */
#sidebar{position:fixed;top:0;left:0;bottom:0;width:232px;z-index:20;display:flex;flex-direction:column;
  background:var(--side);border-right:1px solid var(--line);padding:18px 12px 14px}
.sb-brand{display:flex;align-items:center;gap:10px;padding:0 8px;margin-bottom:20px}
.sb-brand a{display:flex;align-items:center;gap:10px;color:var(--tx)}
/* 品牌标记: 官网是两版 logo —— 深色版(白底黑凤凰, 浅色场景)与浅色版(深底白凤凰, 深色场景)。
   两版叠放在同一尺寸里, 按皮肤显示其中一张, 圆角裁切; 夜间不会像单版那样糊成一块。 */
.sb-mark{position:relative;display:block;width:30px;height:30px;flex:none;border-radius:8px;overflow:hidden}
.hero-mark{position:relative;display:block;width:120px;height:120px;flex:none;border-radius:26px;
  overflow:hidden;box-shadow:var(--sh2);margin-bottom:22px}
/* 绝对定位的元素 display 计算值本就是 block, 这里不写 display ——
   否则 "display:block" 会盖掉下面 .mk-night 的 display:none(特异性更高) */
.sb-mark img,.hero-mark img{position:absolute;inset:0;width:100%;height:100%}
.mk-night{display:none}
:root[data-skin="night"] .mk-day{display:none}
:root[data-skin="night"] .mk-night{display:block}
.sb-brand b{display:block;font-size:15px;font-weight:700;line-height:1.2;color:var(--tx)}
.sb-brand small{display:block;color:var(--gold);font-size:9px;letter-spacing:2.6px;font-family:var(--mono);margin-top:2px}
/* 次级导航(榜单的四个维度): 缩进挂在上级下面, 不用分组标题 —— 位置本身就是分组 */
.sb-item.sub{padding-left:26px;font-size:12.5px}
.sb-item.sub .sb-ic{font-size:10px}
.sb-sep{height:1px;background:var(--line);margin:12px 10px}
/* 导航区自己滚: 榜单四维 + 知识库六工具摊开后一屏放不下, 而"日间/夜间"与品牌语
   是该一直看得见的 —— 让中间那段滚, 两头钉住。 */
.sb-scroll{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.sb-nav{display:flex;flex-direction:column;gap:1px}
.sb-item{position:relative;display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:7px;
  color:var(--mut);font-size:13px;transition:background .1s ease,color .1s ease}
.sb-item:hover{color:var(--tx);background:var(--hover)}
.sb-item.on{color:var(--tx);background:var(--hover);font-weight:600}
.sb-item.on::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;border-radius:2px;background:var(--gold)}
.sb-item .sb-ic{width:16px;flex:none;text-align:center;color:var(--dim);font-size:12.5px}
.sb-item.on .sb-ic,.sb-item:hover .sb-ic{color:var(--gold)}
.sb-item.on .sb-ic{color:var(--blue)}
/* 主题切换: 白昼 / 星空黑 */
.sb-theme{display:flex;align-items:center;gap:10px;margin-top:auto;padding:7px 10px;border-radius:7px;
  color:var(--mut);font-size:12.5px;cursor:pointer;border:1px solid var(--line);background:var(--bg2);
  transition:background .1s ease,color .1s ease,border-color .1s ease}
.sb-theme:hover{color:var(--tx);background:var(--hover);border-color:var(--line2)}
.sb-theme .sb-ic{width:16px;flex:none;text-align:center;color:var(--gold);font-size:12.5px}
/* 主题与语言两个开关并排, 由外层撑到侧栏底部 */
.sb-tools{display:flex;gap:8px;margin-top:auto}
.sb-tools .sb-theme{margin-top:0;flex:1;justify-content:center}
.sb-foot{margin-top:10px;padding:10px 10px 0;border-top:1px solid var(--line)}
.sb-foot span{display:block;color:var(--dim);font-size:10.5px;line-height:1.7}

/* ===== 布局骨架 ===== */
#app{position:relative;z-index:1;min-height:100vh;margin-left:232px;display:flex;flex-direction:column}
#main{flex:1;padding:0 0 90px;min-width:0}
.container{max-width:1180px;margin:0 auto;padding:0 28px}
.container.wide{max-width:1320px}

/* ===== 顶部检索条 ===== */
#topbar{position:sticky;top:0;z-index:10;display:none;align-items:center;gap:18px;
  padding:10px 26px;background:var(--glass);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
#topbar.on{display:flex}
.tb-left{display:flex;align-items:center;gap:10px;flex:none;min-width:150px}
.tb-home{width:28px;height:28px;border:1px solid var(--line);border-radius:7px;display:flex;align-items:center;
  justify-content:center;color:var(--mut);font-size:13px;transition:border-color .1s ease,color .1s ease}
.tb-home:hover{color:var(--blue);border-color:var(--line2)}
.tb-sep{width:1px;height:16px;background:var(--line)}
.tb-title{color:var(--dim);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.tb-search{display:flex;align-items:center;gap:8px;flex:1;max-width:640px;margin:0 auto;
  background:var(--bg2);border:1px solid var(--line2);border-radius:8px;padding:4px 4px 4px 12px;
  transition:border-color .12s ease,box-shadow .12s ease,background .12s ease}
.tb-search:focus-within{background:var(--card);border-color:var(--blue);box-shadow:0 0 0 3px var(--bluebg)}
.tb-search .glyph{color:var(--dim);font-size:13px;flex:none}
.tb-search input{flex:1;background:transparent;border:0;outline:0;color:var(--tx);font-size:13px;min-width:0;padding:6px 0}
.tb-search input::placeholder{color:var(--dim)}
.tb-go{flex:none;border:0;border-radius:6px;background:var(--blue);color:#fff;font-size:12.5px;font-weight:600;
  padding:6px 14px;cursor:pointer;transition:background .1s ease}
.tb-go:hover{background:var(--blue2)}
.tb-right{flex:none;min-width:150px;text-align:right}
.tb-hint{color:var(--dim);font-size:11.5px}

/* ===== 元素升起淡入（开场屏与首页共用一条曲线） ===== */
@keyframes heroRise{0%{opacity:0;transform:translateY(32px)}to{opacity:1;transform:translateY(0)}}
.hero-rise{opacity:0;animation:heroRise 1.1s cubic-bezier(.19,1,.22,1) forwards}
@media(prefers-reduced-motion:reduce){.hero-rise{animation:none;opacity:1}}

/* ===== 开场加载屏（照搬官网 xuankunsec.com 的实现） =====
   结构: 四角细框 + 左上品牌 / 右上年份 + 居中品牌主张(逐字升起) + 左下状态 / 右下三位进度 + 底部进度线。
   离场是整屏向上滑出(不是淡出), 滑完才渲染首页。
   时间参数与官网一致: 逐字步进 55ms、进度 2100ms(easeOutExpo)、滑出 1000ms。
   颜色走主题变量, 所以白昼/夜间自动适配。 */
#intro{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;justify-content:space-between;
  background:var(--bg2);color:var(--tx);padding:28px 5vw 34px;
  transition:transform 1s cubic-bezier(.19,1,.22,1);will-change:transform}
#intro.is-leaving{transform:translateY(-100.5%)}
body.intro-lock{overflow:hidden}
.intro-top{display:flex;align-items:center;justify-content:space-between}
.intro-bottom{width:100%}
.intro-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;width:100%;padding:0 5vw;
  animation:introBreath 4.6s ease-in-out 2.1s infinite}
.intro-title{margin-top:28px;text-align:center;font-weight:900;line-height:1.14;letter-spacing:-.015em;color:var(--tx)}
.intro-line{display:block;overflow:hidden;padding-bottom:.06em;font-size:clamp(2.4rem,9vw,8rem)}
.intro-char{display:inline-block;transform:translateY(118%);animation:introCharUp .85s cubic-bezier(.19,1,.22,1) forwards}
@keyframes introCharUp{to{transform:translateY(0)}}
.intro-fade{opacity:0;animation:introFade .9s cubic-bezier(.19,1,.22,1) forwards}
@keyframes introFade{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes introBreath{0%,to{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.012)}}
.intro-accent{animation:accentGlow 2.8s ease-in-out 1.9s infinite}
@keyframes accentGlow{0%,to{text-shadow:0 0 0 rgba(24,87,214,0)}50%{text-shadow:0 0 22px rgba(24,87,214,.42)}}
.intro-corner{position:absolute;width:18px;height:18px;border:0 solid var(--line2);opacity:0;
  animation:introFade 1s cubic-bezier(.19,1,.22,1) forwards}
.intro-corner.tl{border-left-width:1px;border-top-width:1px}
.intro-corner.tr{border-right-width:1px;border-top-width:1px}
.intro-corner.bl{border-left-width:1px;border-bottom-width:1px}
.intro-corner.br{border-right-width:1px;border-bottom-width:1px}
.in-brand{font-size:14px;font-weight:700;letter-spacing:.025em;color:var(--tx)}
.in-year,.in-hint,.in-kicker,.in-tagline{color:var(--dim);font-family:var(--mono);font-size:12px}
.in-year,.in-hint{letter-spacing:.3em}
.in-kicker{letter-spacing:.4em}
.in-tagline{margin-top:28px;text-align:center;letter-spacing:.24em}
.in-num{color:var(--tx);font-family:var(--mono);font-size:24px;font-weight:500;font-variant-numeric:tabular-nums}
.intro-botrow{display:flex;align-items:flex-end;justify-content:space-between}
.in-track{margin-top:16px;width:100%;height:1px;background:var(--line)}
.intro-progress{position:relative;overflow:visible;width:0;height:1px;background:var(--tx)}
.intro-progress::after{content:"";position:absolute;top:-1px;right:-40px;width:40px;height:3px;
  background:linear-gradient(90deg,transparent,var(--blue));filter:blur(1px)}

/* ===== 首页（品牌区 + 唯一检索入口） =====
   三段: 品牌段(标识/中文名/拉丁名) → 检索段 → 品牌语。段间距比段内间距大一档,
   层次靠"离得远近"读出来, 不靠字号堆砌。圆角与卡片同尺(10px), 不再单开一档。 */
.hero{min-height:calc(100vh - 40px);display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:40px 28px 88px;text-align:center}
.hero-core{display:flex;flex-direction:column;align-items:center}
.hero-brand{font-size:clamp(30px,3.8vw,42px);font-weight:700;color:var(--tx);line-height:1.05}
.hero-brand em{font-style:normal;color:var(--gold);font-weight:600;margin-left:10px}
/* 字距会让末字后多出一格, 居中时整行偏左 —— text-indent 补回半格不到的一格 */
.hero-latin{margin-top:12px;color:var(--gold);font-family:var(--mono);font-size:11px;letter-spacing:7px;text-indent:7px}
/* 品牌语收在检索入口下方, 用次级色 —— 它是对上面两个名字的注脚, 不跟拉丁名抢金 */
.hero-slogan{margin-top:24px;color:var(--mut);font-size:12.5px;letter-spacing:2px}
/* 入场时序: 标识 → 中文名 → 拉丁名 → 检索 → 品牌语, 逐段升起 */
.hero-core>*:nth-child(1){animation-delay:80ms}
.hero-core>*:nth-child(2){animation-delay:220ms}
.hero-core>*:nth-child(3){animation-delay:320ms}
.hero>.bigsearch{animation-delay:440ms}
.hero>.hero-slogan{animation-delay:580ms}
.bigsearch{display:flex;align-items:stretch;max-width:720px;width:100%;margin-top:38px;border-radius:10px;overflow:hidden;
  background:var(--card);border:1px solid var(--line2);box-shadow:var(--sh2);
  transition:border-color .15s ease,box-shadow .15s ease}
.bigsearch:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px var(--bluebg),var(--sh2)}
.bigsearch .glyph{display:flex;align-items:center;padding-left:18px;color:var(--dim);font-size:15px;flex:none}
.bigsearch input{flex:1;background:transparent;border:0;outline:0;color:var(--tx);padding:16px 14px;font-size:14.5px;min-width:0}
.bigsearch input::placeholder{color:var(--dim)}
.bigsearch .go{border:0;background:var(--blue);color:#fff;padding:0 30px;font-size:13.5px;font-weight:600;cursor:pointer;
  transition:background .1s ease}
.bigsearch .go:hover{background:var(--blue2)}

/* ===== 页面标题区 ===== */
.pagehead{padding:30px 0 10px;border-bottom:1px solid var(--line);margin-bottom:16px}
.pagehead h2{font-size:20px;font-weight:700;display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* ===== 详情页 ===== */
.backlink{display:inline-flex;align-items:center;gap:6px;color:var(--mut);font-size:12px;margin:18px 0 6px}
.backlink:hover{color:var(--blue)}
.ehead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 0 14px;border-bottom:1px solid var(--line)}
.ehead .etype{font-size:10px;font-weight:700;border-radius:5px;padding:4px 10px;flex:none;font-family:var(--mono)}
.ehead h2{font-size:23px;font-weight:700;font-family:var(--mono);color:var(--tx);word-break:break-all;line-height:1.3}
.ehead .sp{flex:1}
.ehead .acts{display:flex;gap:8px}
.esub{color:var(--mut);font-size:12.5px;margin:12px 0 0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.type.ip{background:var(--bluebg);color:var(--blue)}
.type.domain{background:var(--violetbg);color:var(--violet)}
.type.company{background:var(--goldbg);color:var(--gold)}
.type.cve{background:var(--rubybg);color:var(--ruby)}
.type.other{background:var(--bg3);color:var(--mut)}
.tag{display:inline-block;font-size:10.5px;color:var(--mut);border:1px solid var(--line);border-radius:5px;
  padding:2px 8px;background:var(--bg2)}
/* 详情两栏：左侧区块索引 + 右侧区块流 */
.elayout{display:grid;grid-template-columns:212px 1fr;gap:26px;align-items:start;margin-top:6px}
.easide{position:sticky;top:74px;max-height:calc(100vh - 100px);overflow:auto;padding-right:4px}
.easide .easide-h{padding:0 10px;margin-bottom:8px;color:var(--dim);font-size:10.5px;font-weight:600}
.idx{display:flex;flex-direction:column;gap:1px}
.idx-item{display:block;padding:5px 10px;border-radius:6px;color:var(--mut);font-size:12.5px;cursor:pointer;
  border-left:2px solid transparent;transition:color .1s ease,background .1s ease,border-color .1s ease;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.idx-item:hover{color:var(--tx);background:var(--hover)}
.idx-item.on{color:var(--tx);font-weight:600;background:var(--hover);border-left-color:var(--gold)}
.ebody{min-width:0}
@media(max-width:1080px){
  .elayout{grid-template-columns:1fr}
  .easide{display:none}
}

/* ===== 详情冠层: 首屏读数带 =====
   裁决 / 归属 / 注册 三件结论压在最上面。读数带是横向流: 短的"标签 值"对子一行铺四五对,
   长值独占一行 —— 同样 39 对, 两列网格要 39 行, 这里七八行就收住了。 */
.crown{display:flex;flex-direction:column;gap:9px;margin:16px 0 6px}
.crown-blk{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 16px 14px;box-shadow:var(--sh)}
.crown-blk>h4{font-size:10.5px;font-weight:700;color:var(--gold);letter-spacing:1.2px;margin-bottom:10px}
.brief{display:flex;flex-wrap:wrap;gap:7px 24px;align-items:baseline}
.bf{display:flex;align-items:baseline;gap:8px;min-width:0;max-width:100%}
.bf.wide{flex-basis:100%}
.bf-k{color:var(--dim);font-size:11.5px;white-space:nowrap;flex:none}
.bf-v{min-width:0;word-break:break-all}

/* ===== 详情明细: 按事实折叠 =====
   一组一件事。组头报"几块 / 几行", 收起时也能估出里面有多深。 */
.dgroup{background:var(--card);border:1px solid var(--line);border-radius:10px;margin:9px 0;overflow:hidden;box-shadow:var(--sh)}
.dgroup>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:11px 16px;
  font-size:12.5px;font-weight:600;color:var(--tx);background:var(--card2);transition:background .1s ease}
.dgroup>summary::-webkit-details-marker{display:none}
.dgroup>summary:hover{background:var(--hover)}
.dgroup>summary::before{content:"";width:3px;height:12px;border-radius:2px;background:var(--gold);flex:none}
.dg-t{flex:none}
.dg-c{color:var(--dim);font-size:11.5px;font-weight:400}
.dg-a{flex:1;text-align:right;color:var(--dim);font-size:10px;transition:transform .12s ease}
.dgroup[open]>summary{border-bottom:1px solid var(--line)}
.dgroup[open]>summary .dg-a{transform:rotate(180deg)}
.dg-b{padding:4px 16px 14px}
/* 折叠组里的区块: 组自己已经是卡片, 里面就不再套一层壳, 只用一条细分隔 */
.blk{padding:12px 0;border-bottom:1px solid var(--line)}
.blk:last-child{border-bottom:0;padding-bottom:2px}
.blk>h4{font-size:11.5px;font-weight:600;color:var(--mut);margin-bottom:9px}
/* 事实导航右侧的块数 */
.idx-item .idx-n{float:right;margin-left:6px;color:var(--dim);font-size:11px;font-weight:400;font-family:var(--mono)}

/* ===== 面板：装表格这类塞不进读数带的内容 =====
   与折叠组同族, 只是永远展开。头条右侧的计数是"里面有多少"的旁注。 */
.panel{background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:var(--sh);overflow:hidden}
.panel>.ph{display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid var(--line);background:var(--card2)}
.panel>.ph>.t{flex:1;min-width:0;font-size:12.5px;font-weight:600;color:var(--tx)}
.panel>.ph>.c{flex:none;color:var(--dim);font-size:11.5px}
.msg-pad{padding:20px 16px;color:var(--mut);font-size:12.5px}

/* 无折叠的区块容器: 与折叠组内部同一套排法(细分隔 + 裸区块), 用于抽屉与工具结果。
   抽屉只有 580px, 再套一层卡片壳要吃掉两成宽度, 换来的只是"看起来像个卡片"。 */
.shell{background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:var(--sh);
  padding:4px 16px 14px;margin:12px 0}

/* 骨架屏: 内容没到时先把位置占住, 免得页面先塌下去再弹起来 */
.skel{padding:14px 16px}
.skel i{display:block;height:11px;border-radius:5px;margin:9px 0;
  background:linear-gradient(90deg,var(--bg3) 25%,var(--bg2) 37%,var(--bg3) 63%);background-size:400% 100%;
  animation:skel 1.4s ease infinite}
.skel i:nth-child(1){width:38%}
.skel i:nth-child(2){width:74%}
.skel i:nth-child(3){width:56%}
@keyframes skel{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* 统计条: 页头下方一行读数("共 128 家 · 第 2 / 4 页") */
.statbar{display:flex;flex-wrap:wrap;gap:4px 20px;margin:12px 0 2px;color:var(--mut);font-size:12.5px}
.statbar .st-i{position:relative}
.statbar .st-i+.st-i::before{content:"";position:absolute;left:-11px;top:50%;margin-top:-1px;
  width:3px;height:3px;border-radius:50%;background:var(--line2)}

/* ===== 卡片区块 ===== */
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;margin:14px 0;overflow:hidden;box-shadow:var(--sh)}
.card>h3{font-size:12.5px;font-weight:600;color:var(--tx);padding:12px 16px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:10px;background:var(--card2)}
.card>h3::before{content:"";width:3px;height:12px;border-radius:2px;background:var(--gold);flex:none}
.card>h3 .sp{flex:1}
.card>h3 .cnt{color:var(--dim);font-size:11.5px;font-weight:400}
.card .bd{padding:14px 16px}
.badge{display:inline-block;font-size:10.5px;font-weight:600;border-radius:4px;padding:2px 8px}
.badge.yes{background:var(--bluebg);color:var(--blue)}
.badge.no{background:var(--bg3);color:var(--mut)}
.badge.warn{background:var(--goldbg);color:var(--gold)}
.badge.bad{background:var(--rubybg);color:var(--ruby)}
.badge.info{background:var(--bluebg);color:var(--blue)}
.badge.ip{background:var(--bluebg);color:var(--blue)}
.badge.domain{background:var(--violetbg);color:var(--violet)}
.badge.company{background:var(--goldbg);color:var(--gold)}
.badge.cve{background:var(--rubybg);color:var(--ruby)}
.pivot{border-bottom:1px dotted rgba(92,102,117,.45);cursor:pointer;color:inherit;
  transition:color .1s ease,border-color .1s ease}
.pivot:hover{color:var(--blue);border-bottom-color:var(--blue)}
/* 表格单元里的可点值: 行内元素在窄列里折行会断成多个行盒, 折行缝隙点不到
   (点击点落在两行之间时命中单元格而不是链接) —— 改成行内块, 整块一个盒子, 点哪都生效 */
td .pivot{display:inline-block;max-width:100%;vertical-align:top}
code.mono,code.cp{font-family:var(--mono);font-size:12px;background:var(--bg2);
  border:1px solid var(--line);border-radius:5px;padding:1px 7px;word-break:break-all;color:var(--tx)}
code.cp{cursor:pointer;transition:color .1s ease,border-color .1s ease}
code.cp:hover{color:var(--blue);border-color:var(--lineb)}
/* 图标指纹: 图形本体与指纹并排(榜单与详情页共用同一个渲染单元) */
.fwrap{display:inline-flex;align-items:center;gap:8px;max-width:100%}
.fico{width:20px;height:20px;flex:none;border-radius:4px;object-fit:contain;
  background:var(--bg2);border:1px solid var(--line)}
td .fwrap .fico{width:24px;height:24px}
/* 图标指纹整格可点(按指纹反查落在同一张图上的资产): 图与数字并排, 下划线会显得脏, 只在悬停时给颜色 */
a.icolink{text-decoration:none;border-bottom:0}
a.icolink:hover{border-bottom:0}
a.icolink:hover .fico{border-color:var(--lineb)}
a.icolink:hover code.mono{color:var(--blue);border-color:var(--lineb)}
pre.lg{font-family:var(--mono);font-size:11.5px;background:var(--bg2);border:1px solid var(--line);
  border-radius:8px;padding:11px 13px;white-space:pre-wrap;word-break:break-all;max-height:150px;overflow:auto;color:var(--tx)}

/* ===== 键值 ===== */
.kv{display:grid;grid-template-columns:186px 1fr;row-gap:10px;column-gap:16px}
.kv .k{color:var(--mut);font-size:12px}
.kv .v{min-width:0;word-break:break-all}
/* 确认度数(同一"标签 + 值"在多处出现的次数)。刻意做小做淡: 它是可信度的旁注, 不是值的一部分,
   抢了视觉就等于把一个统计量当成了数据本身。 */
.kv .kvn,.brief .kvn{margin-left:6px;font-size:10.5px;font-weight:600;color:var(--dim);
  border:1px solid var(--line);border-radius:4px;padding:0 5px;white-space:nowrap}

/* ===== 表格 ===== */
table{width:100%;border-collapse:collapse;font-size:12.5px}
th{color:var(--dim);text-align:left;font-weight:600;font-size:10.5px;padding:8px 11px;
  border-bottom:1px solid var(--line2);white-space:nowrap;background:var(--bg2)}
td{padding:9px 11px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--bluebg)}

/* ===== 瓦片 / 条形 ===== */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.tile{background:var(--bg2);border:1px solid var(--line);border-radius:9px;padding:12px 14px;transition:border-color .1s ease}
.tile:hover{border-color:var(--line2)}
.tile .n{font-size:18px;font-weight:700;font-family:var(--mono);color:var(--tx);line-height:1.25}
.tile .l{color:var(--mut);font-size:11.5px;margin-top:4px}
.bars .row{display:flex;align-items:center;gap:12px;margin:8px 0}
.bars .nm{width:126px;color:var(--mut);font-size:12px;text-align:right;flex:none}
.bars .bar{flex:1;height:9px;background:var(--bg3);border-radius:5px;overflow:hidden}
.bars .bar i{display:block;height:100%;border-radius:5px;
  background:linear-gradient(90deg,var(--blue),var(--violet));transition:width .9s cubic-bezier(.2,.8,.2,1)}
.bars .pv{width:82px;font-family:var(--mono);font-size:11.5px;color:var(--tx)}

/* ===== 端口手风琴 ===== */
.svc{border:1px solid var(--line);border-radius:9px;margin:9px 0;overflow:hidden;background:var(--card2)}
.svc:hover{border-color:var(--line2)}
.svc>.hd{display:flex;align-items:center;gap:11px;padding:10px 14px;cursor:pointer;flex-wrap:wrap;
  transition:background .08s ease}
.svc>.hd:hover{background:var(--hover)}
.svc>.hd .port{font-family:var(--mono);font-weight:700;font-size:13.5px;color:var(--blue)}
.svc>.hd .srv{flex:1;color:var(--mut);font-size:12px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.svc>.hd .arr{color:var(--dim);font-size:10px;transition:transform .12s ease}
.svc.open>.hd .arr{transform:rotate(180deg)}
.svc>.bd{border-top:1px solid var(--line);padding:2px 14px 12px;display:none;background:var(--card)}
.svc.open>.bd{display:block}
.svc h4{font-size:11px;color:var(--violet);font-weight:600;margin:12px 0 8px}

/* ===== 标签组 ===== */
.chipsub{color:var(--mut);font-size:12px;margin:10px 0 6px}
.chip{display:inline-block;font-size:11px;color:var(--mut);border:1px solid var(--line);border-radius:5px;
  padding:2px 8px;background:var(--bg2)}
a.pivot .chip{transition:color .1s ease,border-color .1s ease,background .1s ease}
a.pivot:hover .chip{color:var(--blue);border-color:var(--lineb);background:var(--bluebg)}
.chip b{color:var(--ruby);font-weight:600}
.kv .v .chip{margin:0 6px 4px 0}
/* 超长标签组: 固定高度内滚动(值仍全量保留在 DOM), 避免长列表把页面撑成长条 */
.chipbox{max-height:230px;overflow-y:auto;padding-right:4px}
.chipbox::-webkit-scrollbar{width:8px}
.chipbox::-webkit-scrollbar-thumb{background:var(--line2);border-radius:4px}
.chipbox::-webkit-scrollbar-track{background:transparent}

/* ===== 实体卡（企业 / 外企 / 关联资产） =====
   三种卡共用一套排法: 名称与状态一行、读数居中、标识码垫底。
   读数走 .bf —— 与详情页冠层同源, 于是卡片与详情页看着是一家人, 而不是两套设计。 */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:11px;margin:14px 0 4px}
.ecard{display:flex;flex-direction:column;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:13px 15px;cursor:pointer;color:inherit;box-shadow:var(--sh);
  transition:border-color .12s ease,box-shadow .12s ease,transform .12s ease}
.ecard:hover{border-color:var(--lineb);box-shadow:var(--sh2);transform:translateY(-1px)}
.ec-h{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap}
.ec-h .badge{flex:none;margin-top:1px}
.ec-n{flex:1;min-width:0;font-size:14.5px;font-weight:600;color:var(--tx);line-height:1.4;word-break:break-all}
.ec-b{gap:6px 18px}
/* margin-top:auto 让标识码沉到卡底 —— 同一行上的卡读数行数不同时, 标识码仍对齐 */
.ec-id{margin-top:auto;padding-top:9px;border-top:1px solid var(--line);color:var(--dim);
  font-family:var(--mono);font-size:11px;word-break:break-all}
.cc-empty{color:var(--dim);padding:26px;text-align:center;border:1px dashed var(--line2);border-radius:10px;background:var(--bg2)}

/* ===== 分页 ===== */
.pager{display:flex;align-items:center;gap:14px;padding:10px 2px 2px;color:var(--mut);font-size:12.5px}
.pager .pg{color:var(--blue);cursor:pointer}
.pager .pg:hover{color:var(--blue2);text-decoration:underline}
.pager .pginfo{user-select:none;color:var(--dim)}

/* ===== 加载 / 提示 ===== */
.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:70px 0;gap:14px}
.spin{width:26px;height:26px;border:3px solid var(--line);border-top-color:var(--blue);border-radius:50%;animation:spin .7s linear infinite}
.loading .lt{color:var(--dim);font-size:12.5px}
@keyframes spin{to{transform:rotate(360deg)}}
#toast{position:fixed;left:50%;bottom:32px;transform:translateX(-50%) translateY(14px);
  background:var(--toastbg);border:1px solid var(--line2);color:var(--toastfg);padding:9px 18px;border-radius:8px;font-size:12.5px;
  opacity:0;pointer-events:none;transition:.2s cubic-bezier(.2,.8,.2,1);z-index:99;max-width:80vw;box-shadow:var(--sh2)}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ===== 右侧键详情抽屉 ===== */
#drawer{position:fixed;inset:0;z-index:60;pointer-events:none}
#drawer.on{pointer-events:auto}
#drawer .dr-mask{position:absolute;inset:0;background:var(--scrim);opacity:0;transition:opacity .18s ease}
#drawer.on .dr-mask{opacity:1}
#drawer .dr-panel{position:absolute;top:0;right:0;bottom:0;width:min(580px,94vw);display:flex;flex-direction:column;
  background:var(--card);border-left:1px solid var(--line2);box-shadow:-18px 0 46px rgba(16,24,40,.14);
  transform:translateX(100%);transition:transform .22s cubic-bezier(.2,.8,.2,1)}
#drawer.on .dr-panel{transform:translateX(0)}
#drawer .dr-head{flex:none;display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line)}
#drawer .dr-head h3{flex:1;min-width:0;font-size:14.5px;font-weight:700;word-break:break-all;font-family:var(--mono)}
#drawer .dr-kind{flex:none;font-size:11px;color:var(--violet);background:var(--violetbg);border-radius:4px;padding:2px 8px;font-weight:600}
#drawer .dr-close{flex:none;color:var(--dim);font-size:13px;padding:3px 8px;border-radius:6px}
#drawer .dr-close:hover{color:var(--tx);background:var(--hover)}
#drawer .dr-body{flex:1;min-height:0;overflow:auto;padding:14px 16px 30px;background:var(--bg2)}
#drawer .dr-body .kv{grid-template-columns:138px 1fr}
#drawer .dr-empty{color:var(--dim);text-align:center;padding:40px 0;font-size:12.5px}
#drawer .dr-more{margin-top:6px;padding-top:12px;border-top:1px solid var(--line);font-size:12.5px}
#drawer .dr-more a{font-weight:600}

/* ===== 按钮与表单 ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line2);
  background:var(--card);color:var(--tx);border-radius:6px;padding:7px 15px;font-size:12.5px;cursor:pointer;
  transition:background .1s ease,border-color .1s ease;white-space:nowrap;font-family:inherit}
.btn:hover{background:var(--hover)}
.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600}
.btn.primary:hover{background:var(--blue2);border-color:var(--blue2)}
.btn.sm{padding:5px 12px;font-size:11.5px}
.toolbar{display:flex;align-items:center;gap:10px;margin:16px 0 4px;flex-wrap:wrap}
.toolbar input{flex:1;min-width:240px;max-width:600px;background:var(--card);border:1px solid var(--line2);
  border-radius:8px;padding:10px 13px;font-size:13px;color:var(--tx);outline:0;font-family:inherit;
  transition:border-color .12s ease,box-shadow .12s ease}
.toolbar input::placeholder{color:var(--dim)}
.toolbar input:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--bluebg)}
.toolhint{color:var(--dim);font-size:12px}

/* ===== 用户协议闸门 =====
   没同意就什么都别想看见: 侧栏、顶栏、内容整块按下去(body.gate-lock), 页面上只剩协议本身。
   卡片自己滚、头尾钉住 —— 几千字的条款不能把"同意"按钮顶到看不见的地方。 */
body.gate-lock #sidebar,body.gate-lock #app,body.gate-lock #intro{display:none}
#gate{display:none}
body.gate-lock #gate{display:flex;position:fixed;inset:0;z-index:50;align-items:center;justify-content:center;
  padding:28px 20px;background:var(--bg)}
.gate-card{display:flex;flex-direction:column;width:100%;max-width:900px;max-height:100%;
  background:var(--card);border:1px solid var(--line2);border-radius:12px;box-shadow:var(--sh2);overflow:hidden}
.gate-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:20px 26px 14px;border-bottom:1px solid var(--line)}
.gate-title{font-size:17px;font-weight:700;color:var(--tx)}
.gate-meta{margin-top:6px;color:var(--dim);font-size:11.5px;font-family:var(--mono)}
.gate-lang{flex:none;color:var(--blue);font-size:12.5px;text-decoration:none;padding:2px 6px}
.gate-lang:hover{text-decoration:underline}
.gate-notice{padding:14px 26px;background:var(--rubybg);border-bottom:1px solid var(--line);
  color:var(--tx);font-size:12.5px;line-height:1.85}
.gate-body{flex:1;min-height:0;overflow-y:auto;padding:18px 26px 8px;
  scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.gate-art{margin-bottom:16px}
.gate-art h4{margin:0 0 8px;font-size:13px;font-weight:600;color:var(--gold)}
.gate-art p{margin:0 0 6px;color:var(--mut);font-size:12.5px;line-height:1.95}
.gate-art b,.gate-notice b{color:var(--tx);font-weight:700}
.gate-foot{padding:14px 26px 18px;border-top:1px solid var(--line);background:var(--bg2)}
.gate-tip{color:var(--dim);font-size:11.5px;margin-bottom:10px}
.gate-acts{display:flex;gap:10px;flex-wrap:wrap}
.gate-acts .btn{padding:9px 22px;font-size:13px}
.gate-locked{align-items:center;text-align:center;padding:46px 32px;gap:10px}
.gate-x{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--rubybg);color:var(--bad);font-size:20px}
.gate-locked p{color:var(--mut);font-size:12.5px;line-height:1.9;max-width:520px}
.gate-locked .btn{margin-top:8px;align-self:center}

/* ===== 安全门拒止页 =====
   门禁没过时占满整屏(与协议闸门同一套壳), 只说"发生了什么 + 怎么办", 不解释判据 ——
   把"你哪一项没对上"讲清楚, 等于把绕过的清单一起交出去。 */
.gate-halt{padding:26px;color:var(--mut);font-size:12.5px;line-height:1.95}
.gate-halt b{color:var(--tx)}

/* ===== 登录墙 =====
   账号体系是官网那套(一号通), 这里只是它的一个入口, 所以视觉上跟站内面板同一套语言:
   紧凑、等距、不抢戏。表单区自己滚, 头尾钉住 —— 注册那一屏比一屏高。 */
.lw-card{max-width:560px}
.lw-card .gate-body{padding:0 0 6px}
.lw-tabs{display:flex;gap:2px;padding:12px 26px 0;border-bottom:1px solid var(--line)}
.lw-tab{padding:8px 12px;color:var(--mut);font-size:13px;text-decoration:none;border-bottom:2px solid transparent;
  margin-bottom:-1px;transition:color .12s ease,border-color .12s ease}
.lw-tab:hover{color:var(--tx)}
.lw-tab.on{color:var(--tx);font-weight:600;border-bottom-color:var(--blue)}
.lw-msg{margin:12px 26px 0;padding:9px 12px;border-radius:6px;font-size:12.5px;line-height:1.7}
.lw-msg.bad{background:var(--rubybg);border:1px solid var(--line);color:var(--bad)}
.lw-msg.ok{background:var(--bluebg);border:1px solid var(--line);color:var(--tx)}
.lw-form{display:flex;flex-direction:column;gap:12px;padding:16px 26px 4px}
.lw-row{display:flex;flex-direction:column;gap:6px}
.lw-row>label{color:var(--mut);font-size:12px}
.lw-form input[type=text],.lw-form input[type=password],.lw-form input[type=email],.lw-form input:not([type]){
  width:100%;background:var(--card);border:1px solid var(--line2);border-radius:6px;
  padding:9px 12px;font-size:13.5px;color:var(--tx);outline:0;font-family:inherit;
  transition:border-color .12s ease,box-shadow .12s ease}
.lw-form input::placeholder{color:var(--dim)}
.lw-form input:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--bluebg)}
.lw-seg{display:inline-flex;border:1px solid var(--line2);border-radius:6px;overflow:hidden;width:fit-content}
.lw-seg-item{padding:7px 18px;font-size:13px;color:var(--mut);text-decoration:none;background:var(--card)}
.lw-seg-item+.lw-seg-item{border-left:1px solid var(--line2)}
.lw-seg-item.on{background:var(--blue);color:#fff;font-weight:600}
.lw-cap{display:flex;gap:10px;align-items:center}
.lw-cap img{flex:none;width:150px;height:49px;border:1px solid var(--line2);border-radius:6px;
  background:var(--bg2);cursor:pointer;object-fit:cover}
.lw-cap img:not([src]){background-image:none}
.lw-code{display:flex;gap:10px;align-items:center}
.lw-code input{flex:1}
.lw-code .btn{flex:none;white-space:nowrap}
.lw-consent{display:flex;flex-direction:column;gap:8px;margin-top:4px;padding-top:12px;border-top:1px solid var(--line)}
.lw-check{display:flex;align-items:flex-start;gap:8px;color:var(--mut);font-size:12.5px;line-height:1.6;cursor:pointer}
.lw-check input{margin:2px 0 0;accent-color:var(--blue);flex:none}
.lw-note{color:var(--dim);font-size:11.5px;line-height:1.8;margin-top:10px}

/* ===== 结果水印 =====
   看得见的一层: 极淡的斜排短码。它随每一次响应刷新, 服务端把短码与会话记在一起 ——
   于是"这张截图是从哪一次会话里流出来的"可查。
   两层保护:
     · pointer-events:none —— 它不能挡住任何一次点击(水印挡操作比没有水印更糟);
     · user-select:none + fixed —— 拖选、滚动都带不走它, 它始终盖在最上面。
   z-index 压在对齐抽屉之下、协议闸门之上: 抽屉要能盖住它, 而它要盖住所有内容面。 */
#n0wm{position:fixed;inset:-12% -12%;z-index:45;pointer-events:none;user-select:none;
  display:flex;flex-wrap:wrap;align-content:flex-start;transform:rotate(-24deg);overflow:hidden}
#n0wm i{display:block;width:25%;padding:30px 0;text-align:center;font-style:normal;
  font-size:11px;font-family:var(--mono);color:var(--tx);opacity:.05;white-space:nowrap}

/* ===== 首页页脚 =====
   照官网那六栏与底部备案条。只挂首页, 接在 hero 之下 —— 首屏依旧是"品牌 + 一个检索框",
   页脚要往下滚一下才见。底色分层用 bg2, 与卡片/侧栏同一套变量, 夜间自动跟着走。
   margin-bottom 的负值抵消 #main 那 90px 下留白: 备案条该贴到页面末, 不该在它下面悬一段空。 */
.hfoot{margin:56px 0 -90px;border-top:1px solid var(--line);background:var(--bg2)}
.hf-in{max-width:1180px;margin:0 auto;padding:32px 28px 26px;display:flex;gap:44px;align-items:flex-start}
.hf-brand{flex:none;width:184px}
.hf-mark{position:relative;display:block;width:30px;height:30px;border-radius:8px;overflow:hidden;margin-bottom:10px}
.hf-mark img{position:absolute;inset:0;width:100%;height:100%}
.hf-brand b{display:block;font-size:13.5px;font-weight:700;color:var(--tx)}
.hf-brand small{display:block;margin-top:6px;color:var(--dim);font-size:11.5px;line-height:1.7}
.hf-cols{flex:1;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px}
.hf-col h4{font-size:12px;font-weight:600;color:var(--tx);margin:2px 0 9px}
.hf-col a{display:block;color:var(--mut);font-size:12.5px;line-height:2.05;text-decoration:none;
  transition:color .12s ease}
.hf-col a:hover{color:var(--blue)}
.hf-bar{border-top:1px solid var(--line)}
.hf-bar-in{max-width:1180px;margin:0 auto;padding:11px 28px 13px;display:flex;flex-wrap:wrap;
  align-items:center;gap:6px 20px;color:var(--dim);font-size:11.5px}
.hf-bar a{color:var(--dim);text-decoration:none;transition:color .12s ease}
.hf-bar a:hover{color:var(--blue)}
.hf-slogan{margin-left:auto}
@media(max-width:1100px){
  .hf-cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 20px}
}
@media(max-width:900px){
  .hf-in{flex-direction:column;gap:26px;padding:26px 20px 22px}
  .hf-brand{width:auto}
  .hf-bar-in{padding:10px 20px 12px}
  .hf-slogan{margin-left:0;flex-basis:100%}
}
@media(max-width:720px){
  .hf-in{padding:24px 16px 20px}
  .hf-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hf-bar-in{padding:10px 16px 12px}
}

/* ===== 响应式 ===== */
@media(max-width:1100px){.container{padding:0 20px}}
@media(max-width:900px){
  #sidebar{display:none}
  #app{margin-left:0}
  .tb-left,.tb-right{min-width:0}
  .tb-hint,.tb-title{display:none}
}
@media(max-width:720px){
  .container{padding:0 16px}
  .cards{grid-template-columns:1fr}
  #topbar{padding:9px 14px}
}