/* Avocado Hub 品牌皮 —— 排在 c-end.css 之后,覆盖生效。C 端组件类统一前缀 hub- */
:root {
  --hub-peel: #2F4B26;
  --hub-green: #6A994E;
  --hub-flesh: #A7C957;
  --hub-cream: #FAF7F0;
  --hub-ink: #1F2937;
  --hub-muted: #6B7280;
  --hub-line: #E7E3D8;
  --hub-grad: linear-gradient(135deg, #6A994E, #A7C957);
  --hub-shadow: 0 8px 24px rgba(47, 75, 38, .08);
  --hub-shadow-lift: 0 14px 32px rgba(47, 75, 38, .14);
  --hub-r-card: 20px;
  --hub-r-btn: 12px;
}

body { background: var(--hub-cream); color: var(--hub-ink); }

/* ===== 顶栏 ===== */
.hub-topbar {
  display: flex; align-items: center; gap: 18px;
  padding: 12px 26px; background: #fff;
  border-bottom: 1px solid var(--hub-line);
  position: sticky; top: 0; z-index: 10;
}
.hub-logo { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 17px; color: var(--hub-peel); text-decoration: none; letter-spacing: .2px; }
.hub-logo .hub-logo-mark { font-size: 22px; line-height: 1; }
.hub-nav { display: flex; gap: 4px; margin-left: 10px; }
.hub-nav a { padding: 7px 14px; border-radius: 10px; font-size: 14px; color: var(--hub-muted); text-decoration: none; font-weight: 500; }
.hub-nav a:hover { background: #F3F0E7; color: var(--hub-peel); }
.hub-nav a.is-active { background: #EFF4E8; color: var(--hub-peel); font-weight: 700; }
.hub-topbar-spacer { flex: 1; }
.hub-balance-pill {
  display: flex; align-items: center; gap: 6px; padding: 6px 14px;
  border-radius: 999px; background: #EFF4E8; color: var(--hub-peel);
  font-size: 13px; text-decoration: none; border: 1px solid #DDE8CF;
}
.hub-balance-pill b { font-size: 14.5px; font-weight: 800; }
.hub-balance-pill:hover { border-color: var(--hub-green); }
.hub-avatar-btn { display: flex; align-items: center; gap: 8px; border: none; background: none; cursor: pointer; padding: 4px 6px; border-radius: 10px; font-size: 13.5px; color: var(--hub-ink); }
.hub-avatar-btn:hover { background: #F3F0E7; }
.hub-avatar-img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.hub-menu {
  position: absolute; right: 0; top: 112%; min-width: 150px; padding: 6px;
  background: #fff; border: 1px solid var(--hub-line); border-radius: 14px;
  box-shadow: var(--hub-shadow-lift); z-index: 20;
}
.hub-menu a { display: block; padding: 9px 13px; border-radius: 9px; font-size: 13.5px; color: var(--hub-ink); text-decoration: none; }
.hub-menu a:hover { background: #F6F4EC; }
.hub-menu a.is-danger { color: #DC2626; }

.hub-main { flex: 1; width: 100%; max-width: 1060px; margin: 0 auto; padding: 30px 24px 60px; }
.hub-page-title { font-size: 24px; font-weight: 800; color: var(--hub-peel); margin: 0 0 4px; }
.hub-page-sub { color: var(--hub-muted); font-size: 14px; margin: 0 0 24px; }

/* ===== 登录页 ===== */
.hub-login { min-height: 100vh; display: flex; }
.hub-login-hero {
  flex: 1.15; background: linear-gradient(165deg, #F2F6E9 0%, #FAF7F0 70%);
  color: var(--hub-peel);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 44px 52px; position: relative; overflow: hidden;
}
.hub-login-hero::after {
  content: ''; position: absolute; right: -120px; bottom: -140px;
  width: 420px; height: 420px; border-radius: 50%;
  background: rgba(106, 153, 78, .07);
}
.hub-hero-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; color: var(--hub-peel); }
.hub-hero-mid { max-width: 460px; }
.hub-hero-eyebrow { font-size: 12.5px; color: var(--hub-green); letter-spacing: 2px; font-weight: 700; margin-bottom: 14px; }
.hub-hero-h1 { font-size: 44px; line-height: 1.22; font-weight: 800; margin: 0 0 14px; color: var(--hub-peel); }
.hub-hero-sub { font-size: 15.5px; color: #56624B; line-height: 1.8; margin: 0 0 26px; }
.hub-hero-feats { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; font-size: 14px; }
.hub-hero-feats li { display: flex; align-items: center; gap: 9px; color: #3F4A36; }
.hub-hero-feats li svg { color: var(--hub-green); flex-shrink: 0; }
.hub-hero-foot { font-size: 12px; color: #8A9280; line-height: 1.8; }
.hub-hero-foot a { color: inherit; }
.hub-login-panel { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 28px; background: var(--hub-cream); }
.hub-login-card {
  width: min(400px, 100%); background: #fff; border-radius: var(--hub-r-card);
  box-shadow: var(--hub-shadow); padding: 40px 36px; text-align: center;
}
.hub-login-card .hub-login-mark { display: inline-flex; line-height: 1; }
.hub-login-card h2 { font-size: 22px; font-weight: 800; color: var(--hub-peel); margin: 14px 0 6px; }
.hub-login-card .hub-login-desc { color: var(--hub-muted); font-size: 13.5px; line-height: 1.8; margin: 0 0 26px; }
.hub-btn-wechat {
  width: 100%; height: 48px; border: none; border-radius: var(--hub-r-btn);
  background: #07C160; color: #fff; font-size: 15px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.hub-btn-wechat:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(7, 193, 96, .28); }
.hub-btn-wechat:disabled { background: #C9CFC4; cursor: not-allowed; transform: none; box-shadow: none; }
.hub-login-err { background: #FEF2F2; color: #B91C1C; border: 1px solid #FECACA; border-radius: 10px; padding: 9px 12px; font-size: 13px; margin-bottom: 14px; }
.hub-login-hint { color: var(--hub-muted); font-size: 12px; margin-top: 10px; }
.hub-login-terms { color: #9CA3AF; font-size: 12px; margin-top: 26px; }
.hub-login-terms a { color: var(--hub-green); text-decoration: none; }
.hub-login-tabs { display: flex; gap: 4px; background: #F1EDE2; border-radius: 12px; padding: 4px; margin-bottom: 16px; }
.hub-login-tab { flex: 1; height: 34px; border: none; border-radius: 9px; background: transparent; color: var(--hub-muted); font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s; }
.hub-login-tab.on { background: #fff; color: var(--hub-peel); box-shadow: 0 1px 4px rgba(47, 75, 38, .12); }
.hub-login-form { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.hub-login-submit { width: 100%; height: 46px; font-size: 15px; }

/* ===== 门户 ===== */
.hub-apps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.hub-app-card {
  background: #fff; border: 1px solid var(--hub-line); border-radius: var(--hub-r-card);
  padding: 22px; display: flex; flex-direction: column; gap: 12px;
  box-shadow: var(--hub-shadow); transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.hub-app-card:hover { transform: translateY(-3px); box-shadow: var(--hub-shadow-lift); border-color: var(--hub-flesh); }
.hub-app-icon {
  width: 56px; height: 56px; border-radius: 16px; background: #EFF4E8;
  display: flex; align-items: center; justify-content: center; font-size: 28px;
}
.hub-app-name { font-weight: 800; font-size: 16px; color: var(--hub-peel); }
.hub-app-desc { color: var(--hub-muted); font-size: 13px; line-height: 1.7; flex: 1; }
.hub-btn-primary {
  display: block; text-align: center; padding: 10px 0; border: none; cursor: pointer;
  border-radius: var(--hub-r-btn); background: var(--hub-green); color: #fff;
  font-size: 14px; font-weight: 700; text-decoration: none; width: 100%;
  transition: background .12s ease, transform .12s ease;
}
.hub-btn-primary:hover { background: #5A8140; transform: translateY(-1px); }
.hub-btn-primary:disabled { background: #C9CFC4; cursor: not-allowed; transform: none; }
.hub-empty { text-align: center; color: var(--hub-muted); padding: 70px 0; font-size: 14px; }
.hub-empty .hub-empty-mark { font-size: 44px; display: block; margin-bottom: 12px; }

/* ===== 钱包 ===== */
.hub-balance-hero {
  background: linear-gradient(120deg, #FFFFFF 55%, #F2F6E9);
  border: 1px solid var(--hub-line); border-radius: var(--hub-r-card);
  padding: 28px 30px; display: flex; align-items: flex-end; justify-content: space-between;
  box-shadow: var(--hub-shadow); margin-bottom: 26px; flex-wrap: wrap; gap: 12px;
}
.hub-balance-hero .hub-bh-label { font-size: 13.5px; color: var(--hub-muted); margin-bottom: 6px; }
.hub-balance-hero .hub-bh-num { font-size: 46px; font-weight: 800; line-height: 1; color: var(--hub-peel); }
.hub-balance-hero .hub-bh-unit { font-size: 15px; color: var(--hub-muted); margin-left: 8px; font-weight: 500; }
.hub-section-title { font-size: 16px; font-weight: 800; color: var(--hub-peel); margin: 0 0 12px; }
.hub-tiers { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; margin-bottom: 30px; }
.hub-tier {
  position: relative; background: #fff; border: 1.5px solid var(--hub-line);
  border-radius: var(--hub-r-card); padding: 20px; box-shadow: var(--hub-shadow);
}
.hub-tier.is-featured { border-color: var(--hub-green); }
.hub-tier-badge {
  position: absolute; top: -11px; right: 14px; padding: 3px 10px;
  border-radius: 999px; background: #E4EED6; color: var(--hub-peel);
  border: 1px solid #CFE0B5; font-size: 11.5px; font-weight: 700;
}
.hub-tier-name { font-weight: 700; color: var(--hub-muted); font-size: 13.5px; }
.hub-tier-price { font-size: 27px; font-weight: 800; color: var(--hub-peel); margin: 7px 0 3px; }
.hub-tier-points { color: var(--hub-muted); font-size: 13px; margin-bottom: 14px; }
.hub-tier-points b { color: var(--hub-green); }
.hub-ledger { display: grid; gap: 10px; }
.hub-ledger-item {
  display: flex; align-items: center; gap: 14px; background: #fff;
  border: 1px solid var(--hub-line); border-radius: 16px; padding: 13px 16px;
}
.hub-ledger-ic { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; background: #F3F0E7; }
.hub-ledger-ic.is-in { background: #EFF4E8; }
.hub-ledger-mid { flex: 1; min-width: 0; }
.hub-ledger-title { font-size: 14px; font-weight: 600; }
.hub-ledger-sub { font-size: 12px; color: var(--hub-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-ledger-right { text-align: right; flex-shrink: 0; }
.hub-ledger-delta { font-size: 15px; font-weight: 800; }
.hub-ledger-delta.is-in { color: var(--hub-green); }
.hub-ledger-delta.is-out { color: var(--hub-muted); }
.hub-ledger-after { font-size: 11.5px; color: #9CA3AF; margin-top: 2px; }

/* ===== 支付弹窗(品牌化;结构沿用 dialog) ===== */
.hub-pay-dialog h3 { color: var(--hub-peel); }
.hub-pay-ok { color: var(--hub-green); }

/* ===== 个人页 ===== */
.hub-profile-card {
  max-width: 430px; background: #fff; border-radius: var(--hub-r-card);
  box-shadow: var(--hub-shadow); border: 1px solid var(--hub-line); padding: 32px;
  display: flex; flex-direction: column; gap: 18px;
}
.hub-profile-head { display: flex; align-items: center; gap: 16px; }
.hub-profile-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.hub-profile-avatar-fallback { width: 64px; height: 64px; border-radius: 50%; background: #EFF4E8; display: flex; align-items: center; justify-content: center; font-size: 30px; }
.hub-field label { display: block; font-size: 13px; font-weight: 600; color: var(--hub-peel); margin-bottom: 7px; }
.hub-input {
  width: 100%; height: 42px; border: 1.5px solid var(--hub-line); border-radius: var(--hub-r-btn);
  padding: 0 13px; font-size: 14px; background: #fff; color: var(--hub-ink); box-sizing: border-box;
}
.hub-input:focus { outline: none; border-color: var(--hub-green); }
.hub-btn-danger-link { border: none; background: none; color: #DC2626; font-size: 13.5px; cursor: pointer; padding: 6px 0; text-align: left; }

/* ===== 移动端 ===== */
@media (max-width: 768px) {
  .hub-login { flex-direction: column; }
  /* 移动端登录:hero 居中收紧,和卡片对齐;版权行移动端用基础深灰(压山白字仅桌面,见下方 min-width 段);
     卡片紧跟 hero —— panel 去掉 flex:1,避免把卡片垂直居中撑出上方大片空白,底部留白由山景填充。 */
  .hub-login-hero { flex: none; padding: 34px 24px 18px; gap: 12px; align-items: center; text-align: center; }
  .hub-hero-h1 { font-size: 26px; margin-bottom: 10px; }
  .hub-hero-feats, .hub-hero-eyebrow { display: none; }
  .hub-hero-mid { max-width: none; }
  .hub-hero-sub { margin: 0; font-size: 14px; line-height: 1.7; }
  .hub-login-panel { flex: none; padding: 8px 20px 64px; }   /* 底部留白给钉底的版权行 */
  .hub-login-card { padding: 32px 26px; }
  .hub-main { padding: 20px 16px 44px; }
  /* 顶栏瘦身:元素多、宽度紧——logo 单行不折;导航隐藏(「应用」↔logo、「钱包」↔余额胶囊,
     两条路径均可达);余额胶囊不折行;头像只留图标(隐藏昵称 span,兜底图标 .hub-avatar-fallback 保留)。 */
  .hub-topbar { padding: 10px 14px; gap: 10px; }
  .hub-logo { font-size: 15px; white-space: nowrap; }
  .hub-nav { display: none; }
  .hub-balance-pill { white-space: nowrap; padding: 6px 12px; }
  .hub-avatar-btn { padding: 4px; }
  .hub-avatar-btn > span:not(.hub-avatar-fallback) { display: none; }
  .hub-balance-hero .hub-bh-num { font-size: 36px; }
}

/* 应用图标支持图片(如 gamma 自己的 logo) */
.hub-app-icon-img { width: 36px; height: 36px; border-radius: 10px; display: block; }

/* ===== 去 emoji 后的图标细节 ===== */
.hub-logo svg, .hub-hero-brand svg { flex-shrink: 0; }
.hub-avatar-fallback {
  width: 28px; height: 28px; border-radius: 50%; background: #EFF4E8;
  color: var(--hub-peel); display: inline-flex; align-items: center; justify-content: center;
}
.hub-empty .hub-empty-mark { color: #9DB87F; }
.hub-app-icon { color: var(--hub-green); }
.hub-ledger-ic { color: #9CA3AF; }
.hub-ledger-ic.is-in { color: var(--hub-green); }
.hub-pay-ok { color: var(--hub-green); display: flex; justify-content: center; }

/* ===== 登录页视差山景背景(mountain-vista.js) ===== */
@keyframes parallax_fg {
  0% { background-position: 2765px 100%; }
  100% { background-position: 550px 100%; }
}
@keyframes parallax_bike {
  0% { background-position: -300px 100%; }
  100% { background-position: 2000px 100%; }
}
.mv-scene { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.mv-parallax-layer {
  position: absolute; inset: 0;
  background-repeat: repeat-x;
  animation: parallax_fg linear infinite;
}
/* hero 文案压在山景之上;版权行落在山体上 → 白字 + 阴影提对比。
   桌面:版权在 hero 左下角;移动端:见下方 max-width,钉到整页底部(同样压山,白字可读)。 */
.hub-login-hero > .hub-hero-brand, .hub-login-hero > .hub-hero-mid, .hub-login-hero > .hub-hero-foot { position: relative; z-index: 6; }
.hub-login-hero .hub-hero-foot { color: rgba(255, 255, 255, .92); text-shadow: 0 1px 8px rgba(0, 0, 0, .35); }
@media (max-width: 768px) {
  .mv-bike-1, .mv-bike-2 { display: none; }
  /* 版权/ICP 从 hero 顶部移出、绝对定位钉到整页底部:hero 改 static,让 foot 的定位参照系落到
     整页 .hub-login(而非顶部的 hero);卡片底部已留白(.hub-login-panel padding),不会压到。 */
  .hub-login-hero { position: static; }
  .hub-login-hero > .hub-hero-foot { position: absolute; left: 20px; right: 20px; bottom: 18px; text-align: center; }
}

/* ===== 山景全宽化:场景挂在 .hub-login 整页层,左右面板透明让山贯穿 ===== */
.hub-login { position: relative; background: var(--hub-cream); }
.hub-login-hero { background: transparent; overflow: visible; }
.hub-login-hero::after { content: none; }
.hub-login-panel { background: transparent; position: relative; z-index: 6; }
/* 顶部奶油色渐隐:上半区留白给文案,山体只在下半区实色呈现 */
.mv-scene::after {
  content: ''; position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background: linear-gradient(180deg, rgba(250, 247, 240, .92) 0%, rgba(250, 247, 240, .5) 32%, rgba(250, 247, 240, 0) 60%);
}