




.mh-medals { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.mh-medal {
  position: relative; box-sizing: border-box; padding: 18px 10px 16px; border-radius: 20px; background: var(--v-card);
  box-shadow: 0 0 0 1px var(--v-ring); display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
  transition: transform .4s var(--v-spring), box-shadow .35s ease; outline: none;
}
.mh-medal:hover, .mh-medal:focus-visible { transform: translateY(-4px) rotate(-2deg); box-shadow: 0 0 0 1px var(--v-ring), 0 14px 30px rgba(0, 0, 0, .12); }
.mh-medal b { margin-top: 12px; font-size: 14px; font-weight: 800; color: var(--v-strong); }
.mh-medal small { font-size: 12px; line-height: 1.35; color: var(--v-muted); padding: 0 4px; }
.mh-medal-ring {
  --c1: #F25C05; --c2: #FF9A5C; position: relative; width: 92px; height: 92px; border-radius: 50%; padding: 5px; box-sizing: border-box;
  background: conic-gradient(var(--c1), var(--c2), var(--c1)); box-shadow: 0 12px 28px color-mix(in srgb, var(--c1) 28%, transparent);
}
.c-f .mh-medal-ring { --c1: #F25C05; --c2: #FFB36B; }
.c-y .mh-medal-ring { --c1: #E8A100; --c2: #FFD770; }
.c-g .mh-medal-ring { --c1: #1E9A55; --c2: #8FE3B2; }
.c-b .mh-medal-ring { --c1: #2F6BE0; --c2: #8FB5FF; }
.c-p .mh-medal-ring { --c1: #7A4BE0; --c2: #C0A5FF; }
.mh-medal-in {
  position: relative; overflow: hidden; width: 100%; height: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 30% 25%, var(--v-card), var(--v-soft)); color: var(--c1);
}
.mh-shine { position: absolute; inset: 0; pointer-events: none; }
.mh-medal.is-new .mh-shine::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 36%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  animation: mhshine 3.6s ease-in-out infinite;
}
@keyframes mhshine { 0% { transform: translateX(-120%) skewX(-18deg); } 60%, 100% { transform: translateX(260%) skewX(-18deg); } }
.mh-medal.is-off .mh-medal-ring { background: var(--v-row); box-shadow: none; }
.mh-medal.is-off .mh-medal-in { background: var(--v-soft); color: var(--v-lock); }
.mh-medal.is-off { opacity: .85; } .mh-medal.is-off b { color: var(--v-muted); }
.mh-medal.is-prog .mh-medal-ring {
  background: conic-gradient(var(--c1) calc(var(--p) * 1%), var(--v-row) 0); box-shadow: none;
}
.mh-medal.is-prog .mh-medal-in { color: var(--v-muted); }
.mh-medal.is-prog small { color: var(--v-o-text); font-weight: 700; }
.mh-medal-lock, .mh-medal-new { position: absolute; font-style: normal; }
.mh-medal-lock { right: -2px; bottom: -2px; width: 28px; height: 28px; border-radius: 50%; background: var(--v-card); box-shadow: 0 0 0 1px var(--v-chip-ring); color: #71717A; display: flex; align-items: center; justify-content: center; }
.mh-medal-new { right: -6px; top: -4px; padding: 3px 7px; border-radius: 999px; background: var(--v-accent); color: #fff; font-size: 10px; font-weight: 800; }
.mh-medal-tip {
  position: absolute; z-index: 5; left: 50%; bottom: calc(100% + 8px); transform: translate(-50%, 6px); width: max-content; max-width: 220px;
  padding: 8px 12px; border-radius: 12px; background: var(--v-ink); color: var(--v-on-ink); font-size: 12px; line-height: 1.4;
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease;
}
.mh-medal:hover .mh-medal-tip, .mh-medal:focus-visible .mh-medal-tip { opacity: 1; transform: translate(-50%, 0); }


.h26-hero .mh-search, .h26 .mh-search { margin-top: 12px; }
.mh-search[hidden] { display: none; }
.mh-search {
  box-sizing: border-box; padding: 16px 18px 14px; border-radius: 24px; background: var(--v-card); box-shadow: var(--v-lift-shadow, 0 18px 50px rgba(0, 0, 0, .12)), 0 0 0 1px var(--v-ring);
  display: flex; flex-direction: column; gap: 14px; text-align: left;
}
.mh-search-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mh-scopes { display: flex; gap: 8px; flex-wrap: wrap; }
.mh-scope { height: 28px; padding: 0 12px; border-radius: 999px; background: var(--v-soft); color: var(--v-text); font-size: 12.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.mh-scope b { color: var(--v-o-text); font-weight: 800; }
.mh-scope.is-zero { opacity: .55; } .mh-scope.is-zero b { color: var(--v-muted); }
.mh-search-note { margin-left: auto; font-size: 12px; color: var(--v-muted); }
.mh-answer {
  display: flex; gap: 14px; padding: 14px 16px; border-radius: 16px; background: var(--v-o-soft); font-size: 14px; line-height: 1.55; color: var(--v-text);
}
.mh-answer.is-wait { opacity: .8; }
.mh-answer-ico { width: 34px; height: 34px; border-radius: 11px; background: var(--v-accent); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mh-answer small { display: block; margin-top: 8px; font-size: 11.5px; color: var(--v-muted); }
.mh-none { padding: 10px 4px; font-size: 14px; color: var(--v-muted); }
.mh-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
.mh-group { display: flex; flex-direction: column; min-width: 0; }
.mh-group-h { display: flex; gap: 8px; padding: 0 10px 6px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--v-muted); }
.mh-group-h em { margin-left: auto; font-style: normal; letter-spacing: 0; text-transform: none; font-weight: 600; }
.mh-res { width: 100%; border: 0; background: transparent; border-radius: 12px; padding: 9px 10px; display: flex; align-items: center; gap: 12px; text-align: left; color: var(--v-text); cursor: pointer; font-family: inherit; }
.mh-res:hover, .mh-res:focus-visible { background: var(--v-hover); outline: none; }
.mh-res-ico { width: 32px; height: 32px; border-radius: 10px; background: var(--v-soft); color: var(--v-o-text); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mh-res-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mh-res-main b { font-size: 13.5px; font-weight: 700; color: var(--v-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mh-res-main small { font-size: 12px; color: var(--v-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mh-search mark { background: var(--v-o-soft); color: var(--v-o-text); border-radius: 4px; padding: 0 2px; }
.mh-search-foot { display: flex; align-items: center; gap: 12px; padding-top: 12px; border-top: 1px solid var(--v-row); font-size: 12px; color: var(--v-muted); }
.mh-ask { height: 34px; padding: 0 14px; border: 0; border-radius: 11px; background: var(--v-ink); color: var(--v-on-ink); font-family: inherit; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }


.mh-charts { padding: 22px 24px 24px; }
.mh-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.mh-tab { height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--v-line); background: transparent; color: var(--v-muted); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: background .2s ease, color .2s ease; }
.mh-tab:hover { color: var(--v-strong); }
.mh-tab.is-on { background: var(--v-accent); border-color: var(--v-accent); color: #fff; }
.mh-chart-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.mh-chart-head b { font-family: var(--v-display); font-size: 34px; font-weight: 800; color: var(--v-strong); }
.mh-chart-head > span:not([class]) { font-size: 14px; color: var(--v-muted); }
.mh-delta, .mh-record { margin-left: auto; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 800; display: inline-flex; align-items: center; gap: 6px; background: var(--v-g-soft); color: var(--v-g-text); }
.mh-delta.is-down { background: var(--br-rs, #FEECEC); color: var(--br-r, #B91C1C); }
.mh-record { background: var(--v-a-soft); color: var(--v-a-text); }
.mh-bars { display: flex; align-items: flex-end; gap: 14px; height: 210px; padding: 18px 4px 0; }
.mh-col { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; }
.mh-bar { display: block; width: 100%; max-width: 64px; border-radius: 10px 10px 4px 4px; background: color-mix(in srgb, var(--v-muted) 24%, transparent); transform-origin: 50% 100%; animation: mhgrow 1.1s cubic-bezier(.22, 1, .36, 1) both; min-height: 4px; }
.mh-col { --h: 100%; }
.mh-col .mh-bar { flex: 0 0 auto; }
.mh-col.is-hi .mh-bar { background: linear-gradient(180deg, #FF9A5C, var(--v-accent)); }
.mh-val { font-size: 12px; font-weight: 600; color: var(--v-muted); white-space: nowrap; }
.mh-col.is-hi .mh-val { color: var(--v-o-text); font-weight: 800; }
.mh-lbl { font-size: 12px; color: var(--v-muted); }
@keyframes mhgrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.mh-chart-note { margin-top: 12px; font-size: 12.5px; color: var(--v-muted); }
.mh-skel { height: 320px; border-radius: 24px; background: var(--v-soft); animation: br26pulse 1.4s ease-in-out infinite; }


.br26-dash { display: block; }
.br26-dash-in { display: flex; flex-direction: column; gap: 18px; }
.br26-dash-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.br26-qgrid-8 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.br26-skel-dash { height: 560px; }
.br26-tfilter .br26-ts { border: 0; font-family: inherit; text-align: left; cursor: pointer; box-shadow: inset 0 0 0 1px transparent; transition: box-shadow .2s ease, background .2s ease; }
.br26-tfilter .br26-ts:hover { box-shadow: inset 0 0 0 1px var(--v-line); }
.br26-tfilter .br26-ts.is-on { background: var(--v-o-soft); box-shadow: inset 0 0 0 1.5px var(--v-accent); }
.br26-tfilter .br26-ts[aria-selected="true"] b { color: var(--v-o-text); }
.br26-tfilter .br26-ts.is-r.is-on b { color: var(--br-r); }
.br26-tfilter .br26-ts.is-r.is-on { background: var(--br-rs); }
[data-br-tp][hidden] { display: none; }
.br26-no.is-g { background: var(--v-g-soft); color: var(--v-g-text); }
.br26-it-dl .br26-main > span.is-late { color: var(--br-r); font-weight: 700; }
@media (max-width: 1280px) and (min-width: 1024px) {
  .br26-qgrid-8 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mh-medals { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mh-groups { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .mh-bar, .mh-medal.is-new .mh-shine::after { animation: none !important; } }
