:root {
  --background: 0 0% 0%;
  --foreground: 0 0% 100%;
  --muted: 0 0% 80%;
  --soft: 0 0% 60%;
  --faint: 0 0% 50%;
  --radius: 1rem;
}

* {
  box-sizing: border-box;
}

html,
body,
#root {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

body {
  color: hsl(var(--foreground));
  background: hsl(var(--background));
  font-family: "Poppins", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
  letter-spacing: 0;
}

button,
input {
  font: inherit;
}

select {
  font: inherit;
}

button,
a {
  color: inherit;
}

button {
  padding: 0;
}

svg {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app-shell {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
}

.app-content {
  position: relative;
  z-index: 10;
  min-height: 100vh;
}

.video-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  backface-visibility: hidden;
  will-change: transform;
  transform: translateZ(0);
  filter: saturate(1.04) contrast(1.02);
}

.video-background-stack {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  /* 视频首帧加载前的兜底：接近沙滩场景的渐变，避免黑屏 */
  background: linear-gradient(180deg, #3f8fc4 0%, #5aa9d6 40%, #8ecbe4 62%, #cfe0d8 76%, #e6c9a3 88%, #d9ab72 100%);
}

.background-light-rays {
  position: fixed;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.72;
  mix-blend-mode: screen;
}

.hero-split {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: stretch;
  min-height: 100vh;
}

.left-panel {
  position: relative;
  width: 52%;
  min-height: 100vh;
  padding: 1.5rem;
}

.right-panel {
  position: relative;
  z-index: 12;
  width: 48%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem 1.5rem 1.5rem 0;
  pointer-events: auto;
}

.left-glass {
  position: absolute;
  inset: 1.5rem;
  border-radius: 1.5rem;
}

.left-content {
  position: relative;
  z-index: 10;
  min-height: calc(100vh - 3rem);
  display: flex;
  flex-direction: column;
  padding: 1.2rem 1.5rem;
}

.liquid-glass,
.liquid-glass-strong {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.01);
  background-blend-mode: luminosity;
  border: none;
}

.liquid-glass {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
}

.liquid-glass-strong {
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
  box-shadow:
    4px 4px 4px rgba(0, 0, 0, 0.05),
    inset 0 1px 1px rgba(255, 255, 255, 0.15);
}

.liquid-glass::before,
.liquid-glass-strong::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.4px;
  border-radius: inherit;
  pointer-events: none;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.liquid-glass::before {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.45) 0%,
    rgba(255, 255, 255, 0.15) 20%,
    transparent 40%,
    transparent 60%,
    rgba(255, 255, 255, 0.15) 80%,
    rgba(255, 255, 255, 0.45) 100%
  );
}

.liquid-glass-strong::before {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0.2) 20%,
    transparent 40%,
    transparent 60%,
    rgba(255, 255, 255, 0.2) 80%,
    rgba(255, 255, 255, 0.5) 100%
  );
}

.glass-shine {
  display: none;
}

.liquid-glass > :not(.glass-shine),
.liquid-glass-strong > :not(.glass-shine) {
  position: relative;
  z-index: 1;
}

.glass-button {
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: none;
  color: hsl(var(--foreground) / 0.8);
  background: rgba(255, 255, 255, 0.01);
  border-radius: 999px;
  cursor: pointer;
  transition: color 180ms ease, background 180ms ease;
}

.button-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.glass-button:hover,
.glass-button.is-active {
  color: hsl(var(--foreground));
}

.glass-button:active {
  transform: scale(0.95);
}

.bloom-nav {
  position: relative;
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  min-height: 2.7rem;
}

.brand-block {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.brand-logo {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
}

.brand-logo svg,
.hero-logo svg,
.flower-thumb svg {
  width: 100%;
  height: 100%;
  fill: hsl(var(--foreground) / 0.12);
  color: hsl(var(--foreground) / 0.85);
}

.brand-block strong {
  color: hsl(var(--foreground));
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.05em;
}

.hero-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1rem;
  padding: 2rem 0 1.5rem;
}

.hero-logo {
  width: 5rem;
  height: 5rem;
  display: grid;
  place-items: center;
}

.hero-center h1 {
  max-width: 760px;
  margin: 0;
  color: hsl(var(--foreground));
  font-size: clamp(3.25rem, 7vw, 5.6rem);
  font-weight: 500;
  line-height: 0.88;
  letter-spacing: -0.05em;
}

.hero-center h1 em {
  color: hsl(var(--foreground) / 0.8);
  font-family: "Source Serif 4", Georgia, serif;
  font-style: italic;
  font-weight: 400;
}

.hero-center p {
  max-width: 620px;
  margin: 0;
  color: hsl(var(--foreground) / 0.72);
  font-size: 0.95rem;
  line-height: 1.7;
}

.icon-circle {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
}

.icon-circle svg {
  width: 1rem;
  height: 1rem;
}

.nav-stack {
  position: absolute;
  left: 50%;
  top: 0.35rem;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  width: min(760px, calc(100% - 14rem));
  max-width: 760px;
}

.nav-button {
  min-height: 2rem;
  padding: 0 0.85rem;
  color: hsl(var(--foreground) / 0.8);
  font-size: 0.75rem;
}

.nav-button.is-active {
  color: hsl(var(--foreground));
  background: rgba(255, 255, 255, 0.08);
}

.bottom-quote {
  position: relative;
  z-index: 14;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-align: center;
  transform: none;
}

.bottom-quote nav {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.bottom-quote strong {
  color: hsl(var(--foreground) / 0.65);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
}

.bottom-quote button {
  border: none;
  color: hsl(var(--foreground) / 0.62);
  background: transparent;
  cursor: pointer;
  font-size: 0.75rem;
  transition: transform 180ms ease, color 180ms ease;
}

.bottom-quote button:hover {
  transform: scale(1.05);
  color: hsl(var(--foreground));
}

.right-topbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.8rem;
}

.account-button svg {
  width: 1rem;
  height: 1rem;
}

.account-button {
  min-height: 2.7rem;
  padding: 0 1.15rem;
  border-radius: 999px;
  color: hsl(var(--foreground) / 0.85);
  font-size: 0.9rem;
}

.account-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  transition: transform 180ms ease, color 180ms ease, background 180ms ease;
}

.account-button:hover {
  transform: scale(1.05);
  color: hsl(var(--foreground));
}

.account-button:active {
  transform: scale(0.95);
}

.community-card {
  width: 21rem;
  margin: 9vh 0 0 auto;
  padding: 1rem;
  border-radius: 1.25rem;
}

.community-card h3,
.feature-card h3,
.bottom-feature h3 {
  margin: 0;
  color: hsl(var(--foreground));
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.03em;
}

.community-card p,
.feature-card p,
.bottom-feature p {
  margin: 0.45rem 0 0;
  color: hsl(var(--foreground) / 0.6);
  font-size: 0.75rem;
  line-height: 1.6;
}

.work-time-card {
  width: min(560px, 100%);
  display: grid;
  gap: 0.75rem;
  padding: 0.95rem;
  border-radius: 1.4rem;
}

.countdown-card {
  margin-top: 0.4rem;
}

.work-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

.work-card-head span {
  flex: 0 0 auto;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  color: hsl(var(--foreground) / 0.72);
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.7rem;
}

.work-settings-toggle {
  flex: 0 0 auto;
  padding: 0.25rem 0.65rem;
  border: none;
  border-radius: 999px;
  color: hsl(var(--foreground) / 0.72);
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
  font-size: 0.7rem;
  transition: transform 180ms ease, color 180ms ease;
}

.work-settings-toggle:hover {
  transform: scale(1.05);
  color: hsl(var(--foreground));
}

.work-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.work-time-field {
  display: grid;
  gap: 0.35rem;
}

.work-time-field span {
  color: hsl(var(--foreground) / 0.55);
  font-size: 0.68rem;
}

.work-time-field input,
.work-time-field select {
  width: 100%;
  height: 2.4rem;
  padding: 0 0.65rem;
  border: none;
  outline: none;
  border-radius: 999px;
  color: hsl(var(--foreground));
  background: rgba(255, 255, 255, 0.08);
}

.work-time-field select {
  appearance: none;
}

.mini-countdown {
  min-height: 4.1rem;
  display: grid;
  place-items: center;
  gap: 0.15rem;
  border-radius: 1.15rem;
  background: rgba(255, 255, 255, 0.08);
}

.mini-countdown span,
.meal-row span,
.salary-line {
  color: hsl(var(--foreground) / 0.6);
  font-size: 0.72rem;
}

.mini-countdown strong {
  color: hsl(var(--foreground));
  font-size: clamp(1.8rem, 3.8vw, 2.85rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.05em;
}

.countdown-card.is-compact .mini-countdown {
  min-height: 5.6rem;
  gap: 0.35rem;
}

.countdown-card.is-compact .mini-countdown span {
  font-size: 0.8rem;
}

.countdown-card.is-compact .mini-countdown strong {
  font-size: clamp(2.45rem, 5vw, 3.45rem);
}

.meal-row {
  min-height: 2.65rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 0.55rem;
  align-items: center;
  padding: 0 0.75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.countdown-card.is-compact .meal-row {
  grid-template-columns: auto minmax(0, 1fr);
}

.meal-row strong {
  overflow: hidden;
  color: hsl(var(--foreground));
  font-size: 0.9rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meal-button {
  min-height: 1.8rem;
  padding: 0 0.58rem;
  border: none;
  border-radius: 999px;
  color: hsl(var(--foreground) / 0.8);
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
  font-size: 0.7rem;
}

.meal-source {
  margin-top: -0.25rem;
  color: hsl(var(--foreground) / 0.48);
  font-size: 0.68rem;
  text-align: center;
}

.work-meter {
  display: grid;
  gap: 0.45rem;
}

.work-meter div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
}

.work-meter span {
  color: hsl(var(--foreground) / 0.6);
  font-size: 0.72rem;
}

.work-meter strong {
  color: hsl(var(--foreground));
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: -0.04em;
}

.work-meter i {
  height: 0.45rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.work-meter b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.72);
  transition: width 260ms ease;
}

.work-actions {
  display: flex;
  gap: 0.5rem;
}

.work-actions .glass-button {
  min-height: 2.25rem;
  flex: 1;
  font-size: 0.72rem;
}

.salary-line {
  min-height: 2.65rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.55rem;
  padding: 0 0.75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.salary-line strong {
  color: hsl(var(--foreground));
  font-weight: 500;
}

.feature-shell {
  margin-top: auto;
  margin-bottom: 2rem;
  padding: 1rem;
  border-radius: 2.5rem;
  width: min(640px, 100%);
  pointer-events: auto;
}

.feature-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
  margin-bottom: 0.8rem;
}

.feature-card {
  min-height: 9rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1rem;
  border-radius: 1.5rem;
}

.bottom-feature {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr) auto;
  gap: 0.9rem;
  align-items: center;
  padding: 0.8rem;
  border-radius: 1.75rem;
}

.flower-thumb {
  width: 6rem;
  height: 4rem;
  display: grid;
  place-items: center;
  border-radius: 1.15rem;
  background: rgba(255, 255, 255, 0.1);
}

.plus-button,
.modal-close,
.close-ad {
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 999px;
  color: hsl(var(--foreground));
  background: rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease;
}

.plus-button:hover,
.modal-close:hover,
.close-ad:hover {
  transform: scale(1.05);
  background: rgba(255, 255, 255, 0.16);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.modal-window {
  width: min(620px, 100%);
  padding: 1.2rem;
  border-radius: 1.5rem;
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.modal-head h3 {
  margin: 0;
  color: hsl(var(--foreground));
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: -0.04em;
}

.modal-body {
  margin-top: 1rem;
  color: hsl(var(--foreground) / 0.8);
  line-height: 1.7;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 1.2rem;
}

.modal-actions .glass-button {
  padding: 0 1rem;
}

/* 登录/注册弹窗：提交按钮放大并占满整行 */
.modal-actions-auth {
  justify-content: stretch;
}

.modal-actions-auth .auth-submit-button {
  width: 100%;
  padding: 0.9rem 1.5rem;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  border-radius: 1rem;
}

.primary-action {
  color: hsl(var(--foreground));
  background: rgba(255, 255, 255, 0.1);
}

.login-form,
.settings-list,
.detail-copy,
.version-list {
  display: grid;
  gap: 0.8rem;
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding: 0.25rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.auth-tabs button {
  min-height: 2.2rem;
  border: none;
  border-radius: 999px;
  color: hsl(var(--foreground) / 0.65);
  background: transparent;
  cursor: pointer;
}

.auth-tabs button.is-active {
  color: hsl(var(--foreground));
  background: rgba(255, 255, 255, 0.12);
}

.login-form label {
  display: grid;
  gap: 0.35rem;
  color: hsl(var(--foreground) / 0.85);
}

.login-form input {
  height: 2.75rem;
  padding: 0 0.9rem;
  color: hsl(var(--foreground));
  border: none;
  outline: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.login-form input::placeholder {
  color: hsl(var(--foreground) / 0.5);
}

.check-row {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: 0.5rem !important;
}

.check-row input {
  width: 1rem;
  height: 1rem;
}

.auth-tip {
  margin: 0;
  color: hsl(var(--foreground) / 0.55);
  font-size: 0.75rem;
}

.auth-tip.is-error {
  color: #f56c6c;
  font-weight: 600;
}

/* 我的资料卡（已登录点击右上角按钮弹出：编辑头像/昵称 + 退出登录） */
.me-form { display: flex; flex-direction: column; gap: 0.8rem; }
.me-top { display: flex; align-items: center; gap: 1rem; }
.me-avatar-edit {
  position: relative; width: 4.2rem; height: 4.2rem; border-radius: 50%;
  overflow: hidden; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.2rem; background: hsl(var(--foreground) / 0.08);
  border: 1px dashed hsl(var(--foreground) / 0.35);
}
.me-avatar-edit img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.me-avatar-edit::after {
  content: "更换"; position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2px 0; font-size: 0.65rem; text-align: center; color: #fff;
  background: rgba(0, 0, 0, 0.45); opacity: 0; transition: opacity 0.15s;
}
.me-avatar-edit:hover::after { opacity: 1; }
.me-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.me-info label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.78rem; color: hsl(var(--foreground) / 0.6); }
.me-info input {
  padding: 0.45rem 0.7rem; border-radius: 0.6rem;
  border: 1px solid hsl(var(--foreground) / 0.2);
  background: hsl(var(--foreground) / 0.06);
  color: hsl(var(--foreground)); font-size: 0.9rem; outline: none;
}
.me-info input:focus { border-color: hsl(var(--foreground) / 0.45); }
.me-actions { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 0.3rem; }
.me-actions .glass-button { padding: 0 1.2rem; }  /* 宽度随文字自适应：文字 + padding */

.drift-report-btn {
  margin-top: 0.5rem;
  padding: 0;
  border: none;
  background: none;
  color: hsl(var(--foreground) / 0.4);
  font-size: 0.7rem;
  cursor: pointer;
  text-decoration: underline dotted;
}

.drift-report-btn:hover {
  color: #f56c6c;
}

.settings-row {
  min-height: 3rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0 0.85rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.08);
}

.version-list {
  margin: 0;
  padding-left: 1.1rem;
}

.top-login-button {
  position: absolute;
  top: 0;
  right: 0;
}

.page-split {
  display: block;
  padding: 1.5rem;
}

.page-panel {
  width: min(1180px, 100%);
  min-height: calc(100vh - 3rem);
  margin: 0 auto;
  padding: 0;
}

.page-panel .left-glass {
  inset: 0;
}

.page-content {
  min-height: calc(100vh - 3rem);
  padding: 4.8rem 2rem 1.2rem;
}

.page-title-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1rem;
}

.page-kicker {
  color: hsl(var(--foreground) / 0.5);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
}

.page-title-row h1 {
  margin: 0.25rem 0 0;
  color: hsl(var(--foreground));
  font-size: clamp(2.6rem, 6vw, 4.8rem);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.05em;
}

.page-title-row p {
  max-width: 640px;
  margin: 0.65rem 0 0;
  color: hsl(var(--foreground) / 0.68);
  font-size: 0.9rem;
  line-height: 1.7;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex: 0 0 auto;
}

.search-box {
  min-height: 2.7rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0 0.9rem;
  border-radius: 999px;
}

.search-box span {
  color: hsl(var(--foreground) / 0.55);
  font-size: 0.75rem;
}

.search-box input {
  width: 13rem;
  border: none;
  outline: none;
  color: hsl(var(--foreground));
  background: transparent;
}

.search-box input::placeholder {
  color: hsl(var(--foreground) / 0.45);
}

.source-tabs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.55rem;
  border-radius: 1.5rem;
}

.source-tabs .glass-button {
  min-height: 2rem;
  padding: 0 0.8rem;
  font-size: 0.74rem;
}

.hot-status {
  margin-bottom: 0.7rem;
  color: hsl(var(--foreground) / 0.58);
  font-size: 0.75rem;
  text-align: center;
}

.module-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
  margin-top: 0.9rem;
}

.hot-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.95rem;
  margin-top: 1rem;
  align-items: start;
}

.hot-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 1rem;
  border-radius: 1.2rem;
}

.hot-hero-copy {
  min-width: 0;
  display: grid;
  gap: 0.25rem;
}

.hot-hero-copy h2 {
  margin: 0;
  color: hsl(var(--foreground));
  font-size: 1.05rem;
  font-weight: 600;
}

.hot-hero-copy p {
  margin: 0;
  color: hsl(var(--foreground) / 0.52);
  font-size: 0.78rem;
  line-height: 1.55;
}

.hot-hero-badge {
  flex: none;
  padding: 0.5rem 0.8rem;
  border-radius: 999px;
  color: hsl(var(--foreground) / 0.82);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.12);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
}

.module-card,
.todo-column,
.pet-card {
  display: block;
  padding: 1rem;
  border-radius: 1.4rem;
}

.hot-card {
  display: block;
  min-height: 29.5rem;
  aspect-ratio: 0.93;
  padding: 0.95rem;
  border-radius: 1.2rem;
  position: relative;
  overflow: hidden;
  background: rgba(10, 34, 46, 0.45); /* 深青遮罩底，保证白字在亮沙滩背景上可读 */
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
  box-shadow:
    4px 4px 4px rgba(0, 0, 0, 0.05),
    inset 0 1px 1px rgba(255, 255, 255, 0.15);
}

.hot-card-tint {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--hot-gradient, linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06)));
  opacity: 0.3; /* 彩色 tint 减弱，避免抬亮卡片压过白字 */
  pointer-events: none;
}

.hot-card-head {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.65rem;
  align-items: center;
}

.source-icon {
  width: 2.3rem;
  height: 2.3rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: hsl(var(--foreground));
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent, #ffffff) 42%, rgba(255, 255, 255, 0.08)), rgba(255, 255, 255, 0.08));
  font-weight: 600;
}

.source-icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

.source-icon img {
  width: 1.35rem;
  height: 1.35rem;
  display: block;
  object-fit: contain;
  border-radius: 0.35rem;
}

.hot-logo-fallback {
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 0.35rem;
  color: hsl(var(--foreground));
  font-size: 0.78rem;
  font-weight: 600;
}

.source-meta {
  min-width: 0;
  display: grid;
  gap: 0.15rem;
}

.source-meta strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: hsl(var(--foreground));
  font-size: 0.98rem;
  font-weight: 500;
}

.source-meta span {
  overflow: hidden;
  color: hsl(var(--foreground) / 0.48);
  font-size: 0.66rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-menu {
  border: none;
  color: hsl(var(--foreground) / 0.55);
  background: transparent;
  cursor: pointer;
}

.result-title {
  margin: 0.85rem 0 0;
  color: hsl(var(--foreground));
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.03em;
}

.result-desc {
  margin: 0.45rem 0 0;
  color: hsl(var(--foreground) / 0.6);
  font-size: 0.76rem;
  line-height: 1.65;
}

.rank-list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.38rem;
  margin: 0.78rem 0 0;
  padding: 0;
  list-style: none;
}

.rank-list a {
  width: 100%;
  min-height: 2rem;
  display: grid;
  grid-template-columns: 1.55rem minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: center;
  padding: 0.28rem 0.48rem;
  border: none;
  border-radius: 999px;
  color: inherit;
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
  text-decoration: none;
  transition: transform 180ms ease, background 180ms ease;
}

.rank-list a:hover {
  transform: scale(1.015);
  background: rgba(255, 255, 255, 0.12);
}

.rank-number {
  color: hsl(var(--foreground) / 0.55);
  font-size: 0.78rem;
}

.rank-title {
  overflow: hidden;
  color: hsl(var(--foreground) / 0.88);
  font-size: 0.76rem;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.heat {
  color: hsl(var(--foreground) / 0.5);
  font-size: 0.66rem;
}

.tools-page {
  display: grid;
  gap: 1rem;
  margin-top: 0.75rem;
}

.tools-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.8rem;
  align-items: start;
  padding: 1rem 1.1rem;
  border-radius: 1.25rem;
}

.tools-hero-copy {
  display: grid;
  gap: 0.35rem;
}

.tools-hero-copy h1 {
  margin: 0;
  color: hsl(var(--foreground));
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.04em;
}

.tools-hero-copy p {
  margin: 0;
  color: hsl(var(--foreground) / 0.62);
  font-size: 0.78rem;
}

.tools-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.45rem;
  margin-top: 0.15rem;
}

.tools-tabs button {
  min-height: 2rem;
  padding: 0 0.8rem;
  border: none;
  border-radius: 999px;
  color: hsl(var(--foreground) / 0.72);
  background: rgba(255, 255, 255, 0.07);
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease, color 180ms ease;
}

.tools-tabs button:hover,
.tools-tabs button.is-active {
  color: hsl(var(--foreground));
  background: rgba(255, 255, 255, 0.14);
  transform: translateY(-1px);
}

.tools-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) 18rem;
  gap: 0.9rem;
}

.tool-main-card {
  display: grid;
  gap: 0.9rem;
  padding: 1rem;
  border-radius: 1.2rem;
}

.tool-main-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
}

.tool-kicker {
  display: inline-flex;
  margin-bottom: 0.25rem;
  color: hsl(var(--foreground) / 0.5);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.tool-main-head h2 {
  margin: 0;
  color: hsl(var(--foreground));
  font-size: 1.1rem;
  font-weight: 500;
}

.tool-subtitle {
  color: hsl(var(--foreground) / 0.5);
  font-size: 0.72rem;
}

.tool-platforms {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.tool-platforms button {
  min-height: 2rem;
  padding: 0 0.85rem;
  border: none;
  border-radius: 999px;
  color: hsl(var(--foreground) / 0.72);
  background: rgba(255, 255, 255, 0.07);
  cursor: pointer;
}

.tool-platforms button.is-active {
  color: hsl(var(--foreground));
  background: rgba(255, 255, 255, 0.16);
}

.tool-input-row {
  display: grid;
  gap: 0.45rem;
}

.tool-input-row span {
  color: hsl(var(--foreground) / 0.58);
  font-size: 0.75rem;
}

.tool-input-row textarea {
  min-height: 6rem;
  resize: vertical;
  padding: 0.85rem 0.9rem;
  border: none;
  border-radius: 1rem;
  outline: none;
  color: hsl(var(--foreground));
  background: rgba(255, 255, 255, 0.07);
  line-height: 1.6;
}

.tool-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.tool-actions .glass-button {
  min-height: 2.2rem;
  padding: 0 0.9rem;
}

.tool-result-card {
  display: grid;
  gap: 0.75rem;
  padding: 0.95rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.06);
}

.tool-result-top {
  display: grid;
  gap: 0.2rem;
}

.tool-result-badge {
  color: hsl(var(--foreground) / 0.5);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.tool-result-card strong {
  color: hsl(var(--foreground));
  font-size: 0.92rem;
  font-weight: 500;
}

.tool-result-card img {
  width: 100%;
  display: block;
  border-radius: 0.8rem;
}

.tool-result-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tool-result-links a {
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  color: hsl(var(--foreground));
  background: rgba(255, 255, 255, 0.1);
  text-decoration: none;
  font-size: 0.72rem;
}

.tool-empty,
.tool-status {
  padding: 0.85rem 0.9rem;
  border-radius: 0.95rem;
  color: hsl(var(--foreground) / 0.66);
  background: rgba(255, 255, 255, 0.06);
  line-height: 1.65;
}

.tool-file-button {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tool-file-button input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.tool-file-input {
  width: 100%;
  min-height: 2.65rem;
  padding: 0.55rem 0.7rem;
  border: none;
  border-radius: 0.9rem;
  color: hsl(var(--foreground) / 0.72);
  background: rgba(255, 255, 255, 0.07);
}

.tool-qr-result {
  display: grid;
  justify-items: center;
  gap: 0.65rem;
  padding: 1rem;
  border-radius: 1rem;
  color: hsl(var(--foreground) / 0.6);
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.75rem;
}

.tool-qr-result img {
  width: 15rem;
  height: 15rem;
  padding: 0.6rem;
  border-radius: 0.8rem;
  background: #fff;
}

.speed-result {
  display: grid;
  gap: 0.25rem;
  padding: 1.25rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.06);
}

.speed-result strong {
  color: hsl(var(--foreground));
  font-size: 2rem;
  font-weight: 500;
}

.speed-result span {
  color: hsl(var(--foreground) / 0.55);
  font-size: 0.75rem;
}

.lan-file-list {
  display: grid;
  gap: 0.45rem;
}

.lan-file-list span {
  display: block;
  overflow: hidden;
  padding: 0.6rem 0.75rem;
  border-radius: 0.75rem;
  color: hsl(var(--foreground) / 0.72);
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tool-status.is-error {
  color: #ffd9d9;
  background: rgba(255, 110, 110, 0.14);
}

.tools-side {
  display: grid;
  gap: 0.6rem;
  align-content: start;
}

.tool-side-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.65rem;
  align-items: center;
  padding: 0.85rem 0.9rem;
  border-radius: 1rem;
  color: inherit;
  background: rgba(255, 255, 255, 0.07);
  cursor: pointer;
}

.tool-side-card.is-active {
  background: rgba(255, 255, 255, 0.14);
}

.tool-side-icon {
  width: 2.2rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  border-radius: 0.8rem;
  background: rgba(255, 255, 255, 0.1);
}

.tool-side-icon svg {
  width: 1rem;
  height: 1rem;
}

.tool-side-card strong {
  display: block;
  color: hsl(var(--foreground));
  font-size: 0.8rem;
  font-weight: 500;
}

.tool-side-card p {
  margin: 0.15rem 0 0;
  color: hsl(var(--foreground) / 0.52);
  font-size: 0.68rem;
  line-height: 1.5;
}

.tool-showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
}

.tool-showcase-card {
  min-height: 11.2rem;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.7rem;
  padding: 0.95rem;
  border-radius: 1.2rem;
  cursor: pointer;
}

.tool-showcase-card:focus-visible {
  outline: 2px solid hsl(var(--foreground) / 0.72);
  outline-offset: 3px;
}

.tool-showcase-icon {
  width: 3.6rem;
  height: 3.6rem;
  display: grid;
  place-items: center;
  border-radius: 1rem;
  color: hsl(var(--foreground));
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.16), 0 14px 32px rgba(0,0,0,.1);
}

.tool-showcase-icon svg {
  width: 1.45rem;
  height: 1.45rem;
}

.tool-showcase-copy {
  min-width: 0;
  display: grid;
  gap: 0.35rem;
  align-content: start;
}

.tool-showcase-copy strong {
  overflow: hidden;
  color: hsl(var(--foreground));
  font-size: 1rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tool-showcase-copy p {
  display: -webkit-box;
  min-height: 2.7rem;
  margin: 0;
  overflow: hidden;
  color: hsl(var(--foreground) / 0.58);
  font-size: 0.76rem;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.tool-detail-page .tools-grid {
  grid-template-columns: 18.5rem minmax(0, 1fr);
  align-items: stretch;
}

.tool-detail-page .tools-side {
  max-height: min(64vh, 45rem);
  overflow: auto;
  padding-right: 0.25rem;
}

.tool-detail-page .tool-main-card {
  min-height: min(66vh, 48rem);
}

.tool-embed-card {
  padding: 0.5rem;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
}

.toolknit-frame {
  width: 100%;
  min-height: min(64vh, 46rem);
  height: clamp(35rem, 64vh, 48rem);
  display: block;
  border: 0;
  border-radius: 0.95rem;
  background: transparent;
}

.result-action {
  width: 100%;
  margin-top: 0.9rem;
}

.pet-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 0.9rem;
}

.pet-avatar {
  height: 8rem;
  display: grid;
  place-items: center;
  font-size: 3rem;
}

.todo-row {
  min-height: 2.5rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.55rem;
  padding: 0 0.75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.fishpond-layout {
  display: grid;
  grid-template-columns: minmax(13.5rem, 0.36fr) minmax(0, 1fr);
  gap: 0.9rem;
  min-height: 34rem;
  margin-top: 0.9rem;
}

.fishpond-sidebar,
.fishpond-main {
  min-height: 0;
  padding: 1rem;
  border-radius: 1.35rem;
}

.fishpond-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.fishpond-side-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.7rem;
  align-items: center;
}

.fishpond-side-head div {
  min-width: 0;
  display: grid;
  gap: 0.18rem;
}

.fishpond-side-head strong,
.fishpond-head h3 {
  margin: 0;
  color: hsl(var(--foreground));
  font-size: 1rem;
  font-weight: 500;
}

.fishpond-side-head span:not(.source-icon) {
  color: hsl(var(--foreground) / 0.52);
  font-size: 0.7rem;
}

.fishpond-nickname {
  display: grid;
  gap: 0.4rem;
}

.fishpond-nickname span {
  color: hsl(var(--foreground) / 0.56);
  font-size: 0.72rem;
}

.fishpond-nickname input,
.fishpond-composer textarea {
  width: 100%;
  border: none;
  outline: none;
  color: hsl(var(--foreground));
  background: rgba(255, 255, 255, 0.08);
}

.fishpond-nickname input {
  height: 2.45rem;
  padding: 0 0.8rem;
  border-radius: 999px;
}

.fishpond-rule-list {
  display: grid;
  gap: 0.55rem;
  margin-top: auto;
}

.fishpond-rule-list p {
  margin: 0;
  color: hsl(var(--foreground) / 0.58);
  font-size: 0.72rem;
  line-height: 1.65;
}

.fishpond-main {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 0.8rem;
}

.fishpond-head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.fishpond-head > div:first-child {
  display: grid;
  gap: 0.2rem;
}

.fishpond-head .page-kicker {
  font-size: 0.64rem;
}

.fishpond-status {
  margin-left: auto;
  color: hsl(var(--foreground) / 0.6);
  font-size: 0.72rem;
}

.fishpond-status span {
  width: 0.5rem;
  height: 0.5rem;
  display: inline-block;
  margin-right: 0.35rem;
  border-radius: 999px;
  background: hsl(var(--foreground) / 0.78);
}

.fishpond-status strong {
  color: hsl(var(--foreground));
  font-weight: 500;
}

.fishpond-refresh,
.fishpond-composer button {
  border: none;
  color: hsl(var(--foreground));
  background: rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease;
}

.fishpond-refresh {
  min-height: 2.15rem;
  padding: 0 0.75rem;
  border-radius: 999px;
  font-size: 0.72rem;
}

.fishpond-refresh:hover,
.fishpond-composer button:hover {
  transform: scale(1.05);
  background: rgba(255, 255, 255, 0.16);
}

.fishpond-error {
  display: none;
  padding: 0.6rem 0.75rem;
  border-radius: 0.8rem;
  color: hsl(var(--foreground) / 0.8);
  background: rgba(255, 255, 255, 0.1);
  font-size: 0.75rem;
}

.fishpond-error.is-visible {
  display: block;
}

.fishpond-feed {
  min-height: 14rem;
  overflow-y: auto;
  display: grid;
  align-content: start;
  gap: 0.8rem;
  padding: 0.2rem 0.25rem 0.4rem 0;
}

.fishpond-message {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.65rem;
  align-items: start;
}

.fishpond-avatar {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: hsl(var(--foreground));
  background: rgba(255, 255, 255, 0.12);
  font-size: 0.76rem;
  font-weight: 500;
}

.fishpond-message header {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.fishpond-message header strong {
  color: hsl(var(--foreground));
  font-size: 0.82rem;
  font-weight: 500;
}

.fishpond-message time {
  color: hsl(var(--foreground) / 0.45);
  font-size: 0.66rem;
}

.fishpond-message p {
  margin: 0.28rem 0 0;
  color: hsl(var(--foreground) / 0.76);
  font-size: 0.8rem;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.fishpond-empty {
  margin: auto 0;
  color: hsl(var(--foreground) / 0.52);
  font-size: 0.78rem;
  text-align: center;
}

.fishpond-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.6rem;
  align-items: end;
}

.fishpond-composer textarea {
  min-height: 4.7rem;
  resize: vertical;
  padding: 0.75rem 0.85rem;
  border-radius: 1rem;
  line-height: 1.55;
}

.fishpond-composer textarea::placeholder {
  color: hsl(var(--foreground) / 0.45);
}

.fishpond-composer button {
  min-width: 4.6rem;
  min-height: 4.7rem;
  border-radius: 1rem;
  font-size: 0.82rem;
}

.fishpond-composer button:disabled {
  cursor: wait;
  opacity: 0.6;
}

@media (max-width: 1023px) {
  .hero-split {
    display: block;
  }

  .left-panel {
    width: 100%;
    padding: 1rem;
  }

  .right-panel {
    position: static;
    width: min(100% - 2rem, 680px);
    margin: 0 auto 5rem;
    min-height: auto;
    padding: 0;
    transform: none;
  }

  .left-glass {
    inset: 1rem;
    border-radius: 1.5rem;
  }

  .left-content {
    min-height: calc(100vh - 2rem);
    padding: 1rem 1rem 2rem;
  }

  .hero-center h1 {
    font-size: clamp(3rem, 15vw, 4.4rem);
  }

  .nav-stack {
    position: static;
    order: 2;
    flex: 0 0 100%;
    transform: none;
    width: 100%;
    max-height: 7rem;
    overflow: auto;
  }

  .bloom-nav {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .topbar-spacer {
    display: none;
  }

  .top-login-button {
    position: static;
    order: 1;
  }

  .page-split {
    padding: 1rem;
  }

  .page-content {
    padding: 1rem 1rem 2rem;
  }

  .page-title-row,
  .top-actions {
    display: grid;
    align-items: stretch;
  }

  .hot-grid,
  .module-grid,
  .pet-layout,
  .fishpond-layout {
    grid-template-columns: 1fr;
  }

  .latest-view .hot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }

  .fishpond-layout {
    min-height: auto;
  }

  .bottom-quote {
    position: static;
    transform: none;
    margin-top: 1rem;
  }

  .work-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .bloom-nav {
    align-items: flex-start;
  }

  .bottom-quote {
    flex-direction: column;
    gap: 0.55rem;
  }

  .work-form {
    grid-template-columns: 1fr;
  }

  .search-box input {
    width: 100%;
  }

  .search-box input {
    width: 100%;
  }

  .meal-row {
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 0.7rem;
    border-radius: 1rem;
  }

  .fishpond-head {
    flex-wrap: wrap;
  }

  .fishpond-status {
    margin-left: 0;
  }

  .fishpond-composer {
    grid-template-columns: 1fr;
  }

  .fishpond-composer button {
    min-height: 2.7rem;
  }
}

/* Shared site frame: these positions are kept across every module page. */
.app-shell {
  overflow-x: hidden;
  overflow-y: auto;
}

.site-view {
  position: relative;
  z-index: 10;
  min-height: 100vh;
}

.global-nav {
  position: fixed;
  inset: 1.75rem 3.5rem auto;
  z-index: 25;
  min-height: 2.75rem;
}

.site-brand {
  position: absolute;
  left: 0;
  top: 0.15rem;
  color: hsl(var(--foreground));
  font-size: 1.55rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}

.global-nav .nav-stack {
  top: 0;
  width: min(780px, calc(100% - 22rem));
  max-width: 780px;
}

.global-nav .nav-button {
  min-height: 2.4rem;
  padding: 0 0.65rem;
  font-size: 0.82rem;
}

.global-nav .top-login-button {
  position: absolute;
  top: 0;
  right: 0;
}

.global-footer {
  position: fixed;
  left: 3.5rem;
  bottom: 2rem;
  z-index: 25;
  justify-content: flex-start;
}

.home-split {
  min-height: 100vh;
}

.home-left-panel {
  position: static;
  width: auto;
  min-height: 0;
  padding: 0;
}

.home-left-content {
  min-height: 0;
  display: contents;
  padding: 0;
}

.home-hero-center {
  position: absolute;
  top: clamp(9.5rem, 22vh, 15.5rem);
  left: clamp(3.5rem, 8vw, 10rem);
  z-index: 13;
  width: min(29.5rem, calc(100vw - 7rem));
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.8rem;
  padding: 1.55rem 1.35rem 1.2rem;
  border-radius: 0.35rem;
  background: rgba(255, 255, 255, 0.01);
  text-align: center;
}

.home-hero-center .hero-logo {
  width: 3.15rem;
  height: 3.15rem;
}

.home-hero-center h1 {
  font-size: clamp(3.1rem, 4.2vw, 4.65rem);
  line-height: 0.94;
}

.home-hero-center p {
  max-width: 24rem;
  font-size: 0.72rem;
  line-height: 1.6;
}

.home-hero-center .work-time-card {
  width: 100%;
  margin-top: 0.15rem;
  padding: 0.8rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.01);
}

.home-hero-center .mini-countdown {
  min-height: 4.6rem;
}

.home-hero-center .mini-countdown strong {
  font-size: clamp(2.35rem, 3vw, 3.1rem);
}

.home-hero-center .meal-row,
.home-hero-center .salary-line {
  min-height: 2.25rem;
}

.home-hero-center .countdown-card.is-compact .meal-row {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.home-right-panel {
  position: absolute;
  right: 3.5rem;
  bottom: 1.9rem;
  z-index: 14;
  width: min(31rem, 31vw);
  min-height: 0;
  padding: 0;
}

.home-right-panel .feature-shell {
  width: 100%;
  margin: 0;
  padding: 0.75rem;
  border-radius: 1.2rem;
  background: rgba(211, 235, 238, 0.2);
}

.home-right-panel .feature-row {
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}

.home-right-panel .feature-card {
  min-height: 5.55rem;
  padding: 0.75rem;
  border-radius: 0.9rem;
}

.home-shortcut-card {
  width: 100%;
  border: 0;
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.home-shortcut-card:focus-visible {
  outline: 2px solid hsl(var(--foreground) / 0.75);
  outline-offset: 2px;
}

.home-shortcut-recent {
  display: block;
  margin-top: 0.35rem;
  overflow: hidden;
  color: hsl(var(--foreground) / 0.48);
  font-size: 0.54rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-right-panel .bottom-feature {
  grid-template-columns: 2.7rem minmax(0, 1fr) auto;
  gap: 0.65rem;
  padding: 0.6rem;
  border-radius: 0.9rem;
}

.home-right-panel .home-fishpond-card {
  display: flex;
  width: 100%;
  grid-column: 1 / -1;
  padding: 0.6rem;
  border-radius: 0.9rem;
  text-align: left;
}

.home-right-panel .home-fishpond-card .button-content {
  display: block;
  width: 100%;
}

.home-right-panel .flower-thumb {
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 999px;
}

.home-right-panel .feature-card h3,
.home-right-panel .bottom-feature h3 {
  font-size: 0.78rem;
}

.home-right-panel .feature-card p,
.home-right-panel .bottom-feature p {
  font-size: 0.6rem;
}

.home-fishpond-card-inner {
  display: grid;
  gap: 0.4rem;
}

.home-fishpond-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.home-fishpond-title {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.home-fishpond-title strong {
  display: block;
  font-size: 0.78rem;
  color: hsl(var(--foreground));
}

.home-fishpond-title span {
  display: block;
  font-size: 0.55rem;
  color: hsl(var(--foreground) / 0.52);
}

.home-fishpond-pill {
  flex: none;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  font-size: 0.54rem;
  color: hsl(var(--foreground) / 0.72);
  background: rgba(255, 255, 255, 0.08);
}

.home-fishpond-feed {
  display: grid;
  gap: 0.34rem;
}

.home-fishpond-message,
.home-fishpond-empty {
  font-size: 0.56rem;
  line-height: 1.45;
}

.home-fishpond-message header {
  display: flex;
  justify-content: space-between;
  gap: 0.45rem;
  margin-bottom: 0.12rem;
}

.home-fishpond-message header strong {
  font-size: 0.58rem;
  color: hsl(var(--foreground));
}

.home-fishpond-message time {
  font-size: 0.5rem;
  color: hsl(var(--foreground) / 0.45);
}

.home-fishpond-message p,
.home-fishpond-empty {
  margin: 0;
  color: hsl(var(--foreground) / 0.76);
}

.home-fishpond-message p {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.page-view .page-split {
  padding-top: 6.25rem;
  padding-bottom: 5rem;
}

.page-view .page-content {
  padding-top: 1.5rem;
}

.page-view.latest-view .page-split {
  padding-inline: clamp(0.75rem, 2.8vw, 3rem);
}

.page-view.latest-view .page-panel {
  width: min(1320px, calc(100vw - 12rem));
}

.page-view.latest-view .page-content {
  width: min(100%, 1320px);
  max-width: 1320px;
  margin-inline: auto;
}

.page-view.latest-view .page-title-row {
  margin-bottom: 1rem;
}

@media (max-width: 1023px) {
  .global-nav {
    position: absolute;
    inset: 1rem 1rem auto;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.6rem;
  }

  .site-brand,
  .global-nav .top-login-button {
    position: static;
  }

  .site-brand {
    margin-right: auto;
    font-size: 1.25rem;
  }

  .global-nav .nav-stack {
    position: static;
    order: 3;
    width: 100%;
    max-width: none;
    flex: 0 0 100%;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    transform: none;
  }

  .home-split {
    padding: 0 1rem;
  }

  .home-hero-center {
    position: relative;
    top: auto;
    left: auto;
    width: min(31rem, 100%);
    min-height: 0;
    margin: 9.5rem auto 1.5rem;
  }

  .home-right-panel {
    position: relative;
    right: auto;
    bottom: auto;
    width: min(31rem, 100%);
    margin: 0 auto 6rem;
  }

  .global-footer {
    position: relative;
    left: auto;
    bottom: auto;
    justify-content: center;
    padding-bottom: 1.2rem;
  }

  .page-view .page-split {
    padding-top: 8.5rem;
    padding-bottom: 1rem;
  }
}

@media (max-width: 560px) {
  .home-hero-center {
    min-height: 0;
    padding: 1.1rem 0.85rem;
    border-radius: 1rem;
  }

  .home-hero-center h1 {
    font-size: 3rem;
  }

  .home-hero-center .work-time-card {
    padding: 0.7rem;
  }
}






.wechat-modal-window {
  width: min(760px, 100%);
}

.wechat-card {
  display: grid;
  gap: 0.55rem;
  text-align: center;
}

.wechat-card img {
  width: 100%;
  display: block;
  border-radius: 1.1rem;
}

.wechat-card p {
  margin: 0;
  color: hsl(var(--foreground) / 0.68);
  font-size: 0.82rem;
}

.reward-modal-window {
  width: min(780px, 100%);
}

.reward-board {
  display: grid;
  gap: 0.95rem;
}

.reward-summary {
  display: grid;
  gap: 0.2rem;
  padding: 1rem;
  border-radius: 1.25rem;
  text-align: center;
  background: rgba(255, 255, 255, 0.08);
}

.reward-summary span,
.reward-summary small,
.reward-status {
  color: hsl(var(--foreground) / 0.56);
  font-size: 0.74rem;
}

.reward-summary strong {
  color: hsl(var(--foreground));
  font-size: clamp(2rem, 6vw, 3.2rem);
  font-weight: 500;
  letter-spacing: -0.04em;
}

.reward-status {
  margin: 0;
  text-align: center;
}

.reward-podiums {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  align-items: end;
}

.reward-podium {
  min-height: 8.6rem;
  display: grid;
  gap: 0.28rem;
  place-items: center;
  padding: 0.85rem;
  border-radius: 1.3rem;
  background: rgba(255, 255, 255, 0.09);
}

.reward-podium-1 {
  min-height: 10rem;
  background: rgba(255, 255, 255, 0.13);
}

.reward-podium span {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: hsl(var(--background));
  background: hsl(var(--foreground) / 0.88);
  font-weight: 600;
}

.reward-podium strong,
.reward-row strong {
  color: hsl(var(--foreground));
  font-weight: 500;
}

.reward-podium b,
.reward-row b {
  color: hsl(var(--foreground) / 0.88);
  font-weight: 500;
}

.reward-podium small,
.reward-row small,
.reward-row em {
  color: hsl(var(--foreground) / 0.52);
  font-size: 0.7rem;
  font-style: normal;
}

.reward-list {
  display: grid;
  gap: 0.48rem;
  max-height: 18rem;
  overflow: auto;
}

.reward-row {
  min-height: 3.35rem;
  display: grid;
  grid-template-columns: 2.2rem auto minmax(0, 1fr) auto auto;
  gap: 0.65rem;
  align-items: center;
  padding: 0 0.85rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.08);
}

.reward-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.reward-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #72a7ff, #79d8bb);
  color: #fff;
  font-size: 0.85rem;
  font-style: normal;
  font-weight: 600;
  flex-shrink: 0;
}

.reward-row > span {
  color: hsl(var(--foreground) / 0.55);
  font-size: 0.78rem;
}

.reward-row div {
  min-width: 0;
  display: grid;
  gap: 0.1rem;
}

.reward-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .reward-podiums,
  .reward-row {
    grid-template-columns: 1fr;
  }

  .reward-row {
    justify-items: center;
    padding: 0.8rem;
    text-align: center;
  }
}

.reward-page-panel {
  min-height: calc(100vh - 3rem);
}

.reward-page-content {
  display: grid;
  gap: 1rem;
  padding-bottom: 5rem;
}

.reward-page-head,
.reward-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

.reward-page-head h1,
.reward-section-head h2,
.reward-side-card h2 {
  margin: 0.25rem 0 0;
  color: hsl(var(--foreground));
  font-weight: 500;
}

.reward-page-head h1 {
  font-size: clamp(2.7rem, 6vw, 4.6rem);
  letter-spacing: -0.05em;
}

.reward-page-head p {
  margin: 0.65rem 0 0;
  color: hsl(var(--foreground) / 0.65);
  font-size: 0.86rem;
}

.reward-refresh-button,
.reward-support-button {
  border: none;
  color: hsl(var(--foreground));
  background: rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease;
}

.reward-refresh-button {
  min-height: 2.55rem;
  padding: 0 0.95rem;
  border-radius: 999px;
  white-space: nowrap;
}

.reward-refresh-button,
.reward-support-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
}

.reward-refresh-button svg,
.reward-support-button svg,
.support-primary-button svg,
.support-complete-icon svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.reward-refresh-button:hover,
.reward-support-button:hover {
  transform: scale(1.04);
  background: rgba(255, 255, 255, 0.16);
}

.reward-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.reward-stat-card {
  display: grid;
  gap: 0.26rem;
  min-height: 7.3rem;
  padding: 1rem;
  border-radius: 1.2rem;
}

.reward-stat-card span,
.reward-stat-card small,
.reward-section-head span,
.reward-section-head small,
.reward-side-kicker {
  color: hsl(var(--foreground) / 0.52);
  font-size: 0.68rem;
}

.reward-stat-card strong {
  overflow: hidden;
  color: hsl(var(--foreground));
  font-size: clamp(1.35rem, 3vw, 2rem);
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reward-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.58fr) minmax(14rem, 0.42fr);
  gap: 0.55rem;
}

.reward-board-panel {
  padding: 1rem;
  border-radius: 1.45rem;
}

.reward-section-head h2,
.reward-side-card h2 {
  font-size: 1.25rem;
}

.reward-podium-page {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  align-items: end;
  margin-top: 0.9rem;
}

.reward-podium-page-card {
  min-height: 9rem;
  display: grid;
  align-content: center;
  gap: 0.32rem;
  padding: 0.8rem;
  border-radius: 1.15rem;
  text-align: center;
  background: rgba(255, 255, 255, 0.075);
}

.reward-podium-page-1 {
  min-height: 10.4rem;
  background: rgba(255, 255, 255, 0.14);
}

.reward-podium-page-card > span {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  margin: 0 auto 0.2rem;
  border-radius: 999px;
  color: hsl(var(--background));
  background: hsl(var(--foreground) / 0.9);
  font-size: 0.8rem;
  font-weight: 600;
}

.reward-podium-page-card strong,
.reward-podium-page-card b {
  overflow: hidden;
  color: hsl(var(--foreground));
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reward-podium-page-card small {
  overflow: hidden;
  color: hsl(var(--foreground) / 0.52);
  font-size: 0.67rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reward-table {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.9rem;
}

.reward-table-head,
.reward-page-row {
  display: grid;
  grid-template-columns: 2.3rem minmax(6rem, 0.65fr) minmax(0, 1.35fr) auto 5.2rem;
  gap: 0.7rem;
  align-items: center;
}

.reward-table-head {
  padding: 0 0.85rem;
  color: hsl(var(--foreground) / 0.44);
  font-size: 0.66rem;
}

.reward-page-row {
  min-height: 3.35rem;
  padding: 0 0.85rem;
  border-radius: 0.95rem;
  background: rgba(255, 255, 255, 0.075);
}

.reward-rank,
.reward-message,
.reward-page-row time {
  color: hsl(var(--foreground) / 0.5);
  font-size: 0.72rem;
}

.reward-person,
.reward-page-row strong {
  overflow: hidden;
  color: hsl(var(--foreground));
  font-size: 0.78rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reward-message {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reward-page-row time {
  text-align: right;
}

.reward-page-empty {
  margin: 0;
  padding: 2rem 1rem;
  color: hsl(var(--foreground) / 0.55);
  font-size: 0.78rem;
  text-align: center;
}

.reward-side-column {
  display: grid;
  align-content: start;
  gap: 0.55rem;
}

.reward-side-card {
  display: grid;
  gap: 0.6rem;
  padding: 1rem;
  border-radius: 1.25rem;
}

.reward-side-card p,
.reward-rules {
  margin: 0;
  color: hsl(var(--foreground) / 0.62);
  font-size: 0.76rem;
  line-height: 1.7;
}

.reward-rules {
  display: grid;
  gap: 0.38rem;
  padding-left: 1.1rem;
}

.reward-support-button {
  min-height: 2.45rem;
  border-radius: 999px;
  font-size: 0.76rem;
}

.reward-clone-view {
  min-height: 100vh;
  color: #1f2933;
}

.reward-clone-view .global-nav {
  inset: 0 0 auto;
  min-height: 3.25rem;
  padding: 0 2rem;
  border-bottom: 1px solid rgba(210, 219, 232, 0.82);
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.reward-clone-view .site-brand {
  top: 0.83rem;
  left: 1rem;
  color: #151922;
  font-size: 1rem;
  letter-spacing: 0;
}

.reward-clone-view .site-brand::before {
  content: "🐟";
  display: inline-grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  margin-right: 0.35rem;
  border-radius: 0.45rem;
  background: #eef6ff;
  vertical-align: middle;
}

.reward-clone-view .global-nav .nav-stack {
  top: 0.55rem;
  width: min(760px, calc(100% - 19rem));
  max-width: 760px;
  gap: 0.35rem;
}

.reward-clone-view .global-nav .nav-button {
  min-height: 2.1rem;
  padding: 0 0.46rem;
  color: #4f5967;
  background: transparent;
  box-shadow: none;
  font-size: 0.84rem;
}

.reward-clone-view .global-nav .nav-button::before,
.reward-clone-view .global-nav .nav-button .glass-shine {
  display: none;
}

.reward-clone-view .global-nav .nav-button.is-active,
.reward-clone-view .global-nav .nav-button:hover {
  color: #ff8a43;
  background: transparent;
}

.reward-clone-view .global-nav .top-login-button {
  top: 0.55rem;
  right: 1.75rem;
  min-height: 2.1rem;
  padding: 0 1.25rem;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #ffb56f, #ff7b3c);
  box-shadow: 0 10px 20px rgba(255, 126, 54, 0.22);
}

.reward-clone-view .global-nav .top-login-button::before,
.reward-clone-view .global-nav .top-login-button .glass-shine {
  display: none;
}

.reward-clone-view .global-footer {
  display: none;
}

.reward-clone-shell {
  position: relative;
  z-index: 10;
  width: min(1180px, calc(100% - 4rem));
  margin: 0 auto;
  padding: 5.25rem 0 4rem;
}

.reward-clone-panel {
  min-height: calc(100vh - 7.5rem);
  padding: 1.25rem 1rem 2rem;
  border: 1px solid #dbe3ef;
  border-radius: 1rem;
  background: #f3f6fc;
  box-shadow: 0 12px 34px rgba(67, 81, 103, 0.08);
}

.reward-clone-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 0.45rem;
}

.reward-clone-head h1 {
  margin: 0;
  color: #151922;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  letter-spacing: 0;
}

.reward-clone-head h1 span {
  color: #ff8a43;
}

.reward-donate-button {
  min-height: 2.65rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  padding: 0 1.05rem;
  border: none;
  border-radius: 0.5rem;
  color: #fff;
  background: #ff8a17;
  box-shadow: 0 10px 20px rgba(255, 120, 45, 0.22);
  cursor: pointer;
  font-size: 0.95rem;
  transition: transform 180ms ease, filter 180ms ease;
}

.reward-donate-button:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.reward-donate-button svg {
  width: 1rem;
  height: 1rem;
  stroke: currentColor;
}

.reward-clone-thanks {
  margin: 1rem 0 1.2rem;
  color: #8b95a4;
  font-size: 0.84rem;
  text-align: center;
}

.reward-clone-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

.reward-clone-stats article {
  min-height: 7rem;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.55rem;
  border: 1px solid #e0e6f0;
  border-radius: 0.42rem;
  background: #f6f8fd;
}

.reward-clone-stats span {
  color: #8d97a5;
  font-size: 0.86rem;
}

.reward-clone-stats strong {
  color: #ff8a17;
  font-size: 1.48rem;
  font-weight: 500;
}

.reward-clone-stats article:nth-child(2) strong {
  color: #28bdb6;
}

.reward-clone-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
  align-items: center;
  margin: 2rem 0 1.55rem;
  color: #1f2933;
  font-size: 0.92rem;
}

.reward-clone-divider::before,
.reward-clone-divider::after {
  height: 1px;
  background: #dce4ef;
  content: "";
}

.reward-clone-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 1.5rem;
  align-items: start;
}

.reward-rank-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

.reward-rank-card {
  min-height: 7.1rem;
  display: grid;
  grid-template-columns: 4.7rem minmax(0, 1fr) auto;
  gap: 1.15rem;
  align-items: center;
  padding: 1rem 1.25rem;
  border: 1px solid #e0e6f0;
  border-radius: 0.55rem;
  background: #f7f9fe;
  box-shadow: 0 9px 22px rgba(65, 78, 101, 0.05);
}

.reward-avatar-wrap {
  position: relative;
  width: 4.25rem;
  height: 4.25rem;
}

.reward-avatar,
.reward-update-avatar {
  overflow: hidden;
  display: grid;
  place-items: center;
  border-radius: 50%;
}

.reward-avatar {
  width: 4.25rem;
  height: 4.25rem;
  border: 2px solid rgba(255, 138, 23, 0.28);
}

.reward-avatar-letter {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 1.45rem;
  font-weight: 700;
}

.reward-avatar-tone-0 { background: linear-gradient(135deg, #f8b54f, #ed6d45); }
.reward-avatar-tone-1 { background: linear-gradient(135deg, #85c9ff, #6b75f6); }
.reward-avatar-tone-2 { background: linear-gradient(135deg, #a7df86, #30b878); }
.reward-avatar-tone-3 { background: linear-gradient(135deg, #ff9bc0, #bc6cff); }
.reward-avatar-tone-4 { background: linear-gradient(135deg, #f2d46b, #da9b30); }
.reward-avatar-tone-5 { background: linear-gradient(135deg, #9ce6e1, #3aa9b6); }

.reward-medal {
  position: absolute;
  top: -0.25rem;
  right: -0.45rem;
  min-width: 1.95rem;
  height: 1.4rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 500;
  box-shadow: 0 5px 12px rgba(222, 157, 29, 0.28);
}

.reward-medal-1 { background: #ffd51e; }
.reward-medal-2 { background: #c7ccd5; }
.reward-medal-3 { background: #c78a2f; }

.reward-rank-info {
  min-width: 0;
}

.reward-rank-info h3 {
  margin: 0 0 0.55rem;
  overflow: hidden;
  color: #1f2630;
  font-size: 1rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reward-rank-info h3 span {
  color: #8a97a8;
  font-weight: 400;
}

.reward-rank-info p {
  margin: 0;
  overflow: hidden;
  color: #8b95a4;
  font-size: 0.86rem;
  font-style: italic;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reward-rank-card > strong {
  min-width: 5.6rem;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #ffad83, #ff7441);
  box-shadow: 0 8px 18px rgba(255, 116, 65, 0.22);
  font-size: 0.92rem;
  font-weight: 700;
  text-align: center;
}

.reward-update-panel {
  overflow: hidden;
  border: 1px solid #dce4ef;
  border-radius: 0.7rem;
  background: #f7f9fe;
  box-shadow: 0 12px 28px rgba(64, 79, 104, 0.07);
}

.reward-update-panel header {
  padding: 1rem;
  border-bottom: 1px solid #e1e7f0;
}

.reward-update-panel h2 {
  margin: 0;
  color: #1f2630;
  font-size: 0.98rem;
  font-weight: 800;
}

.reward-update-panel h2 span {
  display: inline-grid;
  place-items: center;
  min-width: 1.6rem;
  height: 1.1rem;
  margin-left: 0.35rem;
  border-radius: 999px;
  color: #fff;
  background: #ff9a15;
  font-size: 0.7rem;
}

.reward-update-list {
  max-height: 38rem;
  overflow: auto;
  padding-right: 0.2rem;
}

.reward-update-list::-webkit-scrollbar {
  width: 4px;
}

.reward-update-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #f2b566;
}

.reward-update-row {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) auto;
  gap: 0.7rem;
  align-items: start;
  padding: 1rem;
  border-bottom: 1px solid #e5ebf3;
}

.reward-update-row:last-child {
  border-bottom: 0;
}

.reward-update-avatar {
  width: 2.35rem;
  height: 2.35rem;
  font-size: 0.82rem;
}

.reward-update-row div {
  min-width: 0;
}

.reward-update-row strong {
  display: block;
  overflow: hidden;
  color: #1f2630;
  font-size: 0.86rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reward-update-row p {
  margin: 0.22rem 0;
  overflow: hidden;
  color: #8b95a4;
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reward-update-row small {
  color: #a0a9b7;
  font-size: 0.72rem;
}

.reward-update-row b {
  color: #f29016;
  font-size: 0.76rem;
  font-weight: 700;
  white-space: nowrap;
}

.reward-clone-view .reward-page-empty {
  color: #8b95a4;
}

.support-modal-window {
  width: min(480px, 100%);
  padding: 1.35rem;
}

.support-modal-window .modal-head h3 {
  font-size: 1.42rem;
}

.support-flow {
  display: grid;
  gap: 1rem;
}

.support-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
  align-items: center;
}

.support-step {
  position: relative;
  display: grid;
  grid-template-columns: 1.55rem minmax(0, 1fr);
  gap: 0.42rem;
  align-items: center;
  color: hsl(var(--foreground) / 0.38);
  font-size: 0.68rem;
}

.support-step:not(:last-child)::after {
  position: absolute;
  top: 0.76rem;
  left: calc(100% - 0.15rem);
  width: 0.3rem;
  height: 1px;
  background: hsl(var(--foreground) / 0.2);
  content: "";
}

.support-step span {
  width: 1.55rem;
  height: 1.55rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: hsl(var(--foreground) / 0.48);
  background: hsl(var(--foreground) / 0.08);
  font-size: 0.68rem;
}

.support-step b {
  overflow: hidden;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.support-step.is-active,
.support-step.is-complete {
  color: hsl(var(--foreground) / 0.9);
}

.support-step.is-active span,
.support-step.is-complete span {
  color: #fffaf4;
  background: #ff8b12;
}

.support-field {
  display: grid;
  gap: 0.48rem;
}

.support-field > label {
  color: hsl(var(--foreground) / 0.9);
  font-size: 0.78rem;
  font-weight: 500;
}

.support-field input,
.support-field textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid hsl(var(--foreground) / 0.18);
  outline: none;
  border-radius: 0.65rem;
  color: hsl(var(--foreground));
  background: hsl(var(--foreground) / 0.06);
  font: inherit;
  font-size: 0.78rem;
  transition: border-color 180ms ease, background 180ms ease;
}

.support-field input {
  height: 2.55rem;
  padding: 0 0.8rem;
}

.support-field textarea {
  min-height: 4.1rem;
  padding: 0.65rem 0.8rem;
  resize: vertical;
}

.support-field input:focus,
.support-field textarea:focus {
  border-color: #ff971f;
  background: hsl(var(--foreground) / 0.1);
}

.support-field input::placeholder,
.support-field textarea::placeholder {
  color: hsl(var(--foreground) / 0.38);
}

.support-amounts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.support-amount {
  min-width: 3.8rem;
  height: 2.2rem;
  border: 1px solid hsl(var(--foreground) / 0.2);
  border-radius: 999px;
  color: hsl(var(--foreground) / 0.86);
  background: hsl(var(--foreground) / 0.045);
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, color 180ms ease;
}

.support-amount:hover,
.support-amount.is-selected {
  border-color: #ff8b12;
  color: #ffb15e;
  background: rgba(255, 139, 18, 0.12);
  transform: translateY(-1px);
}

.support-counter {
  margin-top: -0.35rem;
  color: hsl(var(--foreground) / 0.45);
  font-size: 0.67rem;
  text-align: right;
}

.support-welfare {
  display: grid;
  gap: 0.24rem;
  padding: 0.85rem 0.9rem;
  border: 1px solid rgba(255, 151, 31, 0.42);
  border-radius: 0.7rem;
  background: rgba(255, 151, 31, 0.055);
  color: hsl(var(--foreground) / 0.72);
  font-size: 0.74rem;
  line-height: 1.65;
}

.support-welfare strong {
  color: #ffae56;
  font-weight: 500;
}

.support-welfare p {
  margin: 0;
}

.support-primary-button,
.support-secondary-button {
  min-height: 2.6rem;
  border: none;
  border-radius: 0.65rem;
  cursor: pointer;
  font: inherit;
  transition: transform 180ms ease, filter 180ms ease, background 180ms ease;
}

.support-primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  color: #fffaf4;
  background: #ff8b12;
  font-size: 0.84rem;
  font-weight: 500;
}

.support-primary-button:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.support-confirm-button {
  width: 100%;
  min-height: 2.85rem;
}

.support-contact {
  margin: -0.25rem 0 0;
  color: hsl(var(--foreground) / 0.48);
  font-size: 0.69rem;
  text-align: center;
}

.support-pay-panel,
.support-complete-panel {
  display: grid;
  justify-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.3rem 0;
  text-align: center;
}

.support-pay-panel p,
.support-pay-panel small,
.support-complete-panel p {
  margin: 0;
  color: hsl(var(--foreground) / 0.62);
  font-size: 0.74rem;
  line-height: 1.65;
}

.support-amount-label {
  color: hsl(var(--foreground) / 0.65);
  font-size: 0.78rem;
}

.support-amount-label strong {
  margin-left: 0.25rem;
  color: #ffae56;
  font-size: 1.3rem;
  font-weight: 500;
}

.support-qr {
  width: min(13rem, 100%);
  aspect-ratio: 1;
  padding: 0.4rem;
  border-radius: 0.85rem;
  background: #fff;
  object-fit: contain;
}

.support-modal-actions {
  display: grid;
  grid-template-columns: 0.68fr 1.32fr;
  gap: 0.65rem;
}

.support-secondary-button {
  color: hsl(var(--foreground) / 0.8);
  background: hsl(var(--foreground) / 0.1);
  font-size: 0.78rem;
}

.support-secondary-button:hover {
  background: hsl(var(--foreground) / 0.16);
  transform: translateY(-1px);
}

.support-complete-panel {
  min-height: 14rem;
  align-content: center;
}

.support-complete-icon {
  width: 3.3rem;
  height: 3.3rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #fffaf4;
  background: #ff8b12;
}

.support-complete-icon svg {
  width: 1.55rem;
  height: 1.55rem;
}

.support-complete-panel h4 {
  margin: 0.3rem 0 0;
  color: hsl(var(--foreground));
  font-size: 1.1rem;
  font-weight: 500;
}

@media (max-width: 1023px) {
  .game-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .reward-clone-view .global-nav {
    position: fixed;
    inset: 0 0 auto;
    flex-wrap: nowrap;
    padding: 0.5rem 1rem;
  }

  .reward-clone-view .global-nav .nav-stack {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    order: 3;
  }

  .reward-clone-view .site-brand,
  .reward-clone-view .global-nav .top-login-button {
    position: static;
  }

  .reward-clone-shell {
    width: min(100% - 2rem, 760px);
    padding-top: 7rem;
  }

  .reward-clone-layout {
    grid-template-columns: 1fr;
  }

  .reward-update-panel {
    order: -1;
  }

  .reward-main-grid {
    grid-template-columns: 1fr;
  }

  .reward-side-column {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .game-tabs {
    border-radius: 1rem;
  }

  .game-grid,
  .play-game-head {
    grid-template-columns: 1fr;
  }

  .game-grid {
    display: grid;
  }

  .game-card {
    min-height: auto;
  }

  .play-game-head {
    display: grid;
    align-items: stretch;
  }

  .game-reset-button {
    width: 100%;
  }

  .chicken-tiles {
    grid-template-columns: repeat(4, 1fr);
  }

  .reward-clone-shell {
    width: calc(100% - 1rem);
    padding-top: 8.25rem;
  }

  .reward-clone-panel {
    padding: 1rem 0.8rem;
  }

  .reward-clone-head,
  .reward-clone-stats,
  .reward-rank-card,
  .reward-update-row {
    grid-template-columns: 1fr;
  }

  .reward-clone-head {
    align-items: stretch;
  }

  .reward-donate-button {
    width: 100%;
  }

  .reward-rank-grid {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }

  .reward-rank-card {
    justify-items: center;
    text-align: center;
  }

  .reward-rank-card > strong {
    width: min(10rem, 100%);
  }

  .reward-update-row {
    justify-items: center;
    text-align: center;
  }

  .reward-page-head,
  .reward-section-head {
    align-items: stretch;
    flex-direction: column;
  }

  .reward-overview,
  .reward-podium-page,
  .reward-side-column {
    grid-template-columns: 1fr;
  }

  .reward-podium-page-card,
  .reward-podium-page-1 {
    min-height: 7.3rem;
  }

  .reward-table-head {
    display: none;
  }

  .reward-page-row {
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    gap: 0.5rem;
    padding: 0.75rem;
  }

  .reward-message {
    grid-column: 2 / -1;
  }

  .reward-page-row time {
    display: none;
  }

  .support-modal-window {
    padding: 1rem;
  }

  .support-steps {
    gap: 0.15rem;
  }

  .support-step {
    grid-template-columns: 1.3rem minmax(0, 1fr);
    gap: 0.25rem;
    font-size: 0.61rem;
  }

  .support-step span {
    width: 1.3rem;
    height: 1.3rem;
    font-size: 0.62rem;
  }

  .support-step:not(:last-child)::after {
    top: 0.64rem;
  }
}

.reward-clone-view {
  color: hsl(var(--foreground));
}

.reward-clone-view .global-nav {
  inset: 1.75rem 3.5rem auto;
  min-height: 2.75rem;
  padding: 0;
  border-bottom: none;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.reward-clone-view .site-brand {
  left: 0;
  top: 0.15rem;
  color: hsl(var(--foreground));
  font-size: 1.55rem;
  font-weight: 600;
}

.reward-clone-view .site-brand::before {
  display: none;
}

.reward-clone-view .global-nav .nav-stack {
  top: 0;
  width: min(780px, calc(100% - 22rem));
  max-width: 780px;
  gap: 0.5rem;
}

.reward-clone-view .global-nav .nav-button {
  min-height: 2.4rem;
  padding: 0 0.65rem;
  color: hsl(var(--foreground) / 0.8);
  background: rgba(255, 255, 255, 0.01);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
  font-size: 0.82rem;
}

.reward-clone-view .global-nav .nav-button::before,
.reward-clone-view .global-nav .nav-button .glass-shine {
  display: block;
}

.reward-clone-view .global-nav .nav-button.is-active,
.reward-clone-view .global-nav .nav-button:hover {
  color: hsl(var(--foreground));
  background: rgba(255, 255, 255, 0.08);
}

.reward-clone-view .global-nav .top-login-button {
  top: 0;
  right: 0;
  min-height: 2.4rem;
  padding: 0 1rem;
  color: hsl(var(--foreground));
  background: rgba(255, 255, 255, 0.01);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
}

.reward-clone-view .global-nav .top-login-button::before,
.reward-clone-view .global-nav .top-login-button .glass-shine {
  display: block;
}

.reward-clone-view .global-footer {
  display: flex;
}

.reward-clone-shell {
  width: min(1180px, calc(100% - 3rem));
  padding: 6.25rem 0 5rem;
}

.reward-clone-panel {
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - 8.5rem);
  padding: 1.25rem;
  border: none;
  border-radius: 1.5rem;
  background: rgba(255, 255, 255, 0.01);
  background-blend-mode: luminosity;
  -webkit-backdrop-filter: blur(50px);
  backdrop-filter: blur(50px);
  box-shadow:
    4px 4px 4px rgba(0, 0, 0, 0.05),
    inset 0 1px 1px rgba(255, 255, 255, 0.15);
}

.reward-clone-panel::before,
.reward-clone-stats article::before,
.reward-rank-card::before,
.reward-update-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.4px;
  border-radius: inherit;
  pointer-events: none;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0.2) 20%,
    transparent 40%,
    transparent 60%,
    rgba(255, 255, 255, 0.2) 80%,
    rgba(255, 255, 255, 0.5) 100%
  );
}

.reward-clone-head {
  padding: 0 0.25rem;
}

.reward-clone-head h1 {
  color: hsl(var(--foreground));
  font-weight: 500;
  letter-spacing: -0.04em;
}

.reward-clone-head h1 span {
  color: hsl(var(--foreground) / 0.78);
}

.reward-donate-button {
  min-height: 2.55rem;
  border-radius: 999px;
  color: hsl(var(--foreground));
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
}

.reward-donate-button:hover {
  background: rgba(255, 255, 255, 0.16);
  filter: none;
}

.reward-clone-thanks {
  color: hsl(var(--foreground) / 0.6);
}

.reward-clone-stats article,
.reward-rank-card,
.reward-update-panel {
  position: relative;
  overflow: hidden;
  border: none;
  background: rgba(255, 255, 255, 0.075);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow:
    0 12px 34px rgba(0, 0, 0, 0.08),
    inset 0 1px 1px rgba(255, 255, 255, 0.1);
}

.reward-clone-stats span,
.reward-rank-info p,
.reward-update-row p,
.reward-update-row small {
  color: hsl(var(--foreground) / 0.56);
}

.reward-clone-stats strong,
.reward-clone-stats article:nth-child(2) strong {
  color: hsl(var(--foreground));
  font-weight: 500;
}

.reward-clone-divider {
  color: hsl(var(--foreground) / 0.82);
}

.reward-clone-divider::before,
.reward-clone-divider::after {
  background: hsl(var(--foreground) / 0.18);
}

.reward-rank-info h3,
.reward-update-panel h2,
.reward-update-row strong {
  color: hsl(var(--foreground));
}

.reward-rank-info h3 span {
  color: hsl(var(--foreground) / 0.55);
}

.reward-rank-card > strong {
  color: hsl(var(--background));
  background: hsl(var(--foreground) / 0.9);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}

.reward-update-panel header,
.reward-update-row {
  border-color: hsl(var(--foreground) / 0.12);
}

.reward-update-panel h2 span {
  color: hsl(var(--background));
  background: hsl(var(--foreground) / 0.9);
}

.reward-update-row b {
  color: hsl(var(--foreground) / 0.82);
}

.reward-update-list::-webkit-scrollbar-thumb {
  background: hsl(var(--foreground) / 0.3);
}

.reward-clone-view .reward-page-empty {
  color: hsl(var(--foreground) / 0.58);
}

.game-page {
  display: grid;
  gap: 1rem;
}

.game-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  padding: 0.6rem;
  border-radius: 999px;
}

.game-tabs button {
  min-height: 2.25rem;
  padding: 0 1rem;
  border: none;
  border-radius: 999px;
  color: hsl(var(--foreground) / 0.68);
  background: transparent;
  cursor: pointer;
  font-size: 0.78rem;
  transition: transform 180ms ease, background 180ms ease, color 180ms ease;
}

.game-tabs button:hover,
.game-tabs button.is-active {
  color: hsl(var(--foreground));
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-1px);
}

.game-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.game-card {
  min-height: 18rem;
  display: grid;
  grid-template-rows: 9rem 1fr;
  border-radius: 1.25rem;
  transition: transform 180ms ease, background 180ms ease;
}

.game-card:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.08);
}

.game-card.is-disabled {
  opacity: 0.62;
}

.game-cover {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 1.25rem 1.25rem 0.5rem 0.5rem;
  background: var(--game-cover);
}

.game-cover::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.22));
  content: "";
}

.game-cover span {
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: 2.4rem;
  font-weight: 600;
  text-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

.game-cover b {
  position: absolute;
  right: 0.8rem;
  bottom: 0.7rem;
  z-index: 1;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  color: #fff;
  background: rgba(0, 0, 0, 0.18);
  font-size: 0.68rem;
  font-weight: 500;
}

.game-card-body {
  display: grid;
  align-content: start;
  gap: 0.55rem;
  padding: 0.95rem;
}

.game-card-body h3 {
  margin: 0;
  color: hsl(var(--foreground));
  font-size: 1.1rem;
  font-weight: 500;
}

.game-card-body p {
  margin: 0;
  color: hsl(var(--foreground) / 0.62);
  font-size: 0.76rem;
  line-height: 1.6;
}

.game-card-body small {
  color: hsl(var(--foreground) / 0.42);
  font-size: 0.68rem;
}

.game-card-ability {
  min-height: 16.7rem;
  grid-template-rows: 8.6rem auto;
}

.game-card-ability .game-card-body {
  gap: 0.48rem;
  padding-bottom: 0.85rem;
}

.game-card-ability .game-play-button {
  margin-top: 0.08rem;
}

.game-play-button,
.game-reset-button {
  min-height: 2.35rem;
  border: none;
  border-radius: 999px;
  color: hsl(var(--background));
  background: hsl(var(--foreground) / 0.9);
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  transition: transform 180ms ease, opacity 180ms ease;
}

.game-play-button:hover,
.game-reset-button:hover {
  transform: scale(1.04);
}

.game-play-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.game-modal-window {
  width: min(920px, 100%);
}

.play-game {
  display: grid;
  gap: 1rem;
}

.play-game-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.play-game-head span {
  color: hsl(var(--foreground) / 0.52);
  font-size: 0.7rem;
}

.play-game-head p,
.chess-layout p,
.chicken-layout p {
  margin: 0.15rem 0 0;
  color: hsl(var(--foreground) / 0.66);
  font-size: 0.78rem;
}

.gomoku-layout,
.game2048-layout,
.chess-layout,
.draw-layout,
.chicken-layout {
  display: grid;
  justify-items: center;
  gap: 0.55rem;
}

.gomoku-status,
.game2048-top,
.draw-word {
  color: hsl(var(--foreground) / 0.72);
  font-size: 0.82rem;
}

.gomoku-board {
  width: min(76vw, 31rem);
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  padding: 0.65rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.1);
}

.gomoku-cell {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
}

.gomoku-cell span,
.chess-cell span {
  display: grid;
  place-items: center;
  border-radius: 999px;
}

.gomoku-cell span {
  position: absolute;
  inset: 16%;
}

.gomoku-cell .black {
  background: #111;
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.3);
}

.gomoku-cell .white {
  background: #f7f7f7;
}

.game2048-grid {
  width: min(74vw, 22rem);
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.55rem;
  padding: 0.55rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.1);
}

.tile {
  display: grid;
  place-items: center;
  border-radius: 0.75rem;
  color: hsl(var(--background));
  background: hsl(var(--foreground) / 0.78);
  font-size: clamp(1.05rem, 5vw, 2rem);
  font-weight: 600;
}

.tile-empty {
  color: transparent;
  background: rgba(255, 255, 255, 0.08);
}

.tile-8,
.tile-16,
.tile-32,
.tile-64,
.tile-128,
.tile-256,
.tile-512,
.tile-1024,
.tile-2048 {
  color: #fff;
  background: rgba(255, 255, 255, 0.28);
}

.game2048-controls {
  display: grid;
  grid-template-columns: repeat(4, 3rem);
  gap: 0.5rem;
}

.game2048-controls button {
  height: 3rem;
  border: none;
  border-radius: 0.8rem;
  color: hsl(var(--foreground));
  background: rgba(255, 255, 255, 0.12);
  cursor: pointer;
  font-size: 1.2rem;
}

.chess-board {
  width: min(78vw, 28rem);
  aspect-ratio: 9 / 10;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 1px;
  padding: 0.5rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.1);
}

.chess-cell {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.035);
  cursor: pointer;
}

.chess-cell.is-selected {
  background: rgba(255, 255, 255, 0.2);
}

.chess-cell span {
  width: 80%;
  aspect-ratio: 1;
  margin: auto;
  font-size: 0.82rem;
  font-weight: 600;
}

.chess-cell .red {
  color: #fff;
  background: rgba(248, 113, 113, 0.82);
}

.chess-cell .black {
  color: #fff;
  background: rgba(15, 23, 42, 0.88);
}

#drawCanvas {
  width: min(78vw, 35rem);
  height: min(45vw, 20rem);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.08);
  cursor: crosshair;
}

.draw-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
}

.draw-tools button {
  width: 2.15rem;
  height: 2.15rem;
  border: none;
  border-radius: 999px;
  background: var(--draw-color, rgba(255, 255, 255, 0.12));
  cursor: pointer;
}

.draw-tools button.is-active {
  outline: 2px solid hsl(var(--foreground) / 0.7);
  outline-offset: 2px;
}

.draw-tools .draw-clear {
  width: auto;
  padding: 0 0.85rem;
  color: hsl(var(--foreground));
  background: rgba(255, 255, 255, 0.12);
}

.chicken-tiles {
  width: min(78vw, 32rem);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.55rem;
}

.chicken-tile,
.chicken-tray span {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 0.8rem;
  font-size: 1.55rem;
  background: rgba(255, 255, 255, 0.12);
}

.chicken-tile {
  border: none;
  cursor: pointer;
}

.chicken-tile.is-picked {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.24);
}

.chicken-tile.is-removed {
  opacity: 0;
  pointer-events: none;
}

.chicken-tray {
  width: min(78vw, 28rem);
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.45rem;
  padding: 0.5rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.08);
}

@media (max-width: 1023px) {
  .reward-clone-view .global-nav {
    position: absolute;
    inset: 1rem 1rem auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0;
  }

  .reward-clone-view .site-brand,
  .reward-clone-view .global-nav .top-login-button {
    position: static;
  }

  .reward-clone-view .global-nav .nav-stack {
    position: static;
    order: 3;
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }

  .reward-clone-shell {
    width: min(100% - 2rem, 760px);
    padding-top: 8.5rem;
  }
}

@media (max-width: 560px) {
  .reward-clone-shell {
    width: calc(100% - 1rem);
    padding-top: 9.25rem;
  }

  .reward-clone-panel {
    border-radius: 1.2rem;
  }
}

/* 20260730: fixed reward panel + richer Gomoku start flow */
.reward-clone-shell {
  position: fixed;
  top: 6.25rem;
  bottom: 5rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0;
}

.reward-clone-panel {
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.reward-clone-panel::-webkit-scrollbar {
  width: 6px;
}

.reward-clone-panel::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: hsl(var(--foreground) / 0.25);
}

.gomoku-setup {
  width: min(560px, 100%);
  display: grid;
  gap: 2rem;
  margin: 0 auto;
  padding: 1.25rem 0.5rem 0.5rem;
  text-align: center;
}

.gomoku-setup-title h4 {
  margin: 0;
  color: hsl(var(--foreground));
  font-size: clamp(2rem, 6vw, 3.1rem);
  font-weight: 700;
  letter-spacing: -0.04em;
}

.gomoku-setup-title p,
.gomoku-setup section h5,
.gomoku-room p {
  margin: 0.35rem 0 0;
  color: hsl(var(--foreground) / 0.62);
  font-size: 0.92rem;
  font-weight: 400;
}

.gomoku-setup section {
  display: grid;
  gap: 1rem;
}

.gomoku-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.gomoku-choice {
  min-height: 5.4rem;
  display: grid;
  grid-template-columns: 1.2rem minmax(0, 1fr);
  grid-template-areas: "dot title" ". sub";
  align-content: center;
  gap: 0.25rem 0.65rem;
  padding: 1rem 1.25rem;
  border: 1px solid hsl(var(--foreground) / 0.18);
  border-radius: 0.9rem;
  color: hsl(var(--foreground) / 0.86);
  background: rgba(255, 255, 255, 0.055);
  cursor: pointer;
  text-align: left;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

.gomoku-choice:hover,
.gomoku-choice.is-active {
  border-color: hsl(var(--foreground) / 0.45);
  background: rgba(255, 255, 255, 0.14);
  transform: translateY(-1px);
}

.gomoku-choice.dark.is-active {
  color: hsl(var(--background));
  background: hsl(var(--foreground) / 0.9);
}

.gomoku-choice span {
  grid-area: dot;
  width: 1.05rem;
  height: 1.05rem;
  align-self: center;
  border: 2px solid currentColor;
  border-radius: 999px;
}

.gomoku-choice.is-active span {
  box-shadow: inset 0 0 0 4px #9ee7bd;
}

.gomoku-choice strong {
  grid-area: title;
  font-size: 0.92rem;
  font-weight: 600;
}

.gomoku-choice small {
  grid-area: sub;
  color: currentColor;
  opacity: 0.62;
  font-size: 0.78rem;
}

.gomoku-room {
  padding: 0.85rem;
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.08);
  color: hsl(var(--foreground) / 0.72);
}

.gomoku-room strong {
  color: hsl(var(--foreground));
  letter-spacing: 0.12em;
}

.gomoku-start {
  width: min(18rem, 100%);
  min-height: 2.8rem;
  justify-self: center;
  border: none;
  border-radius: 999px;
  color: hsl(var(--background));
  background: hsl(var(--foreground) / 0.92);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
}

.gomoku-status {
  display: grid;
  gap: 0.25rem;
  justify-items: center;
}

.gomoku-status strong {
  color: hsl(var(--foreground));
  font-size: 1rem;
}

.gomoku-status small {
  color: hsl(var(--foreground) / 0.48);
}

@media (max-width: 1023px) {
  .reward-clone-shell {
    top: 8.5rem;
    bottom: 1rem;
  }
}

@media (max-width: 560px) {
  .reward-clone-shell {
    top: 9.25rem;
    bottom: 0.75rem;
  }
  .gomoku-choice-grid {
    grid-template-columns: 1fr;
  }
}
/* 20260730 games polish: fixed reward scrolling + full game setup surfaces */
.reward-clone-view .app-shell {
  min-height: 100vh;
  overflow: hidden;
}

.reward-clone-shell {
  position: fixed;
  top: clamp(5.8rem, 10vh, 7rem);
  bottom: clamp(4.5rem, 8vh, 5.8rem);
  left: 50%;
  width: min(1180px, calc(100% - 4rem));
  margin: 0;
  padding: 0;
  transform: translateX(-50%);
  z-index: 10;
}

.reward-clone-panel {
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.game-setup {
  width: min(600px, 100%);
  display: grid;
  gap: 1.45rem;
  margin: 0 auto;
  padding: 1rem 0.5rem 0.25rem;
  text-align: center;
}

.game-setup-title h4 {
  margin: 0;
  color: hsl(var(--foreground));
  font-size: clamp(2rem, 5.4vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.04em;
}

.game-setup-title p {
  margin: 0.35rem 0 0;
  color: hsl(var(--foreground) / 0.62);
  font-size: 0.92rem;
}

.game-setup-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.game-setup-choice {
  min-height: 5rem;
  display: grid;
  grid-template-columns: 1.1rem minmax(0, 1fr);
  grid-template-areas: "dot title" ". sub";
  align-content: center;
  gap: 0.22rem 0.65rem;
  padding: 0.95rem 1.1rem;
  border: 1px solid hsl(var(--foreground) / 0.16);
  border-radius: 0.95rem;
  color: hsl(var(--foreground) / 0.84);
  background: rgba(255, 255, 255, 0.07);
  cursor: pointer;
  text-align: left;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

.game-setup-choice:hover,
.game-setup-choice.is-active {
  border-color: hsl(var(--foreground) / 0.42);
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
}

.game-setup-choice span {
  grid-area: dot;
  width: 1rem;
  height: 1rem;
  align-self: center;
  border: 2px solid currentColor;
  border-radius: 999px;
}

.game-setup-choice.is-active span {
  box-shadow: inset 0 0 0 4px #9ee7bd;
}

.game-setup-choice strong {
  grid-area: title;
  color: currentColor;
  font-size: 0.92rem;
  font-weight: 600;
}

.game-setup-choice small {
  grid-area: sub;
  color: currentColor;
  opacity: 0.6;
  font-size: 0.78rem;
}

.game-status-panel,
.game2048-scoreboard,
.game-room-code,
.draw-guesses,
.chess-captured {
  width: min(78vw, 35rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.55rem 0.9rem;
  padding: 0.65rem 0.85rem;
  border-radius: 1rem;
  color: hsl(var(--foreground) / 0.68);
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.8rem;
}

.game-status-panel strong,
.game2048-scoreboard b,
.game-room-code strong {
  color: hsl(var(--foreground));
}

.game2048-top {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.draw-guess-form {
  width: min(78vw, 35rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.55rem;
}

.draw-guess-form input {
  min-height: 2.4rem;
  padding: 0 0.85rem;
  border: none;
  border-radius: 999px;
  color: hsl(var(--foreground));
  background: rgba(255, 255, 255, 0.12);
  outline: none;
}

.draw-guess-form button,
.chicken-undo {
  min-height: 2.4rem;
  padding: 0 0.95rem;
  border: none;
  border-radius: 999px;
  color: hsl(var(--background));
  background: hsl(var(--foreground) / 0.88);
  cursor: pointer;
}

.chicken-undo:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 640px) {
  .game-setup-grid,
  .draw-guess-form {
    grid-template-columns: 1fr;
  }

  .reward-clone-shell {
    top: 9rem;
    bottom: 1rem;
    width: min(100% - 1.5rem, 1180px);
  }
}
/* 20260730: moba */
.moba-page{display:grid;gap:1.2rem}.moba-toolbar{display:grid;gap:.8rem;padding:.9rem;border-radius:1rem}.moba-search{min-height:2.8rem;display:grid;grid-template-columns:1.2rem minmax(0,1fr);gap:.65rem;align-items:center;padding:0 .9rem;border-radius:.85rem;background:rgba(255,255,255,.08)}.moba-search svg,.moba-window-bar svg,.moba-unlock-card svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:1.8}.moba-search input{width:100%;min-width:0;border:0;outline:0;color:hsl(var(--foreground));background:transparent;font:inherit;font-size:.84rem}.moba-search input::placeholder{color:hsl(var(--foreground)/.45)}.moba-categories{display:flex;flex-wrap:wrap;gap:.45rem}.moba-categories button{min-height:2.1rem;padding:0 .8rem;border:0;border-radius:999px;color:hsl(var(--foreground)/.66);background:rgba(255,255,255,.07);cursor:pointer;font:inherit;font-size:.76rem;transition:.18s}.moba-categories button:hover,.moba-categories button.is-active{color:hsl(var(--background));background:hsl(var(--foreground)/.9);transform:translateY(-1px)}.moba-section{display:grid;gap:.75rem}.moba-section-head{display:flex;align-items:center;justify-content:space-between;gap:1rem}.moba-section-head h2{margin:0;color:hsl(var(--foreground));font-size:1rem;font-weight:600}.moba-section-head span{color:hsl(var(--foreground)/.46);font-size:.72rem;letter-spacing:.08em}.moba-hot-grid,.moba-scene-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}.moba-scene-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.moba-scene-card{min-width:0;display:grid;gap:.65rem;padding:.65rem;border:0;border-radius:.9rem;color:inherit;background:rgba(255,255,255,.07);box-shadow:inset 0 1px 1px rgba(255,255,255,.1);cursor:pointer;text-align:left;transition:.18s}.moba-scene-card:hover{background:rgba(255,255,255,.14);transform:translateY(-2px)}.moba-card-preview{position:relative;min-height:6rem;overflow:hidden;display:block;border-radius:.65rem;background:#121826}.moba-card-preview:before{position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.15),transparent 48%);content:""}.moba-preview-lines{position:absolute;top:1rem;left:.75rem;width:61%;height:.25rem;border-radius:999px;background:rgba(255,255,255,.75);box-shadow:0 .75rem 0 rgba(255,255,255,.34),0 1.5rem 0 rgba(255,255,255,.22)}.moba-preview-table{position:absolute;right:.75rem;bottom:.7rem;width:58%;height:2.8rem;background:repeating-linear-gradient(0deg,transparent 0 .64rem,rgba(255,255,255,.2) .67rem),repeating-linear-gradient(90deg,transparent 0 1.5rem,rgba(255,255,255,.17) 1.53rem)}.moba-preview-progress{position:absolute;right:.75rem;bottom:.85rem;left:.75rem;height:.28rem;border-radius:999px;background:rgba(255,255,255,.15)}.moba-preview-progress:after{display:block;width:var(--scene-progress);height:100%;border-radius:inherit;background:rgba(255,255,255,.85);content:""}.moba-preview-camera{position:absolute;inset:1rem 2.2rem 1rem .8rem;border-radius:.4rem;background:linear-gradient(135deg,rgba(255,255,255,.28),rgba(255,255,255,.08))}.moba-preview-avatar{position:absolute;top:1.1rem;right:.75rem;width:1rem;height:1rem;border-radius:999px;background:rgba(255,255,255,.75);box-shadow:0 1.35rem 0 rgba(255,255,255,.42),0 2.7rem 0 rgba(255,255,255,.26)}.moba-preview-sad{position:absolute;top:50%;left:50%;color:#f6fbff;font-size:2rem;font-style:normal;transform:translate(-50%,-50%)}.moba-card-copy{display:grid;gap:.2rem;min-width:0}.moba-card-copy strong,.moba-card-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.moba-card-copy strong{color:hsl(var(--foreground));font-size:.84rem;font-weight:600}.moba-card-copy small{color:hsl(var(--foreground)/.52);font-size:.7rem}.moba-card-meta{display:flex;align-items:center;justify-content:space-between;gap:.5rem;color:hsl(var(--foreground)/.4);font-size:.66rem}.moba-card-meta em{font-style:normal}.moba-card-meta b{color:hsl(var(--foreground)/.72);font-weight:500}.moba-empty{margin:0;padding:2rem;color:hsl(var(--foreground)/.52);text-align:center}
.moba-simulator{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:clamp(.7rem,3vw,2rem);background:rgba(7,10,18,.94)}.moba-simulator:fullscreen{padding:0;background:#0e1320}.moba-work-window{width:min(1180px,100%);height:min(720px,100%);min-height:32rem;overflow:hidden;display:grid;grid-template-rows:3rem minmax(0,1fr);border-radius:.9rem;color:#e9eef6;background:#111827;box-shadow:0 26px 80px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.13)}.moba-simulator:fullscreen .moba-work-window{width:100%;height:100%;border-radius:0}.moba-window-bar{display:flex;align-items:center;gap:.6rem;padding:0 .9rem;background:rgba(255,255,255,.06)}.moba-window-bar>span{width:.7rem;height:.7rem;border-radius:50%;background:rgba(255,255,255,.75)}.moba-window-bar strong{flex:1;color:rgba(255,255,255,.88);font-size:.8rem;font-weight:500}.moba-window-bar div{display:flex;gap:.3rem}.moba-window-bar button{width:2rem;height:2rem;display:grid;place-items:center;border:0;border-radius:.45rem;color:rgba(255,255,255,.72);background:transparent;cursor:pointer}.moba-window-bar button:hover{color:#fff;background:rgba(255,255,255,.11)}
.moba-terminal,.moba-office{min-height:0;display:grid;grid-template-columns:12rem minmax(0,1fr)}.moba-terminal aside,.moba-office aside{display:grid;align-content:start;gap:.8rem;padding:1.3rem;color:rgba(255,255,255,.52);background:rgba(0,0,0,.16);font-size:.78rem}.moba-terminal aside b,.moba-office aside b{color:rgba(255,255,255,.85);font-size:.75rem}.moba-terminal main,.moba-office main{min-width:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:1rem;padding:1.4rem;font-family:Consolas,monospace;font-size:.8rem}.moba-terminal main p{margin:0;color:rgba(255,255,255,.78)}.moba-terminal main .muted{color:rgba(255,255,255,.4)}.moba-terminal footer,.moba-office footer,.moba-meeting footer,.moba-design footer{color:rgba(255,255,255,.5);font-size:.72rem}.moba-terminal footer strong,.moba-office footer strong,.moba-meeting footer strong,.moba-design footer strong{color:rgba(255,255,255,.9)}.moba-table{display:grid;grid-template-columns:repeat(4,1fr);align-content:start;border-top:1px solid rgba(255,255,255,.12);border-left:1px solid rgba(255,255,255,.12);font-size:.75rem}.moba-table i{min-height:2.3rem;display:grid;align-items:center;padding:0 .65rem;border-right:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.68);font-style:normal}.moba-office main>div{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));align-content:start;border-top:1px solid rgba(255,255,255,.13);border-left:1px solid rgba(255,255,255,.13)}.moba-office main i{min-height:2rem;border-right:1px solid rgba(255,255,255,.13);border-bottom:1px solid rgba(255,255,255,.13);color:rgba(255,255,255,.36);font-size:.65rem;font-style:normal}
.moba-meeting{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 15rem;grid-template-rows:minmax(0,1fr) auto;padding:1.25rem;gap:1rem}.moba-meeting main{position:relative;display:grid;place-items:center;border-radius:.7rem;background:linear-gradient(135deg,#273143,#111827)}.moba-meeting main span{color:rgba(255,255,255,.62);font-size:.8rem}.moba-meeting main i{position:absolute;bottom:1.1rem;width:2.4rem;height:.35rem;border-radius:999px;background:rgba(255,255,255,.18)}.moba-meeting aside{display:grid;align-content:start;gap:.75rem;padding:1rem;border-radius:.7rem;background:rgba(255,255,255,.06)}.moba-meeting aside b{font-size:.8rem}.moba-meeting aside p{margin:0;color:rgba(255,255,255,.55);font-size:.75rem}.moba-meeting footer{grid-column:1/-1}
.moba-center,.moba-blue{display:grid;place-items:center;align-content:center;gap:1rem;padding:2rem;text-align:center}.moba-center h3,.moba-blue h3{margin:0;color:rgba(255,255,255,.9);font-size:1.15rem;font-weight:500}.moba-center p,.moba-blue p{margin:0;color:rgba(255,255,255,.52);font-size:.82rem}.moba-center>strong,.moba-blue>strong{color:rgba(255,255,255,.78);font-size:1.25rem}.moba-ring{width:9rem;aspect-ratio:1;border-radius:50%;background:conic-gradient(rgba(255,255,255,.9) var(--scene-progress),rgba(255,255,255,.12) 0);box-shadow:inset 0 0 0 1.1rem #111827}.moba-blue{align-content:start;justify-items:start;padding:12vh 15vw;color:#fff;text-align:left;background:#1674d1}.moba-blue b{font-size:5rem;font-weight:400}.moba-blue h3{max-width:35rem;font-size:1.45rem;line-height:1.5}.moba-bars{height:10rem;display:flex;align-items:end;gap:.35rem}.moba-bars i{width:.55rem;height:var(--h);border-radius:.3rem .3rem 0 0;background:rgba(255,255,255,.75)}.moba-number{color:rgba(255,255,255,.92);font-size:5rem;font-weight:500}.moba-design{min-height:0;display:grid;grid-template-columns:10rem minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:1rem;padding:1rem}.moba-design aside{padding:1rem;color:rgba(255,255,255,.5);line-height:2;background:rgba(255,255,255,.06);font-size:.78rem}.moba-design main{position:relative;overflow:hidden;background:repeating-linear-gradient(0deg,rgba(255,255,255,.08) 0 1px,transparent 1px 2.5rem),repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 1px,transparent 1px 2.5rem)}.moba-design main i{position:absolute;border:2px solid rgba(255,255,255,.62)}.moba-design main i:nth-child(1){inset:20% 24%}.moba-design main i:nth-child(2){inset:32% 36%;border-radius:50%}.moba-design main i:nth-child(3){top:20%;left:50%;height:60%;border-left:2px dashed rgba(255,255,255,.55);border-right:0;border-top:0;border-bottom:0}.moba-design main b{position:absolute;right:1rem;bottom:1rem;color:rgba(255,255,255,.36);font-size:3rem;font-weight:600}.moba-design footer{grid-column:1/-1}
.moba-lock-layer{position:absolute;inset:0;z-index:2;display:grid;place-items:center;padding:1rem;background:rgba(5,8,14,.88);backdrop-filter:blur(12px)}.moba-unlock-card{width:min(22rem,100%);display:grid;justify-items:center;gap:.8rem;padding:1.5rem;border-radius:1rem;color:rgba(255,255,255,.85);background:rgba(255,255,255,.1);box-shadow:inset 0 1px 1px rgba(255,255,255,.17)}.moba-unlock-card>span{width:2.6rem;height:2.6rem;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.12)}.moba-unlock-card h3{margin:0;font-size:1rem;font-weight:500}.moba-unlock-card input{width:100%;min-height:2.55rem;padding:0 .85rem;border:0;border-radius:.7rem;outline:0;color:#fff;background:rgba(0,0,0,.22);font:inherit}.moba-unlock-card p{min-height:1rem;margin:0;color:rgba(255,255,255,.58);font-size:.72rem}.moba-unlock-card button{min-height:2.5rem;width:100%;border:0;border-radius:.7rem;color:#111827;background:rgba(255,255,255,.9);cursor:pointer;font:inherit;font-weight:600}
@media(max-width:900px){.moba-scene-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.moba-hot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:640px){.moba-hot-grid,.moba-scene-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.moba-card-preview{min-height:5rem}.moba-card-copy small{display:none}.moba-work-window{min-height:0}.moba-terminal,.moba-office,.moba-meeting,.moba-design{grid-template-columns:1fr}.moba-terminal aside,.moba-office aside,.moba-meeting aside,.moba-design aside{display:none}.moba-meeting{grid-template-rows:minmax(0,1fr) auto}.moba-blue{padding:3rem 2rem}}

/* 20260731: moba reference-style glass replication */
.moba-page {
  width: min(100%, 920px);
  margin: 0 auto;
  gap: 1.35rem;
}

.moba-toolbar {
  padding: 0.75rem;
  background: rgba(210, 235, 238, 0.16);
  backdrop-filter: blur(38px);
  -webkit-backdrop-filter: blur(38px);
}

.moba-search {
  min-height: 3.2rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.12);
}

.moba-categories {
  justify-content: center;
}

.moba-categories button {
  min-height: 2.15rem;
  padding: 0 0.86rem;
  background: rgba(255, 255, 255, 0.08);
}

.moba-categories button:hover,
.moba-categories button.is-active {
  color: hsl(var(--foreground));
  background: rgba(255, 255, 255, 0.2);
}

.moba-instructions {
  position: relative;
  display: grid;
  gap: 0.95rem;
  padding: 1.05rem 1.15rem;
  border-radius: 1.4rem;
  background: rgba(242, 228, 184, 0.16);
}

.moba-instruction-corner {
  position: absolute;
  top: -1.45rem;
  left: -1.45rem;
  color: rgba(255, 255, 255, 0.28);
  transform: rotate(-90deg);
}

.moba-instruction-corner svg {
  width: 4rem;
  height: 4rem;
  fill: currentColor;
  stroke: currentColor;
}

.moba-instructions h2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  color: hsl(var(--foreground) / 0.9);
  font-size: 1rem;
  font-weight: 600;
}

.moba-instructions h2 svg {
  width: 1rem;
  height: 1rem;
  fill: rgba(255, 255, 255, 0.12);
}

.moba-instructions ol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.moba-instructions li {
  display: grid;
  grid-template-columns: 1.35rem minmax(0, 1fr);
  gap: 0.5rem;
  align-items: start;
  color: hsl(var(--foreground) / 0.72);
  font-size: 0.78rem;
  line-height: 1.55;
}

.moba-instructions li b {
  width: 1.25rem;
  height: 1.25rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: hsl(var(--foreground));
  background: rgba(255, 255, 255, 0.12);
  font-size: 0.68rem;
}

.moba-section-head h2 {
  font-size: 1.25rem;
  letter-spacing: -0.03em;
}

.moba-hot-badge {
  min-height: 1.25rem;
  display: inline-flex;
  align-items: center;
  padding: 0 0.55rem;
  border-radius: 999px;
  color: #fff !important;
  background: rgba(255, 78, 88, 0.82);
  font-weight: 700;
  animation: mobaPulse 1.3s ease-in-out infinite;
}

.moba-hot-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.moba-scene-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
}

.moba-scene-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: none;
  color: hsl(var(--foreground));
  text-align: left;
  cursor: pointer;
  transition: transform 240ms ease, background 240ms ease, box-shadow 240ms ease;
}

.moba-scene-card:hover {
  transform: translateY(-3px) scale(1.015);
}

.moba-hot-card {
  min-height: 12rem;
  padding: 1.25rem;
  border-radius: 1.45rem;
  background: rgba(210, 235, 238, 0.18);
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.17);
}

.moba-list-card {
  min-height: 10.8rem;
  padding: 1rem;
  border-radius: 1.05rem;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.12);
}

.moba-list-card:hover {
  background: rgba(255, 255, 255, 0.16);
}

.moba-card-top,
.moba-card-bottom {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.9rem;
}

.moba-card-bottom {
  align-items: flex-end;
}

.moba-card-copy {
  gap: 0.35rem;
}

.moba-hot-card .moba-card-copy strong {
  font-size: 1.12rem;
  font-weight: 600;
}

.moba-list-card .moba-card-copy strong {
  font-size: 0.98rem;
  font-weight: 600;
}

.moba-card-copy small {
  color: hsl(var(--foreground) / 0.68);
  font-size: 0.78rem;
}

.moba-card-score {
  flex: 0 0 auto;
  min-height: 1.65rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0 0.55rem;
  border-radius: 999px;
  color: hsl(var(--foreground));
  background: rgba(255, 255, 255, 0.14);
  font-size: 0.72rem;
}

.moba-card-score svg {
  width: 0.8rem;
  height: 0.8rem;
  fill: rgba(255, 255, 255, 0.9);
  stroke: rgba(255, 255, 255, 0.9);
}

.moba-card-score b {
  font-weight: 600;
}

.moba-card-icon {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 1rem;
  color: hsl(var(--foreground));
  background: rgba(255, 255, 255, 0.14);
}

.moba-list-card .moba-card-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.75rem;
}

.moba-card-icon svg {
  width: 1.35rem;
  height: 1.35rem;
}

.moba-card-action {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: hsl(var(--foreground) / 0.86);
  font-size: 0.78rem;
  font-weight: 500;
}

.moba-card-action svg {
  width: 0.95rem;
  height: 0.95rem;
  transition: transform 180ms ease;
}

.moba-scene-card:hover .moba-card-action svg {
  transform: translateX(3px);
}

.moba-card-group {
  margin-top: 0.9rem;
  color: hsl(var(--foreground) / 0.45);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
}

.moba-card-glow {
  position: absolute;
  right: -2rem;
  bottom: -2rem;
  width: 7rem;
  height: 7rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  filter: blur(22px);
  pointer-events: none;
}

.moba-simulator {
  background: rgba(0, 0, 0, 0.92);
}

.moba-work-window {
  background: #000;
}

.moba-db-scene,
.moba-windows-update-scene,
.moba-reinstall-scene {
  min-height: 0;
  height: 100%;
}

.moba-db-scene {
  overflow: hidden;
  color: #4ade80;
  background: #000;
  font-family: Consolas, "Courier New", monospace;
}

.moba-db-panel {
  height: 100%;
  padding: 1rem;
}

.moba-db-head {
  padding-bottom: 0.7rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(34, 197, 94, 0.72);
}

.moba-db-head h1 {
  margin: 0;
  color: #4ade80;
  font-size: 1.25rem;
  font-weight: 400;
}

.moba-db-head span,
.moba-db-status small {
  color: rgba(134, 239, 172, 0.86);
  font-size: 0.86rem;
}

.moba-db-stream {
  height: min(48vh, 24rem);
  overflow: hidden;
}

.moba-db-stream p {
  margin: 0 0 0.55rem;
  color: #4ade80;
  font-size: 0.9rem;
}

.moba-db-stream span {
  color: #9ca3af;
}

.moba-db-status {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(34, 197, 94, 0.72);
}

.moba-db-status p {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.45rem;
}

.moba-db-status i {
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  background: #4ade80;
  animation: mobaPulse 1s ease-in-out infinite;
}

.moba-windows-update-scene,
.moba-reinstall-scene {
  display: grid;
  place-items: center;
  padding: 2rem;
  color: #fff;
  background: #1d4ed8;
  text-align: center;
}

.moba-reinstall-scene {
  background: #2563eb;
}

.moba-win-card,
.moba-reinstall-card {
  width: min(32rem, 100%);
  display: grid;
  justify-items: center;
}

.moba-win-spinner {
  width: 8rem;
  height: 8rem;
  margin-bottom: 1.5rem;
  border: 0.5rem solid rgba(255, 255, 255, 0.95);
  border-top-color: transparent;
  border-radius: 999px;
  animation: mobaSpin 1.05s linear infinite;
}

.moba-win-card h1,
.moba-reinstall-card h1 {
  margin: 0 0 0.45rem;
  color: #fff;
  font-size: 1.7rem;
  font-weight: 700;
}

.moba-win-card p,
.moba-reinstall-card p,
.moba-win-card span,
.moba-reinstall-card span,
.moba-win-card li,
.moba-reinstall-card li {
  color: rgba(219, 234, 254, 0.92);
}

.moba-win-percent {
  margin-top: 2rem;
  color: #fff;
  font-size: 2.7rem;
  font-weight: 700;
}

.moba-win-track {
  width: 100%;
  height: 0.5rem;
  overflow: hidden;
  margin: 1rem 0 1.4rem;
  border-radius: 999px;
  background: rgba(30, 64, 175, 0.9);
}

.moba-win-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #fff;
}

.moba-win-card ul,
.moba-reinstall-card ul {
  display: grid;
  gap: 0.65rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
}

.moba-win-card section,
.moba-reinstall-card section {
  width: 100%;
  display: grid;
  gap: 0.35rem;
  margin: 1.65rem 0 1.25rem;
  padding: 1rem;
  border-radius: 0.85rem;
  background: rgba(30, 64, 175, 0.72);
  font-size: 0.86rem;
  text-align: left;
}

.moba-win-card section p {
  margin: 0;
}

.moba-win-card small,
.moba-reinstall-card small {
  color: rgba(191, 219, 254, 0.8);
  font-size: 0.76rem;
}

.moba-install-ring {
  width: 6rem;
  height: 6rem;
  display: grid;
  place-items: center;
  margin-bottom: 1.5rem;
  border: 0.25rem solid rgba(255, 255, 255, 0.92);
  border-radius: 999px;
}

.moba-install-ring strong {
  color: #fff;
  font-size: 1.8rem;
}

.moba-reinstall-card section label {
  color: #fff;
}

.moba-reinstall-card section span {
  display: block;
  font-size: 0.86rem;
}

.moba-reinstall-card ul {
  justify-items: start;
  text-align: left;
}

.moba-reinstall-card ul li::before {
  content: "• ";
}

@keyframes mobaSpin {
  to { transform: rotate(360deg); }
}

@keyframes mobaPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

@media (max-width: 900px) {
  .moba-hot-grid,
  .moba-scene-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .moba-instructions ol {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .moba-hot-grid,
  .moba-scene-grid {
    grid-template-columns: 1fr;
  }

  .hot-hero {
    flex-direction: column;
    align-items: flex-start;
  }

  .hot-grid {
    grid-template-columns: 1fr;
  }

  .moba-hot-card,
  .moba-list-card {
    min-height: 9.5rem;
  }
}

.moba-category-section .moba-categories {
  justify-content: flex-start;
  padding: 0.15rem 0 0.25rem;
}

.page-view.todo-view .left-glass,
.page-view.todo-view .page-title-row {
  display: none;
}

.page-view.todo-view .page-panel,
.page-view.todo-view .page-content {
  width: 100%;
  max-width: none;
  min-height: 0;
}

.page-view.todo-view .page-content {
  padding: 0;
}

.note-wall-shell {
  width: 100%;
  min-height: calc(100vh - 11.25rem);
}

.note-wall-frame {
  width: 100%;
  height: calc(100vh - 11.25rem);
  min-height: 680px;
  display: block;
  border: 0;
  background: transparent;
}

@media (min-width: 1500px) {
  .hot-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.95rem;
  }

  .hot-card {
    min-height: 30rem;
  }
}

/* Keep the hotspot page in the same three-column rhythm as the game page. */
.page-view.latest-view .page-panel,
.page-view.latest-view .page-content {
  width: min(1180px, calc(100vw - 3rem));
  max-width: 1180px;
}

.page-view.latest-view .hot-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.page-view.latest-view .hot-card {
  aspect-ratio: auto;
}

.moba-section-subtitle {
  color: hsl(var(--foreground) / 0.55);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}

/* 20260731: moba full-scene reference polish */
.moba-instructions {
  gap: 0.58rem;
  padding: 0.76rem 1rem 0.86rem;
  overflow: hidden;
}

.moba-instruction-corner {
  top: -3.05rem;
  left: -3.05rem;
  opacity: 0.55;
}

.moba-simulator,
.moba-simulator:fullscreen {
  place-items: stretch;
  padding: 0;
  background: #000;
}

.moba-work-window,
.moba-simulator:fullscreen .moba-work-window {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: block;
  border-radius: 0;
  background: #000;
  box-shadow: none;
}

.moba-work-window svg {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.moba-ref-progress {
  height: 0.5rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.16);
}

.moba-ref-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: currentColor;
  transition: width 1s linear;
}

.moba-ref-spinner {
  width: 8rem;
  height: 8rem;
  border: 0.48rem solid rgba(255, 255, 255, 0.95);
  border-top-color: transparent;
  border-radius: 999px;
  animation: mobaSpin 1s linear infinite;
}

.moba-ref-terminal {
  height: 100%;
  display: grid;
  grid-template-rows: auto auto auto;
  padding: 1rem;
  color: #4ade80;
  background: #000;
  font-family: Consolas, "Courier New", monospace;
}

.moba-ref-terminal header {
  padding-bottom: 0.7rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(34, 197, 94, 0.72);
}

.moba-ref-terminal h1 {
  margin: 0;
  color: #4ade80;
  font-size: 1.25rem;
  font-weight: 400;
}

.moba-ref-terminal header p,
.moba-ref-terminal footer small {
  margin: 0.25rem 0 0;
  color: rgba(134, 239, 172, 0.86);
  font-size: 0.86rem;
}

.moba-ref-terminal section {
  min-height: 0;
  overflow: hidden;
}

.moba-ref-terminal section p {
  margin: 0 0 0.52rem;
  font-size: 0.9rem;
  animation: mobaScrollLine 9s linear infinite;
}

.moba-ref-terminal section p span {
  display: inline-block;
  width: 6.3rem;
  color: #9ca3af;
}

.moba-ref-terminal .is-warn {
  color: #f87171;
}

.moba-ref-terminal footer {
  padding-top: 1rem;
  border-top: 1px solid rgba(34, 197, 94, 0.5);
}

.moba-ref-terminal footer p {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 0.35rem;
}

.moba-ref-terminal footer i {
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  background: #4ade80;
  animation: mobaPulse 1.2s ease-in-out infinite;
}

.moba-ref-meeting {
  min-height: 100%;
  display: grid;
  place-items: center;
  color: #1f2937;
  background: #f3f4f6;
  text-align: center;
}

.moba-ref-meeting section {
  width: min(28rem, calc(100% - 2rem));
}

.moba-ref-meeting-loader {
  width: 6rem;
  height: 6rem;
  display: grid;
  place-items: center;
  margin: 0 auto 1rem;
  border-radius: 999px;
  background: #3b82f6;
}

.moba-ref-meeting-loader i {
  width: 4rem;
  height: 4rem;
  border: 0.26rem solid #fff;
  border-top-color: transparent;
  border-radius: 999px;
  animation: mobaSpin 0.9s linear infinite;
}

.moba-ref-meeting h1,
.moba-ref-dialog h1 {
  margin: 0 0 0.55rem;
  font-size: 1.55rem;
  font-weight: 600;
}

.moba-ref-meeting article {
  margin-top: 1.5rem;
  padding: 1.5rem;
  border-radius: 0.7rem;
  background: #fff;
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.14);
}

.moba-ref-meeting h2 {
  margin: 0 0 0.75rem;
  font-size: 1.1rem;
  font-weight: 600;
}

.moba-ref-meeting dl {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  text-align: left;
}

.moba-ref-meeting dl div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.moba-ref-meeting dt,
.moba-ref-meeting dd {
  margin: 0;
}

.moba-ref-avatar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.moba-ref-avatar-grid span {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 0.35rem;
  color: #6b7280;
  background: #e5e7eb;
}

.moba-ref-vscode {
  height: 100%;
  display: grid;
  grid-template-rows: 2.45rem minmax(0, 1fr);
  color: #d4d4d4;
  background: #1e1e1e;
  font-family: Consolas, "Courier New", monospace;
}

.moba-ref-vscode header {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0 0.85rem;
  background: #2d2d30;
}

.moba-ref-vscode header span {
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 999px;
  background: #ef4444;
}

.moba-ref-vscode header span:nth-child(2) {
  background: #f59e0b;
}

.moba-ref-vscode header span:nth-child(3) {
  background: #22c55e;
}

.moba-ref-vscode header b {
  margin-left: 0.4rem;
  font-weight: 400;
}

.moba-ref-vscode-body {
  min-height: 0;
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr);
}

.moba-ref-vscode aside {
  display: grid;
  align-content: start;
  gap: 0.7rem;
  padding: 1rem;
  color: #9ca3af;
  background: #252526;
}

.moba-ref-vscode aside b,
.moba-ref-vscode aside em {
  font-style: normal;
  font-weight: 400;
}

.moba-ref-vscode section {
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto auto;
}

.moba-ref-error-strip {
  padding: 0.75rem 1rem;
  color: #fff;
  background: #b91c1c;
}

.moba-ref-code {
  overflow: hidden;
  padding: 1rem 1.25rem;
}

.moba-ref-code p {
  margin: 0 0 0.45rem;
}

.moba-ref-code .is-error {
  color: #f87171;
}

.moba-ref-vscode footer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.8rem;
  align-items: center;
  padding: 0.75rem 1rem;
  background: #111827;
}

.moba-ref-windows,
.moba-ref-reinstall,
.moba-ref-bsod {
  min-height: 100%;
  display: grid;
  place-items: center;
  color: #fff;
  background: #1d4ed8;
  text-align: center;
}

.moba-ref-windows section,
.moba-ref-reinstall section {
  width: min(32rem, calc(100% - 2rem));
}

.moba-ref-windows h1,
.moba-ref-reinstall h1 {
  margin: 1.2rem 0 0.4rem;
  font-size: 1.55rem;
  font-weight: 700;
}

.moba-ref-percent {
  display: block;
  margin: 1.2rem 0 0.5rem;
  font-size: 2.8rem;
}

.moba-ref-windows ul,
.moba-ref-reinstall ul {
  display: grid;
  gap: 0.75rem;
  margin: 1.6rem 0;
  padding: 0;
  list-style: none;
  color: rgba(219, 234, 254, 0.96);
}

.moba-ref-windows article,
.moba-ref-reinstall article {
  display: grid;
  gap: 0.35rem;
  padding: 1rem;
  border-radius: 0.7rem;
  background: rgba(30, 64, 175, 0.75);
  text-align: left;
}

.moba-ref-ring {
  width: 6rem;
  height: 6rem;
  display: grid;
  place-items: center;
  margin: 0 auto 1rem;
  border: 0.26rem solid rgba(255, 255, 255, 0.92);
  border-radius: 999px;
}

.moba-ref-antivirus {
  min-height: 100%;
  color: #111827;
  background: #f3f4f6;
}

.moba-ref-antivirus header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  color: #fff;
  background: #dc2626;
}

.moba-ref-antivirus header span {
  font-size: 2rem;
}

.moba-ref-antivirus header h1 {
  margin: 0;
  font-size: 1.25rem;
}

.moba-ref-antivirus header b {
  margin-left: auto;
  color: #fee2e2;
}

.moba-ref-antivirus section {
  width: min(42rem, calc(100% - 2rem));
  display: grid;
  gap: 1rem;
  margin: 2rem auto;
}

.moba-ref-antivirus article,
.moba-ref-antivirus aside {
  padding: 1.25rem;
  border-radius: 0.7rem;
  background: #fff;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
}

.moba-ref-antivirus h2 {
  text-align: center;
}

.moba-ref-antivirus article strong {
  display: block;
  color: #dc2626;
  font-size: 2.4rem;
  text-align: center;
}

.moba-ref-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 1rem;
}

.moba-ref-stats span {
  display: grid;
  gap: 0.25rem;
  padding: 0.8rem;
  border-radius: 0.5rem;
  background: #f3f4f6;
}

.moba-ref-antivirus aside {
  background: #fef2f2;
}

.moba-ref-antivirus aside h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.8rem;
  color: #991b1b;
}

.moba-ref-antivirus aside p {
  display: grid;
  gap: 0.2rem;
  margin: 0.45rem 0;
  color: #7f1d1d;
  font-family: Consolas, monospace;
}

.moba-ref-hardware,
.moba-ref-disk,
.moba-ref-driver,
.moba-ref-log {
  min-height: 100%;
  color: #e5e7eb;
  background: #0f172a;
}

.moba-ref-hardware header,
.moba-ref-disk header,
.moba-ref-driver header,
.moba-ref-log header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.9rem 1rem;
  background: #1e40af;
}

.moba-ref-hardware h1,
.moba-ref-disk h1,
.moba-ref-driver h1,
.moba-ref-log h1 {
  margin: 0;
  font-size: 1.15rem;
}

.moba-ref-hardware section,
.moba-ref-disk section,
.moba-ref-driver section,
.moba-ref-log section {
  width: min(58rem, calc(100% - 2rem));
  display: grid;
  gap: 1rem;
  margin: 2rem auto;
}

.moba-ref-hardware article,
.moba-ref-hardware section > div,
.moba-ref-disk article,
.moba-ref-disk aside,
.moba-ref-driver article,
.moba-ref-log section > article,
.moba-ref-log-stats {
  padding: 1rem;
  border-radius: 0.6rem;
  background: rgba(15, 23, 42, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.moba-ref-hardware section > div p {
  display: grid;
  grid-template-columns: 5rem 1fr 4rem;
  gap: 1rem;
  margin: 0;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.15);
}

.moba-ref-dialog {
  min-height: 100%;
  display: grid;
  place-items: center;
  color: #1f2937;
  background: #fff;
  text-align: center;
}

.moba-ref-dialog section {
  width: min(32rem, calc(100% - 2rem));
}

.moba-ref-dialog-icon,
.moba-ref-file-icon,
.moba-ref-adobe {
  width: 5rem;
  height: 5rem;
  display: grid;
  place-items: center;
  margin: 0 auto 1rem;
  border-radius: 999px;
  background: #fee2e2;
  color: #dc2626;
  font-size: 2.6rem;
}

.moba-ref-file-icon {
  background: #ffedd5;
  color: #ea580c;
}

.moba-ref-adobe {
  background: #fee2e2;
  font-weight: 800;
}

.moba-ref-dialog article {
  display: grid;
  gap: 0.4rem;
  margin: 1rem 0;
  padding: 1rem;
  border-radius: 0.7rem;
  background: #fef2f2;
  color: #991b1b;
}

.moba-ref-dialog ul {
  display: grid;
  gap: 0.75rem;
  padding: 0;
  margin: 1.2rem 0;
  list-style: none;
  text-align: left;
}

.moba-ref-dialog li::before {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.7rem;
  border-radius: 999px;
  background: #ef4444;
  content: "";
}

.moba-ref-dialog button {
  border: 0;
  border-radius: 0.4rem;
  padding: 0.65rem 1rem;
  color: #fff;
  background: #2563eb;
  opacity: 0.55;
}

.moba-ref-ppt article {
  color: #1f2937;
  background: #f9fafb;
}

.moba-ref-ppt article div,
.moba-ref-ppt footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.moba-ref-ppt footer {
  align-items: center;
  justify-content: center;
  padding: 1rem;
  border-radius: 0.55rem;
  color: #1e40af;
  background: #eff6ff;
}

.moba-ref-ppt footer i {
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  background: #3b82f6;
  animation: mobaPulse 1s infinite;
}

.moba-ref-excel {
  height: 100%;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  color: #1f2937;
  background: #f3f4f6;
  font-family: Arial, "Microsoft YaHei", sans-serif;
}

.moba-ref-excel header {
  color: #fff;
  background: #107c41;
}

.moba-ref-excel header h1 {
  margin: 0;
  padding: 0.55rem 1rem;
  font-size: 1.05rem;
  font-weight: 600;
}

.moba-ref-excel nav {
  display: flex;
  gap: 1.2rem;
  padding: 0.35rem 1rem 0.55rem;
  background: #0f6b38;
}

.moba-ref-excel-warning {
  padding: 0.6rem 1rem;
  color: #713f12;
  background: #fef3c7;
  font-weight: 600;
}

.moba-ref-formula {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  align-items: center;
  background: #fff;
  border-bottom: 1px solid #d1d5db;
}

.moba-ref-formula b,
.moba-ref-formula span {
  padding: 0.55rem 0.8rem;
}

.moba-ref-formula b {
  color: #6b7280;
  border-right: 1px solid #d1d5db;
  font-style: italic;
}

.moba-ref-excel section {
  min-height: 0;
  overflow: hidden;
  padding: 0.75rem;
}

.moba-ref-excel-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(7rem, 1fr));
  align-content: start;
  border-top: 1px solid #d1d5db;
  border-left: 1px solid #d1d5db;
  background: #fff;
}

.moba-ref-excel-grid b,
.moba-ref-excel-grid span {
  min-height: 2.15rem;
  display: flex;
  align-items: center;
  padding: 0 0.65rem;
  border-right: 1px solid #d1d5db;
  border-bottom: 1px solid #d1d5db;
  font-size: 0.85rem;
}

.moba-ref-excel-grid b {
  justify-content: center;
  color: #374151;
  background: #e5e7eb;
}

.moba-ref-excel-grid .is-calculating {
  color: #92400e;
  background: #fde68a;
  animation: mobaExcelCell 1s ease-in-out infinite;
}

.moba-ref-excel footer {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 0.55rem 1rem;
  color: #fff;
  background: #107c41;
}

.moba-ref-mail {
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  color: #1f2937;
  background: #f3f4f6;
}

.moba-ref-mail header {
  display: flex;
  justify-content: space-between;
  padding: 0.85rem 1rem;
  color: #fff;
  background: #2563eb;
}

.moba-ref-mail h1 {
  margin: 0;
  font-size: 1.15rem;
}

.moba-ref-mail section {
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr);
}

.moba-ref-mail aside {
  display: grid;
  align-content: start;
  gap: 0.7rem;
  padding: 1rem;
  background: #fff;
}

.moba-ref-mail article {
  padding: 2rem;
}

.moba-ref-mail ul {
  display: grid;
  gap: 0.5rem;
  margin: 1rem 0;
  padding: 0;
  list-style: none;
}

.moba-ref-log-stats,
.moba-ref-speed-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.8rem;
}

.moba-ref-log-stats span,
.moba-ref-speed-cards span,
.moba-ref-metric-row span {
  display: grid;
  gap: 0.25rem;
  padding: 0.8rem;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.08);
}

.moba-ref-log article p {
  margin: 0 0 0.5rem;
  color: #cbd5e1;
  font-family: Consolas, monospace;
}

.moba-ref-disk section {
  grid-template-columns: 15rem minmax(0, 1fr);
}

.moba-ref-disk aside {
  display: grid;
  align-content: start;
  gap: 0.7rem;
}

.moba-ref-disk-map {
  display: grid;
  grid-template-columns: 1.2fr 3fr 2fr;
  height: 5rem;
  overflow: hidden;
  margin: 1rem 0;
  border-radius: 0.5rem;
}

.moba-ref-disk-map i:nth-child(1) { background: #38bdf8; }
.moba-ref-disk-map i:nth-child(2) { background: #2563eb; }
.moba-ref-disk-map i:nth-child(3) { background: #64748b; }

.moba-ref-bsod {
  place-items: start;
  background: #2563eb;
  font-family: Consolas, "Courier New", monospace;
  text-align: left;
}

.moba-ref-bsod section {
  width: min(46rem, calc(100% - 4rem));
  margin: 9vh 0 0 8vw;
}

.moba-ref-bsod b {
  display: block;
  margin-bottom: 1.6rem;
  font-size: 6rem;
  font-weight: 400;
}

.moba-ref-bsod h1 {
  margin: 0 0 1.3rem;
  font-size: 1.5rem;
  line-height: 1.55;
  font-weight: 400;
}

.moba-ref-bsod strong {
  display: block;
  margin: 1.5rem 0 0.75rem;
  font-size: 1.25rem;
}

.moba-ref-bsod .moba-ref-progress {
  width: 16rem;
  background: #1d4ed8;
}

.moba-ref-bsod small,
.moba-ref-bsod footer {
  display: block;
  margin-top: 2rem;
  color: #dbeafe;
}

.moba-ref-crash {
  min-height: 100%;
  display: grid;
  place-items: center;
  color: #111827;
  background: #d1d5db;
}

.moba-ref-crash section {
  width: min(34rem, calc(100% - 2rem));
  padding: 1.3rem;
  border-radius: 0.45rem;
  background: #fff;
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.22);
}

.moba-ref-crash article {
  display: grid;
  gap: 0.4rem;
  margin: 1rem 0;
  padding: 1rem;
  background: #f3f4f6;
  font-size: 0.85rem;
}

.moba-ref-crash div {
  display: grid;
  gap: 0.5rem;
}

.moba-ref-crash button {
  padding: 0.55rem;
}

.moba-ref-backup {
  min-height: 100%;
  color: #052e16;
  background: #ecfdf5;
}

.moba-ref-backup header {
  display: flex;
  justify-content: space-between;
  padding: 1rem;
  color: #fff;
  background: #16a34a;
}

.moba-ref-backup section {
  width: min(40rem, calc(100% - 2rem));
  margin: 5rem auto;
}

.moba-ref-backup article {
  display: grid;
  gap: 0.7rem;
  padding: 1.5rem;
  border-radius: 0.7rem;
  background: #fff;
}

.moba-ref-remote {
  min-height: 100%;
  display: grid;
  place-items: center;
  color: #fff;
  background: #2563eb;
  text-align: center;
}

.moba-ref-remote section {
  display: grid;
  justify-items: center;
  gap: 1rem;
}

.moba-ref-remote article {
  display: grid;
  gap: 0.45rem;
  color: #dbeafe;
}

.moba-ref-speed {
  min-height: 100%;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  text-align: center;
}

.moba-ref-speed section {
  width: min(42rem, calc(100% - 2rem));
  display: grid;
  gap: 1.2rem;
}

.moba-ref-speedometer {
  width: 12rem;
  height: 12rem;
  display: grid;
  place-items: center;
  margin: 0 auto;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 0 0 0.8rem rgba(255, 255, 255, 0.18);
}

.moba-ref-speedometer b {
  font-size: 3.5rem;
}

.moba-ref-virus {
  min-height: 100%;
  display: grid;
  place-items: center;
  color: #fff;
  background: #991b1b;
  text-align: center;
}

.moba-ref-virus section {
  width: min(40rem, calc(100% - 2rem));
  display: grid;
  gap: 1rem;
}

.moba-ref-virus h1 {
  margin: 0;
  font-size: 3rem;
  animation: mobaPulse 0.75s infinite;
}

.moba-ref-virus strong {
  font-size: 1.8rem;
}

.moba-ref-virus ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.moba-ref-virus-desktop {
  position: relative;
  min-height: 100%;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(135deg, #0f766e, #1d4ed8);
}

.moba-ref-desktop-icons {
  display: grid;
  align-content: start;
  gap: 1rem;
  width: 9rem;
  padding: 1.5rem;
}

.moba-ref-desktop-icons span {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
}

.moba-ref-desktop-icons i {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 0.4rem;
  background: rgba(255, 255, 255, 0.85);
}

.moba-ref-virus-desktop article {
  position: absolute;
  top: 20%;
  left: 50%;
  width: min(32rem, 88vw);
  transform: translateX(-50%);
  display: grid;
  gap: 0.7rem;
  padding: 1.3rem;
  border-radius: 0.55rem;
  color: #111827;
  background: #fff;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
}

.moba-ref-virus-desktop article strong {
  color: #dc2626;
}

.moba-ref-virus-desktop footer {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  justify-content: space-between;
  padding: 0.65rem 1rem;
  background: rgba(15, 23, 42, 0.85);
}

.moba-ref-cad {
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  color: #d1d5db;
  background: #202327;
}

.moba-ref-cad header {
  display: flex;
  justify-content: space-between;
  padding: 0.8rem 1rem;
  background: #2f3338;
}

.moba-ref-cad h1 {
  margin: 0;
  font-size: 1.1rem;
}

.moba-ref-cad section {
  min-height: 0;
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
}

.moba-ref-cad aside {
  padding: 1rem;
  line-height: 2;
  background: #17191c;
}

.moba-ref-cad article {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}

.moba-ref-cad-grid {
  position: relative;
  overflow: hidden;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0 1px, transparent 1px 2.5rem),
    repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, transparent 1px 2.5rem);
}

.moba-ref-cad-grid i {
  position: absolute;
  border: 2px solid rgba(255, 255, 255, 0.62);
}

.moba-ref-cad-grid i:nth-child(1) { inset: 20% 22%; }
.moba-ref-cad-grid i:nth-child(2) { inset: 32% 36%; border-radius: 999px; }
.moba-ref-cad-grid i:nth-child(3) { top: 20%; left: 50%; height: 60%; border-style: dashed; border-right: 0; border-top: 0; border-bottom: 0; }
.moba-ref-cad-grid b { position: absolute; right: 1rem; bottom: 1rem; color: rgba(255,255,255,.35); font-size: 4rem; }

.moba-ref-cad footer {
  padding: 0.75rem 1rem;
  background: #111827;
}

.moba-ref-voice {
  min-height: 100%;
  color: #fff;
  background: #181029;
}

.moba-ref-voice header {
  display: flex;
  justify-content: space-between;
  padding: 1rem;
  background: #312e81;
}

.moba-ref-voice section {
  width: min(44rem, calc(100% - 2rem));
  display: grid;
  gap: 1.4rem;
  margin: 5rem auto;
}

.moba-ref-wave {
  height: 10rem;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 0.28rem;
}

.moba-ref-wave i {
  width: 0.5rem;
  height: var(--h);
  border-radius: 999px;
  background: #a78bfa;
  animation: mobaWave 1.1s ease-in-out infinite;
}

.moba-ref-voice article {
  padding: 1.25rem;
  border-radius: 0.7rem;
  background: rgba(255, 255, 255, 0.08);
}

.moba-ref-service {
  min-height: 100%;
  display: grid;
  place-items: center;
  color: #1e293b;
  background: linear-gradient(135deg, #eff6ff, #eef2ff);
  text-align: center;
}

.moba-ref-service section {
  width: min(34rem, calc(100% - 2rem));
  display: grid;
  gap: 1rem;
  padding: 1.5rem;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 18px 44px rgba(30, 64, 175, 0.16);
}

.moba-ref-queue {
  display: grid;
  gap: 0.2rem;
}

.moba-ref-queue b {
  color: #2563eb;
  font-size: 4rem;
}

.moba-ref-agent-list {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

.moba-ref-agent-list i {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: #bfdbfe;
}

@keyframes mobaSpin {
  to { transform: rotate(360deg); }
}

@keyframes mobaScrollLine {
  0%, 10% { opacity: 0.35; transform: translateY(0); }
  18%, 92% { opacity: 1; transform: translateY(-0.08rem); }
  100% { opacity: 0.55; transform: translateY(-0.16rem); }
}

@keyframes mobaExcelCell {
  0%, 100% { background: #fde68a; }
  50% { background: #fbbf24; }
}

@keyframes mobaWave {
  0%, 100% { transform: scaleY(0.48); opacity: 0.55; }
  50% { transform: scaleY(1); opacity: 1; }
}

@media (max-width: 720px) {
  .moba-ref-vscode-body,
  .moba-ref-mail section,
  .moba-ref-disk section,
  .moba-ref-cad section {
    grid-template-columns: 1fr;
  }

  .moba-ref-vscode aside,
  .moba-ref-mail aside,
  .moba-ref-disk aside,
  .moba-ref-cad aside {
    display: none;
  }

  .moba-ref-log-stats,
  .moba-ref-speed-cards,
  .moba-ref-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* 20260731: source-level moba runtime + transparent lock */
.moba-lock-layer {
  background: rgba(255, 255, 255, 0.035) !important;
  backdrop-filter: blur(7px) saturate(118%) !important;
  -webkit-backdrop-filter: blur(7px) saturate(118%) !important;
}
.moba-unlock-card {
  color: rgba(255,255,255,.95) !important;
  background: rgba(12, 18, 28, 0.36) !important;
  backdrop-filter: blur(22px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(130%) !important;
  box-shadow: 0 20px 70px rgba(0,0,0,.22), inset 0 1px 1px rgba(255,255,255,.2) !important;
}
.moba-unlock-card input { background: rgba(0,0,0,.28) !important; }
.moba-ref-terminal section p:nth-last-child(1) { animation-delay: 0s; }
.moba-ref-terminal section p:nth-last-child(2) { animation-delay: .08s; }
.moba-ref-terminal section p:nth-last-child(3) { animation-delay: .16s; }
.moba-ref-meeting h1::after { content: ""; }
.moba-ref-progress i { transition: width .9s ease; }
.moba-ref-bsod .moba-ref-progress i,
.moba-ref-windows .moba-ref-progress i,
.moba-ref-reinstall .moba-ref-progress i { box-shadow: 0 0 18px rgba(255,255,255,.38); }
.moba-ref-antivirus aside p,
.moba-ref-log article p,
.moba-ref-terminal section p { will-change: transform, opacity; }
.moba-ref-excel-grid .is-calculating { position: relative; }
.moba-ref-excel-grid .is-calculating::after {
  content: "";
  position: absolute;
  inset: 2px;
  border: 2px solid #107c41;
  pointer-events: none;
  animation: mobaExcelBorder 1s ease-in-out infinite;
}
.moba-ref-wave i:nth-child(2n) { animation-delay: .12s; }
.moba-ref-wave i:nth-child(3n) { animation-delay: .24s; }
.moba-ref-wave i:nth-child(4n) { animation-delay: .36s; }
.moba-ref-agent-list i { animation: mobaPulse 1.1s ease-in-out infinite; }
.moba-ref-agent-list i:nth-child(2) { animation-delay: .12s; }
.moba-ref-agent-list i:nth-child(3) { animation-delay: .24s; }
.moba-ref-agent-list i:nth-child(4) { animation-delay: .36s; }
@keyframes mobaExcelBorder { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
/* 20260731: compact instructions and an isolated unlock view */
.moba-instructions {
  gap: 0.46rem;
  padding: 0.62rem 0.9rem 0.68rem;
  min-height: 0;
}
.moba-instruction-corner { display: none; }
.moba-instructions ol { gap: 0.46rem 0.8rem; }
.moba-instructions li { font-size: 0.74rem; line-height: 1.38; }
body.moba-scene-locked .global-nav,
body.moba-scene-locked .home-right-panel,
body.moba-scene-locked .home-bottom-panel,
body.moba-scene-locked .site-brand { display: none !important; }
body.moba-scene-locked .moba-page > :not(.moba-simulator) { visibility: hidden; }

/* 20260731: isolate every moba scene from site chrome */
body.moba-scene-active .global-nav,
body.moba-scene-active .site-brand,
body.moba-scene-active .home-right-panel,
body.moba-scene-active .home-bottom-panel,
body.moba-scene-active .global-footer,
body.moba-scene-active .top-login-button {
  display: none !important;
}

body.moba-scene-active .moba-page > :not(.moba-simulator) {
  visibility: hidden !important;
}

body.moba-scene-active .moba-simulator {
  z-index: 9999 !important;
}

/* 20260731: Rosemary Maidcafe in-site simulation */
.rosemary-layout {
  width: min(780px, 100%);
  display: grid;
  gap: 0.9rem;
}
.rosemary-hero {
  min-height: 9rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem;
  border-radius: 1rem;
  color: hsl(var(--foreground));
  background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.06)), linear-gradient(135deg, rgba(254,205,211,.22), rgba(249,168,212,.12));
  box-shadow: inset 0 1px 1px rgba(255,255,255,.16);
}
.rosemary-hero span,
.rosemary-hero p,
.rosemary-counter small,
.rosemary-log span {
  color: hsl(var(--foreground) / .62);
}
.rosemary-hero h4 {
  margin: 0.15rem 0;
  font-size: 1.8rem;
  font-weight: 600;
}
.rosemary-hero p { margin: 0; font-size: .84rem; }
.rosemary-hero strong { font-size: 2rem; font-weight: 600; }
.rosemary-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .55rem;
}
.rosemary-stats span,
.rosemary-counter article,
.rosemary-log {
  border-radius: .85rem;
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.12);
}
.rosemary-stats span {
  min-height: 3.5rem;
  display: grid;
  place-items: center;
  gap: .18rem;
  color: hsl(var(--foreground) / .62);
  font-size: .74rem;
}
.rosemary-stats b { color: hsl(var(--foreground)); font-size: 1.05rem; }
.rosemary-counter {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .65rem;
}
.rosemary-counter article {
  min-height: 7.2rem;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: .35rem;
  padding: .85rem;
}
.rosemary-counter strong { color: hsl(var(--foreground)); font-size: 2rem; }
.rosemary-counter button,
.rosemary-actions button {
  min-height: 2.2rem;
  border: 0;
  border-radius: 999px;
  color: hsl(var(--background));
  background: hsl(var(--foreground) / .88);
  cursor: pointer;
  font: inherit;
  font-size: .76rem;
  transition: transform .18s ease, background .18s ease;
}
.rosemary-counter button:hover,
.rosemary-actions button:hover { transform: translateY(-1px); background: hsl(var(--foreground)); }
.rosemary-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .6rem;
}
.rosemary-log {
  min-height: 4.4rem;
  display: grid;
  gap: .3rem;
  padding: .75rem .9rem;
  font-size: .74rem;
}
@media (max-width: 720px) {
  .rosemary-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rosemary-counter,
  .rosemary-actions { grid-template-columns: 1fr; }
  .rosemary-hero { align-items: flex-start; flex-direction: column; }
}

/* 20260803: centered footer and drift bottle */
.global-footer {
  left: 50% !important;
  right: auto !important;
  bottom: 2rem;
  transform: translateX(-50%);
  justify-content: center;
}
.drift-bottle-dock {
  position: fixed;
  left: 3.2rem;
  bottom: 1.65rem;
  z-index: 26;
  width: 6.1rem;
  height: 7.2rem;
  display: grid;
  justify-items: center;
  align-content: end;
  gap: .2rem;
  border: 0;
  color: hsl(var(--foreground));
  background: transparent;
  cursor: pointer;
  transform: translateY(1.15rem);
  transition: transform .32s ease, filter .32s ease;
}
.drift-bottle-dock:hover { transform: translateY(-.45rem); filter: drop-shadow(0 16px 26px rgba(0,0,0,.22)); }
.drift-bottle-water { position: absolute; left: .25rem; right: .25rem; bottom: .25rem; height: 2.15rem; border-radius: 999px 999px .8rem .8rem; background: rgba(255,255,255,.08); box-shadow: inset 0 1px 1px rgba(255,255,255,.16); backdrop-filter: blur(10px); }
.drift-bottle-art { position: relative; width: 3.65rem; height: 5.4rem; display: block; border-radius: 1.7rem 1.7rem 1.1rem 1.1rem; background: linear-gradient(135deg, rgba(255,255,255,.42), rgba(255,255,255,.08)); box-shadow: inset 0 1px 1px rgba(255,255,255,.36), 0 12px 30px rgba(0,0,0,.18); transform: rotate(-13deg); overflow: hidden; }
.drift-bottle-art::before { position: absolute; left: 1.2rem; top: -.4rem; width: 1.25rem; height: 1.35rem; border-radius: .32rem; background: rgba(255,255,255,.36); content: ""; }
.drift-bottle-art i { position: absolute; left: .85rem; right: .75rem; bottom: 1.2rem; height: 1.55rem; border-radius: .35rem; background: rgba(255,255,255,.62); transform: rotate(8deg); }
.drift-bottle-art b { position: absolute; left: .4rem; right: .35rem; bottom: .2rem; height: 1.45rem; background: rgba(255,255,255,.16); }
.drift-bottle-dock strong { position: relative; padding: .2rem .6rem; border-radius: 999px; color: hsl(var(--foreground) / .78); background: rgba(255,255,255,.08); font-size: .72rem; font-weight: 500; backdrop-filter: blur(10px); }
.drift-modal-window { width: min(700px, 100%); }
.drift-modal-card, .drift-compose { display: grid; gap: 1rem; }
.drift-stats { display: flex; justify-content: center; gap: .55rem; flex-wrap: wrap; }
.drift-stats span { padding: .35rem .65rem; border-radius: 999px; color: hsl(var(--foreground) / .62); background: rgba(255,255,255,.08); font-size: .72rem; }
.drift-stats b { color: hsl(var(--foreground)); }
.drift-paper, .drift-empty-sea { min-height: 12rem; display: grid; align-content: center; gap: .75rem; padding: 1.25rem; border-radius: 1.25rem; color: hsl(var(--foreground)); background: rgba(255,255,255,.08); box-shadow: inset 0 1px 1px rgba(255,255,255,.14); }
.drift-paper span, .drift-paper small, .drift-empty-sea p, .drift-status { color: hsl(var(--foreground) / .58); font-size: .78rem; }
.drift-paper p { margin: 0; font-size: 1.08rem; line-height: 1.8; }
.drift-empty-sea strong { font-size: 1.35rem; font-weight: 500; }
.drift-actions { display: flex; justify-content: flex-end; gap: .65rem; flex-wrap: wrap; }
.drift-compose label { display: grid; gap: .35rem; color: hsl(var(--foreground) / .72); font-size: .78rem; }
.drift-compose input, .drift-compose textarea, .drift-compose select { width: 100%; border: 0; outline: 0; border-radius: .85rem; color: hsl(var(--foreground)); background: rgba(255,255,255,.08); font: inherit; }
.drift-compose input { min-height: 2.55rem; padding: 0 .85rem; }
.drift-compose select { min-height: 2.55rem; padding: 0 .85rem; appearance: none; }
.drift-compose textarea { min-height: 8.5rem; padding: .75rem .85rem; resize: vertical; }
@media (max-width: 760px) { .global-footer { bottom: 1rem; } .drift-bottle-dock { left: 1rem; bottom: 5.2rem; transform: translateY(.8rem) scale(.9); } }
body.moba-scene-active .drift-bottle-dock, body.moba-scene-locked .drift-bottle-dock { display: none !important; }

/* 20260803: real drift bottle asset */
.drift-bottle-dock {
  width: 7.4rem;
  height: 7.8rem;
  padding: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.drift-bottle-image {
  position: relative;
  z-index: 1;
  width: 6.8rem;
  height: auto;
  display: block;
  object-fit: contain;
  transform: rotate(-8deg);
  filter: drop-shadow(0 14px 24px rgba(0,0,0,.22));
  transition: transform .32s ease, filter .32s ease;
}
.drift-bottle-dock:hover .drift-bottle-image {
  transform: translateY(-.35rem) rotate(-4deg) scale(1.05);
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.28));
}
.drift-bottle-dock strong {
  display: none !important;
}
.drift-bottle-dock .drift-bottle-art,
.drift-bottle-dock .drift-bottle-art::before,
.drift-bottle-dock .drift-bottle-art i,
.drift-bottle-dock .drift-bottle-art b {
  display: none !important;
}
.drift-bottle-water {
  display: none !important;
}
.drift-mine-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem;
}
.drift-mine-grid > div {
  min-width: 0;
  display: grid;
  gap: .55rem;
}
.drift-mine-grid h4 {
  margin: 0;
  color: hsl(var(--foreground) / .82);
  font-size: .82rem;
  font-weight: 500;
}
.drift-list-item, .drift-reply-card {
  padding: .75rem .85rem;
  border-radius: .85rem;
  background: rgba(255,255,255,.07);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.1);
}
.drift-list-item p, .drift-reply-card p {
  margin: 0;
  color: hsl(var(--foreground) / .82);
  line-height: 1.65;
  font-size: .8rem;
  word-break: break-word;
}
.drift-meta {
  display: flex;
  gap: .45rem;
  flex-wrap: wrap;
  margin-top: .5rem;
  color: hsl(var(--foreground) / .46);
  font-size: .68rem;
}
.drift-list-item blockquote {
  margin: .55rem 0 0;
  padding-left: .55rem;
  border-left: 2px solid rgba(255,255,255,.25);
  color: hsl(var(--foreground) / .62);
  font-size: .75rem;
}
.drift-reply-form {
  display: grid;
  gap: .55rem;
}
.drift-reply-form textarea {
  width: 100%;
  min-height: 4.4rem;
  resize: vertical;
  padding: .7rem .8rem;
  border: 0;
  outline: 0;
  border-radius: .8rem;
  color: hsl(var(--foreground));
  background: rgba(255,255,255,.07);
  font: inherit;
}
.drift-empty-sea.compact {
  min-height: 4.5rem;
  padding: .9rem;
}
@media (max-width: 680px) {
  .drift-mine-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .drift-bottle-dock { width: 6.25rem; height: 6.7rem; }
  .drift-bottle-image { width: 5.7rem; }
}

/* 20260803: reward and drift polish */
.reward-clone-view .global-nav .nav-stack {
  width: min(920px, calc(100% - 18rem));
  max-width: 920px;
  flex-wrap: nowrap;
  justify-content: center;
  overflow: visible;
}
.reward-clone-view .global-nav .nav-button {
  flex: 0 0 auto;
  white-space: nowrap;
}
.reward-head-actions {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  flex: 0 0 auto;
}
.reward-page-close-button {
  width: 2.55rem;
  height: 2.55rem;
  display: inline-grid;
  place-items: center;
  border: none;
  border-radius: 999px;
  color: hsl(var(--foreground));
  background: rgba(255,255,255,.1);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.1);
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  transition: transform 180ms ease, background 180ms ease;
}
.reward-page-close-button:hover {
  transform: scale(1.04);
  background: rgba(255,255,255,.16);
}
.reward-clone-panel {
  isolation: isolate;
}
.reward-clone-panel::before {
  z-index: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,.16) 22%, transparent 44%, transparent 100%);
}
.reward-clone-panel > * {
  position: relative;
  z-index: 1;
}
.drift-bottle-dock {
  left: 2.35rem;
  bottom: -4.65rem;
  width: 15rem;
  height: 15rem;
  transform: rotate(45deg);
  transform-origin: 50% 66%;
  transition: transform .32s ease, filter .32s ease;
}
.drift-bottle-dock:hover {
  transform: translateY(-2.8rem) rotate(45deg);
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.28));
}
.drift-bottle-image {
  width: 13.6rem;
  transform: rotate(0deg);
}
.drift-bottle-dock:hover .drift-bottle-image {
  transform: scale(1.03);
}
.drift-modal-window {
  width: min(820px, 100%);
}
.drift-home-frame {
  display: grid;
  gap: .85rem;
}
.drift-welcome-box,
.drift-recent-box,
.drift-action-card {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  background: rgba(255,255,255,.075);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.12), 0 10px 26px rgba(0,0,0,.08);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.drift-welcome-box {
  min-height: 4.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .85rem 1rem;
}
.drift-welcome-box strong,
.drift-action-card strong,
.drift-recent-box h4 {
  color: hsl(var(--foreground));
  font-weight: 500;
}
.drift-welcome-box span,
.drift-action-card span,
.drift-recent-empty,
.drift-recent-item small {
  color: hsl(var(--foreground) / .58);
  font-size: .75rem;
}
.drift-action-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
}
.drift-action-card {
  min-height: 8.2rem;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: .42rem;
  padding: 1rem .75rem;
  border: none;
  color: inherit;
  cursor: pointer;
  text-align: center;
  transition: transform 180ms ease, background 180ms ease;
}
.drift-action-card:hover {
  transform: translateY(-.35rem);
  background: rgba(255,255,255,.11);
}
.drift-action-card b {
  font-size: 2rem;
  line-height: 1;
}
.drift-recent-box {
  display: grid;
  gap: .55rem;
  padding: .9rem 1rem;
}
.drift-recent-box h4 {
  margin: 0;
  font-size: .86rem;
}
.drift-recent-item {
  display: grid;
  grid-template-columns: 1.8rem minmax(0, 1fr);
  gap: .55rem;
  align-items: start;
  padding: .55rem 0;
}
.drift-recent-item + .drift-recent-item {
  border-top: 1px solid hsl(var(--foreground) / .1);
}
.drift-recent-item p {
  margin: 0 0 .18rem;
  overflow: hidden;
  color: hsl(var(--foreground) / .78);
  font-size: .78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.drift-recent-empty {
  margin: 0;
}
@media (max-width: 760px) {
  .reward-clone-view .global-nav .nav-stack { width: 100%; overflow-x: auto; justify-content: flex-start; }
  .drift-bottle-dock { left: .35rem; bottom: -3.45rem; width: 11rem; height: 11rem; }
  .drift-bottle-dock:hover { transform: translateY(-2rem) rotate(45deg); }
  .drift-bottle-image { width: 10rem; }
  .drift-action-cards { grid-template-columns: 1fr; }
  .drift-welcome-box { align-items: flex-start; flex-direction: column; }
}

.acknowledgements-modal-window {
  width: min(960px, 100%);
}
.acknowledgements-panel {
  display: grid;
  gap: 1rem;
}
.acknowledgements-panel > p,
.acknowledgements-status,
.acknowledgements-empty {
  margin: 0;
  color: hsl(var(--foreground) / .66);
  text-align: center;
}
.acknowledgements-cinema {
  grid-template-columns: 35% 65%;
  min-height: 31.25rem;
  overflow: hidden;
  border-radius: 1rem;
  background: rgba(0,0,0,.18);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.12), 0 16px 38px rgba(0,0,0,.1);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.poster-box {
  position: relative;
  display: flex;
  min-height: 31.25rem;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
}
.poster-box img {
  position: absolute;
  max-width: calc(100% - 2rem);
  max-height: 85%;
  opacity: 0;
  border-radius: .45rem;
  object-fit: cover;
  box-shadow: 0 18px 42px rgba(0,0,0,.18);
  transition: opacity 1s ease;
}
.poster-box img.active {
  opacity: 1;
}
.credits-wrap {
  position: relative;
  min-height: 31.25rem;
  overflow: hidden;
}
.scroll-text {
  position: absolute;
  width: 80%;
  left: 10%;
  bottom: -100%;
  color: #fff;
  font-family: "Microsoft Yahei", "Microsoft YaHei", Arial, sans-serif;
  line-height: 2.2;
  text-align: center;
  animation: acknowledgementScrollUp 50s linear infinite;
}
.scroll-text .title {
  margin-bottom: 2.5rem;
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
}
.scroll-text .item-title {
  margin: 1.9rem 0 .5rem;
  color: #ffd799;
  font-size: 1.38rem;
}
.scroll-text .person {
  color: rgba(255,255,255,.92);
  font-size: 1.13rem;
}
@keyframes acknowledgementScrollUp {
  from { transform: translateY(0); }
  to { transform: translateY(-220%); }
}
.acknowledgements-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
}
.acknowledgement-card {
  display: grid;
  min-height: 8.5rem;
  place-items: center;
  align-content: center;
  gap: .65rem;
  padding: 1rem .75rem;
  border-radius: 1rem;
  background: rgba(255,255,255,.075);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.14), 0 12px 28px rgba(0,0,0,.08);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.acknowledgement-avatar {
  width: 3.4rem;
  height: 3.4rem;
  overflow: hidden;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
}
.acknowledgement-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.acknowledgement-avatar span {
  font-size: 1.25rem;
  color: hsl(var(--foreground) / .82);
}
.acknowledgement-card strong {
  max-width: 100%;
  overflow: hidden;
  color: hsl(var(--foreground) / .86);
  font-size: .84rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 620px) {
  .acknowledgements-cinema { grid-template-columns: 1fr; min-height: auto; }
  .poster-box { min-height: 16rem; padding: 1.25rem; }
  .credits-wrap { min-height: 22rem; }
  .scroll-text .title { font-size: 1.55rem; }
  .scroll-text .item-title { font-size: 1.1rem; }
  .scroll-text .person { font-size: .95rem; }
  .acknowledgements-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 20260803: drift action buttons match hot source tabs */
.drift-modal-card > .drift-actions,
.drift-compose > .drift-actions {
  justify-content: center;
  gap: 0.5rem;
  padding: 0.55rem;
  border-radius: 1.1rem;
  background: rgba(211, 235, 238, 0.14);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.12),
    0 10px 24px rgba(0, 0, 0, 0.06);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.drift-modal-card > .drift-actions .glass-button,
.drift-modal-card > .drift-actions .primary-action,
.drift-compose > .drift-actions .glass-button,
.drift-compose > .drift-actions .primary-action {
  min-height: 2.35rem;
  flex: 1 1 9rem;
  padding: 0 0.95rem;
  border: none;
  border-radius: 0.9rem;
  color: hsl(var(--foreground) / 0.82);
  background: rgba(255, 255, 255, 0.01);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
  font-size: 0.78rem;
  font-weight: 500;
  transition: transform 180ms ease, background 180ms ease, color 180ms ease;
}

.drift-modal-card > .drift-actions .primary-action,
.drift-compose > .drift-actions .primary-action,
.drift-modal-card > .drift-actions .glass-button:hover,
.drift-modal-card > .drift-actions .primary-action:hover,
.drift-compose > .drift-actions .glass-button:hover,
.drift-compose > .drift-actions .primary-action:hover {
  color: hsl(var(--foreground));
  background: rgba(255, 255, 255, 0.09);
}

.drift-modal-card > .drift-actions .glass-button:hover,
.drift-modal-card > .drift-actions .primary-action:hover,
.drift-compose > .drift-actions .glass-button:hover,
.drift-compose > .drift-actions .primary-action:hover {
  transform: translateY(-0.08rem);
}

@media (max-width: 680px) {
  .drift-modal-card > .drift-actions,
  .drift-compose > .drift-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .drift-modal-card > .drift-actions .glass-button,
  .drift-modal-card > .drift-actions .primary-action,
  .drift-compose > .drift-actions .glass-button,
  .drift-compose > .drift-actions .primary-action {
    flex-basis: auto;
    width: 100%;
  }
}


/* 20260804 FC catalog: in-page categories and cover cards */
.game-page-fc {
  gap: 0.8rem;
  padding-bottom: 2rem;
}

.fc-game-tabs {
  overflow-x: auto;
  flex-wrap: nowrap;
  scrollbar-width: none;
}

.fc-game-tabs::-webkit-scrollbar {
  display: none;
}

.fc-game-tabs button {
  flex: 0 0 auto;
}

.game-grid-fc {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-height: none;
  overflow: visible;
  padding-right: 0;
  scrollbar-width: none;
}

.game-grid-fc::-webkit-scrollbar {
  display: none;
}

.game-card-fc {
  min-height: 17.4rem;
  grid-template-rows: 8.8rem minmax(0, 1fr);
  overflow: hidden;
}

.game-card-fc .game-cover {
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
}

.game-card-fc .game-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.game-card-fc .game-card-body {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(2.55rem, auto) auto;
  align-content: stretch;
  gap: 0.48rem;
  padding: 0.88rem 0.82rem 0.95rem;
}

.game-card-fc .game-card-body h3,
.game-card-fc .game-card-body p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
}

.game-card-fc .game-card-body h3 {
  -webkit-line-clamp: 1;
}

.game-card-fc .game-card-body p {
  min-height: 2.4em;
  -webkit-line-clamp: 2;
}

.game-card-fc .game-play-button {
  align-self: end;
  width: 100%;
  margin-top: 0.18rem;
}

@media (max-width: 1180px) {
  .game-grid-fc {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .game-grid-fc {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .tools-grid {
    grid-template-columns: 1fr;
  }

  .tools-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .tools-hero {
    grid-template-columns: 1fr;
  }

  .tools-tabs {
    justify-content: flex-start;
  }

  .tools-side {
    grid-template-columns: 1fr;
  }
}

/* 20260810 reader disguise logo cards */
.reader-disguise-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
  margin-top: 0.9rem;
}
.reader-disguise-card {
  min-height: 11.2rem;
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: start;
  gap: 0.55rem;
  overflow: hidden;
}
.reader-logo-wrap {
  width: 4.25rem;
  height: 4.25rem;
  display: grid;
  place-items: center;
  border-radius: 1.1rem;
  background: color-mix(in srgb, var(--reader-accent) 24%, rgba(255,255,255,.08));
  box-shadow: inset 0 1px 1px rgba(255,255,255,.16), 0 16px 34px color-mix(in srgb, var(--reader-accent) 24%, rgba(0,0,0,.1));
}
.reader-logo-wrap svg {
  width: 2.85rem;
  height: 2.85rem;
  display: block;
}
.reader-card-copy {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}
.reader-card-copy strong {
  color: hsl(var(--foreground) / .92);
  font-size: 1rem;
  font-weight: 600;
}
.reader-card-copy p {
  min-height: 2.9rem;
  margin: 0;
  color: hsl(var(--foreground) / .64);
  font-size: 0.78rem;
  line-height: 1.55;
}
.reader-open-action {
  width: 100%;
  justify-content: center;
}
@media (max-width: 980px) {
  .reader-disguise-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .reader-disguise-grid { grid-template-columns: 1fr; }
  .reader-disguise-card { min-height: 10.8rem; }
}

.reader-disguise-card .result-action { margin-top: 0.15rem; }
.reader-open-action { min-height: 2.15rem; }


/* 20260818 about friend links */
.about-links-card {
  grid-column: 1 / -1;
  min-height: auto;
  display: grid;
  grid-template-rows: auto auto;
  gap: 0.9rem;
}
.about-links-head {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}
.about-friend-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.about-friend-item {
  min-height: 4.6rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.78rem 0.85rem;
  border-radius: 1.15rem;
  text-decoration: none;
  color: hsl(var(--foreground) / .9);
  background: rgba(255,255,255,.075);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.14), 0 16px 36px rgba(0,0,0,.12);
  backdrop-filter: blur(22px);
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.about-friend-item:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,.11);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.2), 0 20px 42px rgba(0,0,0,.16);
}
.about-friend-icon {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 0.95rem;
  background: rgba(255,255,255,.12);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.18);
}
.about-friend-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.about-friend-initial {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: linear-gradient(135deg, rgba(255,184,120,.85), rgba(255,140,105,.75));
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}
.about-friend-copy {
  display: grid;
  gap: 0.22rem;
  min-width: 0;
}
.about-friend-copy strong {
  color: hsl(var(--foreground) / .92);
  font-size: 0.95rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.about-friend-copy small {
  color: hsl(var(--foreground) / .58);
  font-size: 0.74rem;
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.about-friend-arrow {
  padding: 0.42rem 0.62rem;
  border-radius: 999px;
  color: hsl(var(--foreground) / .82);
  font-size: 0.72rem;
  background: rgba(255,255,255,.105);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.14);
}
@media (max-width: 760px) {
  .about-friend-list { grid-template-columns: 1fr; }
  .about-links-head { grid-template-columns: 1fr; }
}




.global-nav .site-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-left: 2.4rem;
}

.site-brand-logo {
  width: 1.65rem;
  height: 1.65rem;
  display: block;
  object-fit: contain;
}

.home-hero-center > h1 {
  margin-top: 0.35rem;
}

.global-nav .site-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-left: 2.4rem;
}

.site-brand-logo {
  width: 1.65rem;
  height: 1.65rem;
  display: block;
  object-fit: contain;
}

.home-hero-center > h1 {
  margin-top: 0.35rem;
}

.global-nav .site-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-left: 2.4rem;
}

.site-brand-logo {
  width: 1.65rem;
  height: 1.65rem;
  display: block;
  object-fit: contain;
}

.home-hero-center > h1 {
  margin-top: 0.35rem;
}