/* ── 6. Gliding hover and tabs ───────────────────────── */
.s6 { height: 560px; background: var(--gray-0); color: var(--gray-870); }
.v-bar { position: absolute; left: 0; right: 0; top: 0; border-bottom: 1px solid var(--gray-70); background: var(--gray-0); }
.v-r1 { display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 22px; font-size: 13px; font-weight: 500; }
.v-lg { width: 22px; height: 22px; border-radius: 6px; background: var(--gray-870); }
.v-sl { color: var(--gray-150); font-size: 17px; font-weight: 400; }
.v-pill { font-size: 12px; padding: 2px 8px; border-radius: 9999px; background: var(--gray-40); color: var(--gray-500); }
.v-av { margin-left: auto; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--yellow-200), var(--magenta-300)); }
.v-tabs { position: relative; display: flex; padding: 0 12px; height: 46px; align-items: center; overflow-x: auto; scrollbar-width: none; }
.v-tabs::-webkit-scrollbar { display: none; }
.v-tab { position: relative; z-index: 1; border: 0; background: none; padding: 0 12px; height: 32px; font-size: 13px; color: var(--gray-500); cursor: default; white-space: nowrap; }
.v-tab[aria-selected="true"] { color: var(--gray-870); }
.v-hov { position: absolute; top: 7px; height: 32px; left: 0; width: 0; border-radius: 6px; background: var(--gray-40); opacity: 0; }
.v-und { position: absolute; bottom: -1px; height: 2px; left: 0; width: 0; background: var(--gray-870); border-radius: 2px; }
.v-body { position: absolute; left: 0; right: 0; top: 103px; bottom: 0; padding: 26px 24px; background: var(--gray-20); }
.v-head { display: flex; align-items: center; justify-content: space-between; }
.v-ttl { margin: 0; font-size: 24px; font-weight: 550; letter-spacing: -0.02em; transition: opacity .16s, transform .3s cubic-bezier(.2,.9,.25,1); }
.v-ttl.out { opacity: 0; transform: translateY(4px); }
.v-btn { font-size: 13px; font-weight: 550; background: var(--gray-870); color: var(--gray-0); border-radius: 8px; padding: 8px 14px; }
.v-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 20px 0; }
.v-stat { background: var(--gray-0); border: 1px solid var(--gray-70); border-radius: 12px; padding: 14px 16px; }
.v-stat span { display: block; font-size: 12px; color: var(--gray-500); }
.v-stat b { display: block; font-size: 20px; font-weight: 550; letter-spacing: -0.02em; margin-top: 4px; transition: opacity .16s; font-variant-numeric: tabular-nums; }
.v-list { position: relative; background: var(--gray-0); border: 1px solid var(--gray-70); border-radius: 12px; padding: 6px; }
.v-hov2 { position: absolute; left: 6px; right: 6px; top: 0; height: 0; border-radius: 8px; background: var(--gray-40); opacity: 0; }
.v-row { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 12px; font-size: 13px; cursor: default; }
.v-row .dt { width: 8px; height: 8px; border-radius: 50%; background: var(--green-400); flex: none; }
.v-row .dt.b { background: var(--yellow-250); }
.v-row .nm { font-weight: 550; flex: none; }
.v-row .br { color: var(--gray-500); font-family: var(--font-mono); font-size: 12px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-row .tm { color: var(--gray-400); font-size: 13px; flex: none; }
@container (max-width: 700px) { .v-stats { grid-template-columns: 1fr 1fr; } .v-stat:nth-child(3) { display: none; } .v-row .br { display: none; } .v-row .nm { flex: 1; } }