.hero .num em{font-style:normal;font-size:12px;color:var(--ink-3);font-weight:500}
.hero .bar{margin-top:9px;height:5px;border-radius:3px;background:rgba(15,23,42,.09);overflow:hidden}
.hero .bar>i{display:block;height:100%;border-radius:3px;background:var(--accent);
  transition:width .6s cubic-bezier(.22,.8,.28,1)}

/* ── 轮播 ── */
.carousel{position:relative;flex:1;min-height:170px;overflow:hidden;display:flex;flex-direction:column}
.viewport{flex:1;min-height:0;overflow:hidden;position:relative}
.track{display:flex;height:100%;width:100%;transition:transform .45s cubic-bezier(.22,.8,.28,1)}
.slide{flex:0 0 100%;height:100%;padding:0 11px 7px;display:flex;flex-direction:column;
  min-width:0;overflow:hidden}
.s-head{display:flex;align-items:baseline;gap:8px;margin-bottom:6px;flex:none}
.s-head b{font-size:12.5px;font-weight:600;color:var(--ink-2)}
.s-head i{font-style:normal;font-size:9.5px;color:var(--ink-3);margin-left:auto;letter-spacing:.14em}
.pie-wrap{display:flex;align-items:center;gap:12px;flex:1;min-height:0;overflow:hidden}
.pie{position:relative;width:108px;height:108px;flex:none}
.pie svg{transform:rotate(-90deg);display:block;width:100%;height:100%}
.pie .mid{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.pie .mid b{font-size:22px;font-weight:700;line-height:1;letter-spacing:-.02em;color:var(--ink);font-family:var(--font-num)}
.pie .mid i{display:block;margin-top:3px;font-style:normal;font-size:8.5px;color:var(--ink-3);letter-spacing:.12em}
.pie-legend{flex:1;min-width:0}
.pl{display:flex;align-items:center;gap:7px;padding:5px 0;font-size:12px;color:var(--ink-2)}
.pl i{width:8px;height:8px;border-radius:2px;flex:none}
.pl .n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl b{margin-left:auto;font-weight:600;color:var(--ink);font-size:12.5px;font-family:var(--font-num)}
.pl b em{font-style:normal;color:var(--ink-3);font-weight:500;margin-left:5px;font-size:11px}

/* 轮播指示：细横条 */
.dots{display:flex;align-items:center;justify-content:center;gap:5px;height:22px;flex:none;
  border-top:1px solid var(--line-2)}
.dots b{width:18px;height:3px;border-radius:2px;background:rgba(15,23,42,.16);cursor:pointer;transition:.2s}
.dots b.on{background:var(--accent)}
.nav{
  position:absolute;top:50%;transform:translateY(-50%);width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--line);
  color:var(--ink-2);cursor:pointer;opacity:0;transition:.16s;z-index:3;font-size:12px;
}
.carousel:hover .nav{opacity:1}
.nav:hover{background:rgba(15,23,42,.08);color:var(--ink)}
.nav.l{left:2px} .nav.r{right:2px}

/* ── 日志 ── */










@keyframes fl{0%{background:var(--accent-l)}100%{background:transparent}}

/* ── 表格 ── */
.table-wrap{flex:1;min-height:0;overflow:auto}
table{width:100%;border-collapse:collapse;font-size:13px;table-layout:auto} /* Z13-CENTER2 Z13-FIXED-LAYOUT */
thead th{
  position:sticky;top:0;z-index:2;height:35px;padding:0 9px;text-align:center;
  font-size:10px;font-weight:600;color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase;
  font-family:var(--font-num);
  background:rgba(255,255,255,.94);border:0;
}
tbody td{
  height:41px;padding:0 9px;border:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;
  color:var(--ink-2);
}
tbody tr:hover td{background:var(--surface-2);cursor:pointer}
.mono{font-family:var(--font-mono);font-size:12px;color:var(--ink);letter-spacing:-.01em}
.dim{color:var(--ink-2)}
.badge{
  display:inline-block;padding:1px 7px;border-radius:3px;font-size:11.5px;font-weight:600;
  color:#0f766e;background:var(--accent-l);
}
.badge.none{color:var(--ink-3);background:rgba(15,23,42,.05)}

.scroll::-webkit-scrollbar{width:9px;height:9px}
.scroll::-webkit-scrollbar-thumb{background:rgba(15,23,42,.22);border-radius:4px;border:2px solid var(--surface)}
.scroll::-webkit-scrollbar-thumb:hover{background:rgba(15,23,42,.34)}
.scroll::-webkit-scrollbar-track{background:transparent}

/* ── 矮屏 ── */
@media (max-height:880px){
  .hero .num b{font-size:38px}
  .pie{width:94px;height:94px}
  .carousel{min-height:150px}
}
@media (max-height:760px){
  .hero .num b{font-size:32px}
  .pie{width:80px;height:80px}
  .pie .mid b{font-size:18px}
  .pl{padding:3px 0;font-size:11.5px}
  .carousel{min-height:120px}
}
/* ── 登录页同款 LOGO 动画 ── */
/* ═══════════════════════════════════════════════════════════════
   Zeros2One iOS — 从无到有（0→1）主 LOGO 动画
   ═══════════════════════════════════════════════════════════════ */
.z2o-logo-anim{ display: block; overflow: visible; }
.z2o-logo-anim .z2o-p1{
  transform-origin: 60px 60px;
  animation: z2o-burst 3.2s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes z2o-burst{
  0%     { opacity: 0; transform: scale(0); }
  10%    { opacity: 1; transform: scale(2.4); }
  22%    { opacity: .95; transform: scale(1.4); }
  55%    { opacity: .7; transform: scale(1); }
  100%   { opacity: 0; transform: scale(.6); }
}
.z2o-logo-anim .z2o-rays{
  transform-origin: 60px 60px;
  animation: z2o-rays-spin 3.2s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes z2o-rays-spin{
  0%     { opacity: 0; transform: rotate(-30deg) scale(.3); }
  12%    { opacity: .75; transform: rotate(0deg) scale(1); }
  40%    { opacity: .35; transform: rotate(45deg) scale(1.05); }
  70%    { opacity: .15; transform: rotate(90deg) scale(1); }
  100%   { opacity: 0; transform: rotate(120deg) scale(.9); }
}
.z2o-logo-anim .z2o-particles circle{
  transform-origin: 60px 60px;
  animation: z2o-part-in 3.2s cubic-bezier(.4,0,.2,1) infinite;
}
.z2o-logo-anim .z2o-particles circle:nth-child(1){ animation-delay: 0s }
.z2o-logo-anim .z2o-particles circle:nth-child(2){ animation-delay: .1s }
.z2o-logo-anim .z2o-particles circle:nth-child(3){ animation-delay: .2s }
.z2o-logo-anim .z2o-particles circle:nth-child(4){ animation-delay: .3s }
.z2o-logo-anim .z2o-particles circle:nth-child(5){ animation-delay: .4s }
.z2o-logo-anim .z2o-particles circle:nth-child(6){ animation-delay: .5s }
@keyframes z2o-part-in{
  0%     { opacity: 0; transform: scale(2.2); }
  20%    { opacity: 1; transform: scale(1); }
  50%    { opacity: .8; transform: scale(1); }
  75%    { opacity: 0; transform: scale(.2); }
  100%   { opacity: 0; transform: scale(.2); }
}
.z2o-logo-anim .z2o-n0{
  transform-origin: 60px 60px;
  animation: z2o-num0 3.2s cubic-bezier(.5,0,.3,1) infinite;
}
@keyframes z2o-num0{
  0%, 28%  { opacity: 0; transform: scale(.4)  rotate(-25deg); }
  40%      { opacity: 1; transform: scale(1.12) rotate(0deg); }
  48%      { opacity: 1; transform: scale(.98) rotate(0deg); }
  68%      { opacity: 1; transform: scale(1)   rotate(0deg); }
  80%      { opacity: 0; transform: scale(.35) rotate(-30deg); }
  100%     { opacity: 0; transform: scale(.35) rotate(-30deg); }
}
.z2o-logo-anim .z2o-n1{
  transform-origin: 60px 60px;
  animation: z2o-num1 3.2s cubic-bezier(.5,0,.3,1) infinite;
}
@keyframes z2o-num1{
  0%, 76%  { opacity: 0; transform: scale(.35) rotate(30deg); }
  86%      { opacity: 1; transform: scale(1.18) rotate(0deg); }
  92%      { opacity: 1; transform: scale(.96) rotate(0deg); }
  97%      { opacity: 1; transform: scale(1)   rotate(0deg); }
  100%     { opacity: 1; transform: scale(1)   rotate(0deg); }
}

/* ── 右侧抽屉（与卡片同高、同圆角） ── */
.drawer-mask{
  position:fixed;top:9px;left:9px;right:9px;bottom:9px;border-radius:10px;z-index:70;
  background:rgba(15,23,42,.30);opacity:0;pointer-events:none;transition:opacity .22s;
}
.drawer-mask.on{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:9px;bottom:9px;right:9px;width:min(432px,92vw);z-index:71;
  display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border:1px solid var(--line);border-radius:0 10px 10px 0;
  transform:translateX(calc(100% + 12px));
  transition:transform .28s cubic-bezier(.22,.8,.28,1);
}
.drawer.on{transform:translateX(0)}
.drawer-head{
  display:flex;align-items:center;gap:10px;height:56px;padding:0 16px;flex:none;
  border-bottom:1px solid var(--line-2);
}
.drawer-head .dh-logo{
  width:30px;height:30px;flex:none;border-radius:6px;display:grid;place-items:center;
  background:var(--accent-l);color:var(--accent-d);
}
.drawer-head .dh-logo svg{width:15px;height:15px}
.drawer-head .dh-t{min-width:0;flex:1}
.drawer-head .dh-t b{display:block;font-size:13.5px;font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-mono);letter-spacing:-.02em}
.drawer-head .dh-t span{display:block;font-size:10.5px;color:var(--ink-3);letter-spacing:.08em;margin-top:1px}
.drawer-x{width:26px;height:26px;flex:none;border-radius:5px;border:1px solid var(--line);
  background:transparent;color:var(--ink-2);cursor:pointer;display:grid;place-items:center;transition:.14s}
.drawer-x svg{width:12px;height:12px}
.drawer-x:hover{background:rgba(15,23,42,.06);color:var(--ink)}
.dr-tabs{display:flex;align-items:center;gap:2px;padding:0 10px;height:38px;flex:none;
  border-bottom:1px solid var(--line-2);overflow-x:auto;scrollbar-width:none}
.dr-tabs::-webkit-scrollbar{display:none}
.dr-tab{position:relative;display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 10px;
  border:0;border-radius:5px;background:transparent;color:var(--ink-2);font-size:12px;font-weight:500;
  cursor:pointer;white-space:nowrap;transition:.14s;font-family:var(--font-body)}
.dr-tab:hover{background:rgba(15,23,42,.05);color:var(--ink)}
.dr-tab.on{background:var(--accent-l);color:#0f766e;font-weight:600}