/* ChainRoast wallet extras on top of onchain-judge home CSS */

/* theme tokens already in judge-home; map cr_theme via html[data-theme] — judge uses :root[data-theme=dark] */
html[data-theme="dark"],
html[data-theme="dark"] :root {
  /* ensure dark works with judge selectors */
}
html[data-theme="light"] {
  color-scheme: light;
}
html[data-theme="dark"] {
  color-scheme: dark;
}

/* eyebrow text (dot is first span in judge CSS) */
.hp-eyebrow b {
  font: inherit;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--hp-muted);
}

/* search: keep chain select */
.hp-search select {
  border: 0;
  background: transparent;
  color: var(--hp-text);
  font-weight: 700;
  font-size: 13px;
  outline: none;
  max-width: 92px;
  cursor: pointer;
}
.hp-search .btn-search {
  height: 42px;
  padding: 0 22px;
  border: 0;
  border-radius: 6px;
  background: var(--hp-primary);
  color: var(--hp-bg);
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

/* ---------- Header: 防品牌被右侧按钮挤出视口 ---------- */
.hp-header {
  gap: 12px;
  overflow: visible;
  min-width: 0;
}
.hp-brand {
  flex: 0 0 auto;
  min-width: 0;
  max-width: min(280px, 36vw);
  overflow: hidden;
}
.hp-brand img {
  flex: 0 0 auto;
}
.hp-brand strong {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.hp-brand > span {
  flex: 0 0 auto;
}
.hp-header nav {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: center;
  gap: 22px !important;
  margin: 0 !important;
}
.hp-header nav a {
  white-space: nowrap;
  font-weight: 600;
  color: var(--hp-text);
}
.hp-actions {
  flex: 0 1 auto;
  min-width: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  max-width: 52%;
}
.hp-actions .hp-gmgn,
.hp-actions .hp-debot {
  font-size: 12px;
  white-space: nowrap;
  font-weight: 600;
  color: var(--hp-muted);
}
.hp-actions .hp-gmgn:hover,
.hp-actions .hp-debot:hover {
  color: var(--hp-text);
}
/* 覆盖 judge 在 ≤1100 隐藏 .hp-gmgn：两个入口都保留到更窄再藏 */
@media (max-width: 1100px) {
  .hp-actions .hp-gmgn,
  .hp-actions .hp-debot {
    display: inline !important;
  }
}
@media (max-width: 1200px) {
  .hp-actions .theme-toggle [data-theme-label] {
    display: none;
  }
  .hp-actions {
    max-width: 48%;
  }
}
@media (max-width: 900px) {
  .hp-actions .hp-gmgn,
  .hp-actions .hp-debot {
    display: none !important;
  }
}
@media (max-width: 980px) {
  .hp-actions .lang-switch,
  .hp-actions .auth-box #btnAuthLogin,
  .hp-actions .auth-box #authName {
    display: none;
  }
  .hp-brand {
    max-width: min(200px, 42vw);
  }
  .hp-actions {
    max-width: none;
  }
}

/* ---------- Hero 预览卡：取消绝对定位叠层，提高对比度 ---------- */
.hp-preview {
  display: flex;
  flex-direction: column;
  min-height: 360px !important;
  overflow: hidden;
}
.hp-preview-title {
  position: relative;
  z-index: 2;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.hp-preview-title span {
  color: #f2faf4;
  font-size: 17px;
  font-weight: 800;
}
.hp-preview-title small {
  color: #b7c6bb !important;
  font-size: 12px;
  font-weight: 600;
}

/* preview empty / body toggles */
.hp-preview-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #a8b8ae;
  font-size: 14px;
  pointer-events: none;
  z-index: 1;
}
.hp-preview.has-data .hp-preview-empty {
  display: none;
}
.hp-preview-body {
  display: none;
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  min-height: 0;
  /* 流式排版：头像 → 评分 → 口碑条，不再 absolute 互压 */
  flex-direction: column;
  gap: 0;
  padding-bottom: 8px;
}
.hp-preview.has-data .hp-preview-body {
  display: flex;
}
.hp-preview .hp-wallet-head {
  margin-top: 18px;
  margin-bottom: 4px;
  position: relative;
  z-index: 2;
  max-width: calc(100% - 150px);
}
.hp-preview .hp-wallet-head strong {
  color: #f4fbf6;
  font-size: 20px;
  line-height: 1.2;
}
.hp-preview .hp-wallet-head small {
  color: #c2d0c7 !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.hp-preview .ph-avatar {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #36433c;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  flex: 0 0 44px;
  font-weight: 800;
  color: #dfece3;
}
.hp-preview .ph-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}
.hp-preview .ph-avatar img.is-on {
  opacity: 1;
}

/* 评分行：大号分数 + 星 + 条数，不与口碑条抢位 */
.hp-preview .hp-score {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin: 14px 0 18px;
  max-width: calc(100% - 140px);
}
.hp-preview .hp-score > b {
  font-size: 44px;
  line-height: 1;
  color: #c6ef55;
  font-variant-numeric: tabular-nums;
}
.hp-preview .hp-score > span {
  color: #d5e2d9;
  font-size: 13px;
  font-weight: 600;
}
.hp-preview .hp-stars {
  letter-spacing: 1px;
  font-size: 16px;
}
.hp-preview .hp-stars b {
  color: #d4ef5a;
}
.hp-preview .hp-stars i {
  color: #6a7a70;
  font-style: normal;
}
.hp-preview .hp-score #previewCount {
  color: #d8e6dc;
  background: rgb(255 255 255 / 8%);
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
}

/* 口碑条：取消 absolute，固定在内容流底部左侧 */
.hp-preview .hp-reputation {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  max-width: min(280px, 62%) !important;
  margin-top: auto;
  z-index: 2;
}
.hp-preview .hp-reputation > div:first-child {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 12px;
  font-weight: 700;
  color: #d5e2d9;
  margin-bottom: 2px;
}
.hp-preview .hp-reputation b,
.hp-preview .hp-reputation #previewPos {
  color: #c6ef55 !important;
  font-size: 13px;
  font-weight: 800;
}
.hp-preview .hp-reputation-bar {
  height: 8px;
  margin-top: 8px;
  background: #5a3532;
  border-radius: 5px;
  overflow: hidden;
}
.hp-preview .hp-reputation-bar i {
  background: linear-gradient(90deg, #8dbb2d, #c6ef55);
}

/* 吉祥物：纯装饰，压低透明度，不挡字 */
.hp-preview .hp-mascot {
  position: absolute !important;
  width: 168px !important;
  max-width: 42%;
  right: -12px !important;
  bottom: -16px !important;
  z-index: 0 !important;
  opacity: 0.38;
  pointer-events: none;
  filter: saturate(0.9);
}
@media (max-width: 760px) {
  .hp-preview .hp-wallet-head,
  .hp-preview .hp-score {
    max-width: 100%;
  }
  .hp-preview .hp-reputation {
    max-width: 100% !important;
  }
  .hp-preview .hp-mascot {
    width: 120px !important;
    opacity: 0.28;
  }
}
/* table avatars */
.hp-wallet-cell {
  position: relative;
}
.hp-wallet-cell > img.br-avatar,
.hp-wallet-cell > span.br-avatar-fallback {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--hp-soft);
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  font-size: 12px;
  font-weight: 800;
}
.hp-wallet-cell > img.br-avatar {
  display: none;
}
.hp-wallet-cell > img.br-avatar.is-on {
  display: block;
}
.hp-wallet-cell > img.br-avatar.is-on + .br-avatar-fallback,
.hp-wallet-cell > img.br-avatar.is-on ~ .br-avatar-fallback {
  display: none;
}
/* when img is first, hide fallback if is-on — structure is fallback then img */
.hp-wallet-cell .br-avatar-fallback {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--hp-soft);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  flex: 0 0 38px;
}
.hp-wallet-cell img.br-avatar.is-on {
  display: block;
}
.hp-wallet-cell:has(img.br-avatar.is-on) .br-avatar-fallback {
  display: none;
}
.hp-tabs button.board-tab {
  cursor: pointer;
  font: inherit;
}
.hp-tabs button.board-tab.active {
  background: var(--hp-primary);
  color: var(--hp-bg);
  border-color: var(--hp-primary);
}

/* header extras: auth / lang / theme label */
.theme-toggle {
  border: 1px solid var(--hp-border);
  background: var(--hp-panel);
  color: var(--hp-text);
  border-radius: 7px;
  height: 40px;
  min-width: 40px;
  padding: 0 12px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.theme-toggle:hover {
  background: var(--hp-soft);
}
.lang-switch {
  display: flex;
  gap: 4px;
}
.lang-switch button {
  border: 1px solid var(--hp-border);
  background: var(--hp-panel);
  color: var(--hp-muted);
  border-radius: 6px;
  height: 34px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.lang-switch button.active {
  background: var(--hp-primary);
  color: var(--hp-bg);
  border-color: var(--hp-primary);
}
.auth-box {
  display: flex;
  align-items: center;
  gap: 8px;
}
.auth-user {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 8px 3px 3px;
  border: 1px solid var(--hp-border);
  border-radius: 999px;
  background: var(--hp-panel);
}
.auth-user.is-on {
  display: inline-flex;
}
.auth-user img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}
.btn-ghost,
.btn {
  border: 1px solid var(--hp-border);
  background: var(--hp-panel);
  color: var(--hp-text);
  border-radius: 7px;
  height: 36px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.btn-ghost:hover,
.btn:hover {
  background: var(--hp-soft);
}
.btn-main {
  background: var(--hp-primary);
  color: var(--hp-bg);
  border-color: var(--hp-primary);
}

/* nav muted (roast desk link) */
.hp-header nav a.nav-muted {
  color: var(--hp-muted);
  font-weight: 500;
}
.hp-header nav a.nav-muted:hover {
  color: var(--hp-text);
}
.hp-header nav a.nav-x {
  color: #1d9bf0;
  font-weight: 700;
}
.hp-header nav a.nav-x:hover {
  color: #4db5ff;
}

/* board empty */
.board-empty,
.hp-empty {
  padding: 48px 20px;
  text-align: center;
  color: var(--hp-muted);
  font-size: 13px;
}

/* live danmaku stage inside judge sidebar */
.live-body {
  min-width: 0;
}
.dm-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.dm-filter .input {
  flex: 1 1 120px;
  min-width: 0;
  height: 34px;
  border: 1px solid var(--hp-border);
  border-radius: 6px;
  background: var(--hp-bg);
  color: var(--hp-text);
  padding: 0 10px;
  font-size: 12px;
}
.dm-filter-status {
  font-size: 11px;
  color: var(--hp-muted);
  margin-bottom: 8px;
}
.dm-stage {
  position: relative;
  height: 320px;
  overflow: hidden;
  border: 1px solid var(--hp-border);
  border-radius: 10px;
  background: var(--hp-soft);
}
.dm-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--hp-muted);
  font-size: 13px;
}
.dm-item {
  position: absolute;
  left: 100%;
  white-space: nowrap;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: var(--hp-panel);
  border: 1px solid var(--hp-border);
  color: var(--hp-text);
  animation: cr-dm-fly linear forwards;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 90%;
  box-shadow: var(--hp-shadow);
}
.dm-item.is-bad {
  border-color: color-mix(in srgb, var(--hp-danger) 45%, var(--hp-border));
  color: var(--hp-danger);
}
.dm-item.is-good {
  border-color: color-mix(in srgb, #8dbb2d 45%, var(--hp-border));
}
.dm-item .dm-avatar,
.dm-item .dm-avatar-fb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 22px;
  background: var(--hp-soft);
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 800;
}
.dm-item .dm-avatar {
  display: none;
}
.dm-item .dm-avatar.is-on {
  display: block;
}
.dm-item .dm-avatar.is-on + .dm-avatar-fb {
  display: none;
}
@keyframes cr-dm-fly {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100vw - 100%));
  }
}
.feed-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.feed-status {
  font-size: 11px;
  color: var(--hp-muted);
}

/* compact review list (judge style) under/with danmaku */
.hp-live-list {
  margin-top: 8px;
}

/* wallet detail (kept) */
.wallet-detail {
  margin-bottom: 28px;
  scroll-margin-top: 88px;
}
.wallet-cover {
  color: #eef7f0;
  background-color: #101b15;
  background-image: linear-gradient(#23312755 1px, transparent 1px),
    linear-gradient(90deg, #23312755 1px, transparent 1px),
    radial-gradient(circle at 20% 20%, #294735, transparent 50%);
  background-size: 26px 26px, 26px 26px, 100% 100%;
  border: 1px solid #2e3a33;
  border-radius: 16px;
  min-height: 200px;
  padding: 28px 32px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 16px;
}
.wallet-profile-main {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.detail-avatar-wrap {
  width: 84px;
  height: 84px;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  background: #36433c;
  flex: 0 0 84px;
}
.detail-avatar-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 22px;
}
.detail-avatar {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}
.detail-avatar.is-on {
  opacity: 1;
}
.wallet-profile-copy small {
  font: 11px var(--mono, monospace);
  letter-spacing: 0.08em;
  color: #94a198;
}
.wallet-profile-copy h1 {
  font-size: 28px;
  margin: 4px 0 8px;
}
.wallet-address {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  font-size: 13px;
  color: #b7c6bb;
  min-width: 0;
  max-width: 100%;
}
.wallet-address code {
  font-family: ui-monospace, monospace;
  font-size: 12px;
  color: #e4f0e8;
  max-width: min(420px, 100%);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: bottom;
}
.wallet-address #detailSub {
  flex: 0 0 auto;
  color: #c2d0c7;
  font-weight: 600;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgb(255 255 255 / 8%);
  border: 1px solid rgb(255 255 255 / 10%);
}
.wallet-profile-copy {
  min-width: 0;
  flex: 1 1 auto;
}
.wallet-profile-copy h1 {
  color: #f4fbf6;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: min(420px, 70vw);
}
.wallet-cover-actions {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  max-width: 100%;
  min-width: 0;
}
/* 深色封面条上：浅底必须用深色字，否则几乎看不见 */
.wallet-cover-actions .write-review-button {
  background: #c6ef55;
  color: #101b15 !important;
  border: 0;
  height: 38px;
  padding: 0 16px;
  border-radius: 8px;
  font-weight: 800;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
  flex: 0 0 auto;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  visibility: visible !important;
  opacity: 1 !important;
}
.wallet-cover-actions .write-review-button:hover {
  filter: brightness(1.05);
}
.wallet-cover-actions .btn,
.wallet-cover-actions .btn-ghost,
.wallet-cover-actions a.btn {
  white-space: nowrap;
  height: 38px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  line-height: 38px;
  background: #f3f7f2 !important;
  color: #152019 !important;
  border: 1px solid #d5ddd6 !important;
  box-shadow: none;
}
.wallet-cover-actions .btn:hover,
.wallet-cover-actions a.btn:hover {
  background: #ffffff !important;
  color: #0c1410 !important;
  border-color: #c6ef55 !important;
}
/* 次要：描边按钮也保持深色字 + 浅底，避免白边白字 */
.wallet-cover-actions #btnWalletTweet {
  background: transparent !important;
  color: #eef7f0 !important;
  border: 1.5px solid #c6d4c9 !important;
}
.wallet-cover-actions #btnWalletTweet:hover {
  background: rgb(255 255 255 / 10%) !important;
  color: #ffffff !important;
  border-color: #c6ef55 !important;
}
.wallet-social-link {
  color: #a9d73c;
  font-size: 13px;
  font-weight: 700;
}
.wallet-overview {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
@media (max-width: 900px) {
  .wallet-overview {
    grid-template-columns: repeat(2, 1fr);
  }
  /* 窄屏：档案条纵向排布，发表点评整行最醒目 */
  .wallet-cover {
    flex-direction: column;
    align-items: stretch;
    padding: 20px 16px;
  }
  .wallet-cover-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .wallet-cover-actions .write-review-button {
    width: 100%;
    height: 44px;
    font-size: 15px;
    order: -1;
  }
  .wallet-cover-actions .btn,
  .wallet-cover-actions a.btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
  .wallet-reviews-head {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .wallet-review-actions {
    width: 100%;
  }
  .wallet-review-actions .write-review-button {
    width: 100%;
    height: 42px;
    display: inline-flex !important;
  }
}

/* 移动端 / 小屏：详情打开时右下角常驻「发表点评」，避免被挤出视口 */
.wallet-fab-review {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 60;
  height: 48px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: #c6ef55;
  color: #101b15;
  font-weight: 800;
  font-size: 14px;
  box-shadow: 0 8px 28px rgb(0 0 0 / 28%), 0 0 0 1px rgb(198 239 85 / 40%);
  cursor: pointer;
  display: none;
  align-items: center;
  gap: 6px;
}
.wallet-fab-review.is-on {
  display: inline-flex;
}
.wallet-fab-review:active {
  transform: scale(0.98);
}
@media (min-width: 901px) {
  /* 桌面宽屏封面按钮够用，FAB 仅在中小屏显示 */
  .wallet-fab-review {
    display: none !important;
  }
}
.wallet-overview article {
  border: 1px solid var(--hp-border);
  background: var(--hp-panel);
  border-radius: 12px;
  padding: 16px;
}
.wallet-overview span {
  display: block;
  font-size: 12px;
  color: var(--hp-muted);
  margin-bottom: 6px;
}
.wallet-overview strong {
  font-size: 26px;
  font-weight: 800;
}
.wallet-overview strong.good {
  color: #70a11d;
}
.wallet-overview .ov-stars {
  color: #c9a227;
  letter-spacing: 2px;
  margin-top: 4px;
}
.detail-rate {
  height: 6px;
  background: #ef7b7240;
  border-radius: 4px;
  overflow: hidden;
  margin: 8px 0 4px;
}
.detail-rate i {
  display: block;
  height: 100%;
  background: #8dbb2d;
}
.wallet-overview small {
  font-size: 11px;
  color: var(--hp-muted);
}
.wallet-reviews {
  border: 1px solid var(--hp-border);
  background: var(--hp-panel);
  border-radius: 12px;
  padding: 18px;
}
.wallet-reviews-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.wallet-reviews-head h2 {
  font-size: 18px;
  margin: 0 0 4px;
}
.wallet-reviews-head p {
  margin: 0;
  color: var(--hp-muted);
  font-size: 13px;
}
.detail-section-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--hp-muted);
  margin: 14px 0 8px;
  letter-spacing: 0.04em;
}
.review-list .review-card {
  border: 1px solid var(--hp-border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
  background: var(--hp-soft);
}
.review-card .rc-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  color: var(--hp-muted);
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.review-card .rc-body {
  font-size: 14px;
  line-height: 1.55;
  font-weight: 600;
}
.note-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.note-tags span,
.meme-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--hp-soft);
  border: 1px solid var(--hp-border);
}
.detail-meme-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

/* extension box */
.ext-box {
  margin-top: 28px;
  border: 1px solid var(--hp-border);
  background: var(--hp-panel);
  border-radius: 14px;
  padding: 24px 28px;
}
.ext-box h3 {
  font-size: 18px;
  margin: 0 0 8px;
}
.ext-box p,
.ext-box li {
  color: var(--hp-muted);
  font-size: 13px;
  line-height: 1.65;
}
.ext-box ol {
  margin: 12px 0 16px 18px;
}
.ext-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* modal (review) — matches judge overlay；可滚，避免小屏裁掉底部按钮 */
.review-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  place-items: center;
  padding: 16px 12px;
  background: rgb(0 0 0 / 55%);
  backdrop-filter: blur(5px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.review-dialog-overlay.is-open,
.review-dialog-overlay:not([hidden]) {
  display: grid;
}
.review-dialog-overlay[hidden] {
  display: none !important;
}
.review-dialog header button.btn-close {
  border: 0;
  background: transparent;
  color: var(--hp-muted);
  font-size: 25px;
  cursor: pointer;
  line-height: 1;
}
.review-dialog-scroll .field {
  margin-top: 14px;
}
.review-dialog-scroll .field .label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--hp-muted);
}
.review-dialog-scroll .field .row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.review-dialog-scroll .input,
.review-dialog-scroll select.input,
.review-dialog-scroll textarea.input {
  width: 100%;
  box-sizing: border-box;
}
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  place-items: center;
  padding: 20px;
  background: rgb(0 0 0 / 55%);
  backdrop-filter: blur(5px);
}
.modal-overlay.open {
  display: grid;
}
.modal-panel {
  width: min(520px, 100%);
  max-height: min(92vh, 900px);
  overflow: auto;
  padding: 22px;
  border: 1px solid var(--hp-border);
  border-radius: 13px;
  background: var(--hp-panel);
  box-shadow: 0 25px 90px rgb(0 0 0 / 30%);
}
.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hp-border);
  margin-bottom: 8px;
}
.modal-head h2 {
  margin: 0;
  font-size: 18px;
}
.modal-close {
  border: 0;
  background: transparent;
  color: var(--hp-muted);
  font-size: 24px;
  cursor: pointer;
  line-height: 1;
}
.field {
  margin: 14px 0;
}
.label {
  display: flex;
  justify-content: space-between;
  color: var(--hp-muted);
  font-size: 12px;
  margin-bottom: 8px;
  font-weight: 600;
}
.row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.input,
select.input,
textarea.input {
  width: 100%;
  border: 1px solid var(--hp-border);
  background: var(--hp-bg);
  color: var(--hp-text);
  border-radius: 7px;
  padding: 10px 11px;
  outline: none;
  font-size: 13px;
}
select.input {
  width: auto;
  min-width: 100px;
}
textarea.input {
  min-height: 100px;
  resize: vertical;
}
.review-star-picker {
  display: flex;
  gap: 2px;
}
.review-star-picker .star-btn {
  background: 0;
  border: 0;
  padding: 0 4px;
  font-size: 28px;
  color: #59625c;
  cursor: pointer;
  line-height: 1;
}
.review-star-picker .star-btn.active {
  color: #d7b029;
}
.review-sentiment {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.sent-btn {
  border: 1px solid var(--hp-border);
  background: var(--hp-soft);
  height: 38px;
  color: var(--hp-muted);
  border-radius: 7px;
  cursor: pointer;
  font-weight: 600;
}
.sent-btn.active[data-sent="good"] {
  color: #78a329;
  border-color: #8dbb2d;
  background: #f2f8e6;
}
.sent-btn.active[data-sent="bad"] {
  color: #df6258;
  border-color: #df6258;
  background: #fff0ef;
}
html[data-theme="dark"] .sent-btn.active[data-sent="good"] {
  background: #1a2414;
}
html[data-theme="dark"] .sent-btn.active[data-sent="bad"] {
  background: #2a1616;
}
.note-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.note-chip {
  border: 1px solid var(--hp-border);
  background: var(--hp-soft);
  color: var(--hp-muted);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.note-chip.active,
.note-chip:hover {
  color: #587817;
  border-color: #8dbb2d;
  background: #edf6dc;
}
.modal-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
}
#nickInput.is-auth-locked {
  opacity: 0.95;
  border-color: #c5df8a;
  color: #587817;
  font-weight: 700;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(16px);
  background: var(--hp-primary);
  color: var(--hp-bg);
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: 0.2s ease;
  z-index: 99;
  max-width: 90vw;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* table row cursor already in judge css */
.hp-table-wrap tbody tr[data-chain] {
  cursor: pointer;
}
.hp-footer {
  margin-top: 40px;
}

@media (max-width: 900px) {
  .hp-header .lang-switch,
  .hp-header .auth-box .btn-ghost#btnAuthLogout {
    display: none;
  }
}