/* 烧心杯 UI · 按钮 / 顶部栏 / 返回 / 图标
   依赖 tokens.css；只用令牌变量，半透明一律 color-mix 基于令牌色 */

.sx-icon { display: inline-block; flex-shrink: 0; vertical-align: middle; }

/* ---------- 按钮基础 ---------- */
.sx-btn {
  --_h: 44px; --_px: 20px; --_fs: 15px; --_fg: var(--sx-text);
  --_cut: 10px;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--_h); min-width: 40px; padding: 0 var(--_px);
  font: 700 var(--_fs)/1 var(--sx-font); letter-spacing: .04em; white-space: nowrap;
  color: var(--_fg); text-decoration: none;
  background: var(--sx-surface-2);
  border: 1px solid var(--sx-line); border-radius: var(--sx-r-sm);
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: transform var(--sx-t) var(--sx-ease-back), filter var(--sx-t) var(--sx-ease),
    box-shadow var(--sx-t) var(--sx-ease), background-color var(--sx-t) var(--sx-ease),
    border-color var(--sx-t) var(--sx-ease), color var(--sx-t) var(--sx-ease);
}
.sx-btn:hover { filter: brightness(1.1); transform: translateY(-1px); border-color: var(--sx-line-strong); }
/* 按下用更快的时长，手感更“脆” */
.sx-btn:active { transform: scale(.96); filter: brightness(.92); transition-duration: var(--sx-t-fast); }
.sx-btn:focus-visible { outline: none; box-shadow: var(--sx-focus); }
.sx-btn__icon { display: inline-flex; }
.sx-btn__icon > svg { width: 1.2em; height: 1.2em; }

/* 尺寸：sm 也保持 40 高，满足最小点击区域 */
.sx-btn--sm { --_h: 40px; --_px: 14px; --_fs: 13px; gap: 6px; }
.sx-btn--md { --_h: 44px; --_px: 20px; --_fs: 15px; }
.sx-btn--lg { --_h: 54px; --_px: 30px; --_fs: 17px; --_cut: 14px; gap: 10px; border-radius: var(--sx-r); }
.sx-btn--block { display: flex; width: 100%; }

/* ---------- 变体 ---------- */
.sx-btn--gold {
  --_fg: var(--sx-on-gold);
  background: var(--sx-grad-gold);
  border-color: color-mix(in srgb, var(--sx-gold-4) 70%, transparent);
  text-shadow: 0 1px 0 color-mix(in srgb, var(--sx-gold-1) 60%, transparent);
  box-shadow: inset 0 1px 0 var(--sx-gold-1),
    inset 0 0 0 1px color-mix(in srgb, var(--sx-gold-1) 35%, transparent),
    inset 0 -2px 0 color-mix(in srgb, var(--sx-gold-4) 45%, transparent),
    0 4px 16px color-mix(in srgb, var(--sx-gold-3) 22%, transparent);
}
.sx-btn--gold:hover { border-color: var(--sx-gold-3); box-shadow: inset 0 1px 0 var(--sx-gold-1), inset 0 0 0 1px color-mix(in srgb, var(--sx-gold-1) 45%, transparent), var(--sx-glow-gold); }

.sx-btn--beam {
  --_fg: var(--sx-on-gold);
  background: linear-gradient(180deg, var(--sx-beam) 0%, var(--sx-beam-2) 100%);
  border-color: var(--sx-beam-2);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--sx-gold-1) 80%, transparent), 0 6px 22px color-mix(in srgb, var(--sx-beam) 28%, transparent);
}
.sx-btn--beam:hover { border-color: var(--sx-beam); box-shadow: inset 0 1px 0 var(--sx-gold-1), var(--sx-glow-beam); }
/* 扫光：斜向高光条，hover 时扫过一次 */
.sx-btn--beam::after {
  content: ''; position: absolute; z-index: -1; top: -20%; bottom: -20%; left: -40%; width: 30%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--sx-gold-1) 75%, transparent), transparent);
  transform: translateX(-120%) skewX(-20deg); pointer-events: none;
}
.sx-btn--beam:hover::after { animation: sx-sweep 900ms var(--sx-ease) both; }
@keyframes sx-sweep { to { transform: translateX(560%) skewX(-20deg); } }

.sx-btn--ghost { --_fg: var(--sx-gold-2); background: transparent; border-color: var(--sx-line-strong); }
.sx-btn--ghost:hover { --_fg: var(--sx-gold-1); border-color: var(--sx-gold-2); background: color-mix(in srgb, var(--sx-gold-2) 10%, transparent); }

.sx-btn--text { --_fg: var(--sx-gold-2); --_px: 10px; background: transparent; border-color: transparent; }
.sx-btn--text:hover { --_fg: var(--sx-gold-1); border-color: transparent; background: color-mix(in srgb, var(--sx-gold-2) 8%, transparent); transform: none; }

.sx-btn--danger {
  --_fg: color-mix(in srgb, var(--sx-red) 70%, var(--sx-text));
  background: color-mix(in srgb, var(--sx-red) 14%, transparent);
  border-color: color-mix(in srgb, var(--sx-red) 55%, transparent);
}
.sx-btn--danger:hover { --_fg: var(--sx-text); background: var(--sx-red); border-color: var(--sx-red); }

/* ---------- 圆形图标按钮 ---------- */
.sx-btn--icon { --_fg: var(--sx-gold-2); width: var(--_h); padding: 0; border-radius: 50%; }
.sx-btn--icon:hover { --_fg: var(--sx-gold-1); }
.sx-btn--icon .sx-btn__icon > svg, .sx-btn--icon > svg { width: 20px; height: 20px; }
.sx-btn--icon.sx-btn--gold, .sx-btn--icon.sx-btn--beam { --_fg: var(--sx-on-gold); }

/* ---------- 切角：clip-path 切左上/右下，::before 用 evenodd 画 1px 内框 ---------- */
.sx-btn--cut {
  border-radius: 0; border-color: transparent;
  clip-path: polygon(var(--_cut) 0, 100% 0, 100% calc(100% - var(--_cut)), calc(100% - var(--_cut)) 100%, 0 100%, 0 var(--_cut));
}
.sx-btn--cut::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--_frame, var(--sx-line-strong));
  clip-path: polygon(evenodd,
    var(--_cut) 0, 100% 0, 100% calc(100% - var(--_cut)), calc(100% - var(--_cut)) 100%, 0 100%, 0 var(--_cut),
    calc(var(--_cut) + .5px) 1px, calc(100% - 1px) 1px, calc(100% - 1px) calc(100% - var(--_cut) - .5px),
    calc(100% - var(--_cut) - .5px) calc(100% - 1px), 1px calc(100% - 1px), 1px calc(var(--_cut) + .5px));
  transition: background-color var(--sx-t) var(--sx-ease);
}
.sx-btn--cut:hover { border-color: transparent; }
.sx-btn--cut.sx-btn--ghost:hover { --_frame: var(--sx-gold-2); }
.sx-btn--cut.sx-btn--gold { --_frame: color-mix(in srgb, var(--sx-gold-4) 80%, transparent); box-shadow: inset 0 1px 0 var(--sx-gold-1); }
.sx-btn--cut.sx-btn--beam { --_frame: var(--sx-beam-2); box-shadow: none; }
/* clip-path 会裁掉外发光，所以切角按钮 hover 改用亮度表达 */
.sx-btn--cut.sx-btn--gold:hover, .sx-btn--cut.sx-btn--beam:hover { box-shadow: inset 0 1px 0 var(--sx-gold-1); filter: brightness(1.14); }
.sx-btn--cut.sx-btn--danger { --_frame: color-mix(in srgb, var(--sx-red) 55%, transparent); }
.sx-btn--cut:focus-visible { clip-path: none; }

/* ---------- 状态 ---------- */
.sx-btn:disabled, .sx-btn.is-disabled, .sx-btn[aria-disabled="true"] {
  cursor: not-allowed; opacity: .42; filter: saturate(.4); transform: none; box-shadow: none; pointer-events: none;
}
/* loading：文字与图标透明化保留宽度，转圈用 SVG 蒙版 + 前景色 */
.sx-btn.is-loading { color: transparent; text-shadow: none; pointer-events: none; cursor: progress; }
.sx-btn.is-loading::after {
  content: ''; position: absolute; z-index: 1; inset: 0; margin: auto; left: 0; width: 1.25em; height: 1.25em;
  background: var(--_fg); transform: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23000' stroke-opacity='.25' stroke-width='3'/%3E%3Cpath d='M12 3a9 9 0 0 1 9 9' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23000' stroke-opacity='.25' stroke-width='3'/%3E%3Cpath d='M12 3a9 9 0 0 1 9 9' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: sx-spin 700ms linear infinite;
}
@keyframes sx-spin { to { transform: rotate(360deg); } }

/* ---------- 涟漪（SXUI.ripple 插入） ---------- */
.sx-ripple {
  position: absolute; z-index: 0; border-radius: 50%; pointer-events: none;
  background: currentColor; opacity: .28; transform: scale(0);
  animation: sx-ripple 560ms var(--sx-ease) forwards;
}
.sx-btn--gold .sx-ripple, .sx-btn--beam .sx-ripple { background: var(--sx-gold-1); opacity: .5; }
@keyframes sx-ripple { to { transform: scale(1); opacity: 0; } }

/* ---------- 按钮组：相邻按钮拼接，只保留外侧圆角 ---------- */
.sx-btn-group { display: inline-flex; align-items: stretch; }
.sx-btn-group > .sx-btn:not(:first-child) { margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.sx-btn-group > .sx-btn:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.sx-btn-group > .sx-btn:hover, .sx-btn-group > .sx-btn:focus-visible { z-index: 1; }
.sx-btn-group > .sx-btn.is-active { --_fg: var(--sx-on-gold); background: var(--sx-grad-gold); border-color: var(--sx-gold-3); }
.sx-btn-group--spaced { gap: 10px; flex-wrap: wrap; }
.sx-btn-group--spaced > .sx-btn { margin-left: 0 !important; border-radius: var(--sx-r-sm) !important; }

/* ---------- 返回按钮 ---------- */
.sx-back {
  display: inline-flex; align-items: center; gap: 4px;
  height: 40px; min-width: 40px; padding: 0 12px 0 6px;
  font: 600 14px/1 var(--sx-font); letter-spacing: .06em; color: var(--sx-gold-2);
  background: transparent; border: 1px solid transparent; border-radius: var(--sx-r-sm);
  cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent;
  transition: color var(--sx-t) var(--sx-ease), background-color var(--sx-t) var(--sx-ease),
    border-color var(--sx-t) var(--sx-ease), transform var(--sx-t-fast) var(--sx-ease);
}
.sx-back__arrow { width: 26px; height: 26px; transition: transform var(--sx-t) var(--sx-ease-back); }
.sx-back__arrow .sx-back__ring { opacity: .35; transition: opacity var(--sx-t) var(--sx-ease); }
.sx-back:hover { color: var(--sx-gold-1); background: color-mix(in srgb, var(--sx-gold-2) 8%, transparent); border-color: var(--sx-line); }
.sx-back:hover .sx-back__arrow { transform: translateX(-3px); }
.sx-back:hover .sx-back__ring { opacity: .8; }
.sx-back:active { transform: scale(.96); filter: brightness(.9); }
.sx-back:focus-visible { outline: none; box-shadow: var(--sx-focus); }
.sx-back:disabled { opacity: .42; cursor: not-allowed; pointer-events: none; }
.sx-back--icon { padding: 0; width: 40px; justify-content: center; }

/* ---------- 顶部栏 ---------- */
.sx-topbar {
  position: sticky; top: 0; z-index: 50;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr) minmax(0, 1fr); align-items: center; gap: 8px;
  height: calc(var(--sx-topbar-h) + 8px); padding: 0 16px;
  background: color-mix(in srgb, var(--sx-bg) 72%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  transition: box-shadow var(--sx-t) var(--sx-ease), background-color var(--sx-t) var(--sx-ease);
}
/* 底部金线：中间亮两端淡 */
.sx-topbar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, var(--sx-line-strong) 25%, var(--sx-gold-2) 50%, var(--sx-line-strong) 75%, transparent 100%);
}
.sx-topbar.is-scrolled { background: color-mix(in srgb, var(--sx-bg) 90%, transparent); box-shadow: var(--sx-shadow); }
.sx-topbar__left, .sx-topbar__right { display: flex; align-items: center; gap: 6px; min-width: 0; }
.sx-topbar__right { justify-content: flex-end; }
.sx-topbar__title {
  margin: 0; min-width: 0; text-align: center;
  font: 800 18px/1.2 var(--sx-font); letter-spacing: .08em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: var(--sx-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sx-topbar__brand { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; min-width: 0; color: var(--sx-gold-2); text-decoration: none; font-weight: 800; letter-spacing: .1em; white-space: nowrap; }
.sx-topbar__brand > span { overflow: hidden; text-overflow: ellipsis; }
.sx-topbar__brand-mark { width: 10px; height: 10px; flex-shrink: 0; transform: rotate(45deg); border: 1.5px solid var(--sx-gold-2); box-shadow: inset 0 0 0 2px var(--sx-bg), inset 0 0 0 5px var(--sx-gold-3); }

@media (max-width: 640px) {
  .sx-topbar { height: var(--sx-topbar-h); padding: 0 8px; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); }
  .sx-topbar__title { font-size: 16px; letter-spacing: .04em; }
  .sx-topbar .sx-back__text { display: none; }
  .sx-topbar .sx-back { padding: 0; width: 40px; justify-content: center; }
  .sx-btn--lg { --_h: 50px; --_px: 24px; --_fs: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .sx-btn:hover, .sx-back:hover .sx-back__arrow { transform: none; }
  .sx-btn--beam:hover::after { animation: none; }
}