/* Reference: https://www.byd.com/en: Montserrat, graphite, white and square controls. */
@font-face { font-family: Montserrat; src: url("/assets/byd/fonts/Montserrat-Regular.ttf") format("truetype"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: Montserrat; src: url("/assets/byd/fonts/Montserrat-Medium.ttf") format("truetype"); font-style: normal; font-weight: 500; font-display: swap; }
@font-face { font-family: Montserrat; src: url("/assets/byd/fonts/Montserrat-SemiBold.ttf") format("truetype"); font-style: normal; font-weight: 600; font-display: swap; }
@font-face { font-family: Montserrat; src: url("/assets/byd/fonts/Montserrat-Bold.ttf") format("truetype"); font-style: normal; font-weight: 700; font-display: swap; }
/* BYD automotive design system. Layout and business behavior stay in app.js. */
:root {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f5f5f5;
  --ink: #252728;
  --muted: #51565b;
  --line: #dedede;
  --primary: #252728;
  --primary-dark: #252728;
  --primary-deep: #252728;
  --primary-soft: #f5f5f5;
  --accent: #252728;
  --accent-dark: #252728;
  --accent-soft: #f5f5f5;
  --success: #27664b;
  --success-soft: #f5f5f5;
  --warning: #795d26;
  --warning-soft: #f5f5f5;
  --danger: #a63030;
  --danger-dark: #a63030;
  --danger-soft: #f5f5f5;
  --disabled-bg: #f5f5f5;
  --disabled-ink: #62666b;
  --control-border: #dedede;
  --overlay: rgba(0, 0, 0, .62);
  --focus-ring: #858585;
  --focus-dark: #dedede;
  --shadow: none;
  --shadow-strong: none;
  --radius: 0px;
}

html { background: #f5f5f5; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  min-width: 0;
  margin: 0;
  color: var(--ink);
  background: #f5f5f5;
  font-family: Montserrat, Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font-family: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
a { color: var(--primary); }
::selection { color: #fff; background: #727272; }
.app-shell {
  width: 100%;
  max-width: 480px !important;
  min-width: 0;
  border-radius: 0;
  color: var(--ink);
  background: var(--bg);
  box-shadow: none;
}
.screen, .get-user-screen {
  min-width: 0;
  padding: 24px 24px calc(106px + env(safe-area-inset-bottom));
  color: var(--ink);
  background: var(--bg);
}
.screen.screen-home { padding-top: max(22px, env(safe-area-inset-top)); }
h1, h2, h3, h4, p { overflow-wrap: break-word; }
h1, h2, h3, h4 { font-family: inherit; letter-spacing: -.015em; }
strong, b { font-weight: 600; }
svg { stroke-width: 1.7; }

/* Graphite toolbar and minimal monochrome navigation. */
.topbar {
  min-height: 80px;
  gap: 12px;
  margin: -24px -24px 28px;
  padding: max(17px, env(safe-area-inset-top)) 20px 17px;
  color: #fff;
  background: #252728;
  border-bottom: 1px solid var(--line);
  box-shadow: none;
}
.topbar-title { min-width: 0; flex: 1; }
.topbar h1, .topbar strong { color: #fff; font-size: 19px; font-weight: 600; line-height: 1.35; }
.topbar p { margin-top: 5px; color: #e0e2e4; font-size: 12px; line-height: 1.6; }
.topbar .icon-btn, .topbar button, .topbar a, .icon-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  padding: 10px;
  color: #252728;
  background: #f5f5f5;
  border: 1px solid #f5f5f5;
  border-radius: 0;
  box-shadow: none;
}
.bottom-nav {
  min-height: 78px;
  padding: 8px 14px max(9px, env(safe-area-inset-bottom));
  background: #fff;
  border-top: 1px solid #dedede;
  box-shadow: none;
  backdrop-filter: none;
}
.bottom-nav a { gap: 5px; padding: 6px 8px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .01em; }
.bottom-nav a svg { width: 23px; height: 23px; padding: 0; color: var(--muted); background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.topbar .icon-btn, .topbar button, .topbar a { color: #fff; background: transparent; border: 0; width: 44px; min-width: 44px; height: 44px; }
.bottom-nav a.active { color: #252728; background: transparent; }
.bottom-nav a.active svg { color: #252728; background: transparent; border: 0; box-shadow: none; }
.bottom-nav a.active::after { width: 24px; height: 2px; border-radius: 0; background: #252728; }

/* Clean panels and readable information hierarchy. */
.section, .form-card, .auth-panel, .vip-info-card, .vip-intro-card,
.points-rule-card, .wealth-detail, .job-action-panel, .job-progress-panel,
.team-milestone-section, .company-certificate-gallery, .activity-config-card,
.get-home-broadcast, .get-home-support, .get-home-vip-section, .get-home-reward-guides {
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
}
.section { padding: 24px 20px; margin-top: 24px; }
.section-title { margin-bottom: 20px; gap: 12px; }
.section-title h2 { color: #252728; font-size: 16px; font-weight: 600; }
.section-title a, .section-title button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 10px; color: var(--muted); font-size: 13px; font-weight: 600; }
.section-subtitle, .muted, .empty { color: var(--muted); }
.empty { padding: 25px 16px; background: #ffffff; border: 1px dashed #dedede; border-radius: 0; font-size: 13px; line-height: 1.7; }
.list { gap: 0; }
.row, .record, .income-detail-row {
  min-width: 0;
  padding: 16px 0;
  color: var(--ink);
  background: #fff;
  border: 0;
  border-bottom: 1px solid #f5f5f5;
  border-radius: 0;
  box-shadow: none;
}
.row:last-child, .record:last-child { border-bottom: 0; }
.row-icon { color: #252728; background: transparent; border: 0; border-radius: 0; }
.row-main strong, .row-action { color: #252728; }
.row-main strong { font-size: 14px; font-weight: 600; }
.row-main span, .record-main span { color: var(--muted); font-size: 13px; line-height: 1.6; }
.record-main strong { color: #252728; font-size: 14px; }
.record b, .record .income, .income-detail-row b { color: var(--muted); font-variant-numeric: tabular-nums; }
.record .outcome { color: #a63030; }
.stats-grid { gap: 10px; }
.stat { padding: 16px 12px; background: #fff; border: 1px solid #dedede; border-radius: 0; box-shadow: none; }
.stat span { color: var(--muted); font-size: 12px; font-weight: 500; }
.stat strong { color: #252728; font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.035em; }

/* Square-edged 48px controls, following the reference site proportions. */
.primary-btn, .vip-upgrade-btn, .activity-popup-primary, .lucky-prize-confirm,
.team-milestone-claim, .sunshine-purchase-submit, .turnover-exchange-submit,
.wealth-order-action, .job-promote-btn {
  min-height: 48px;
  padding: 12px 24px;
  color: #fff;
  background: #252728;
  border: 1px solid #252728;
  border-radius: 0;
  box-shadow: none;
  font-size: 14px;
  font-weight: 600;
}
.primary-btn:hover:not(:disabled), .vip-upgrade-btn:hover:not(:disabled), .wealth-order-action:hover:not(:disabled) { color: #fff; background: #080909; border-color: #080909; }
.secondary-btn, .ghost-btn, .pagination a, .pagination button, .record-pagination button {
  min-height: 48px;
  padding: 12px 20px;
  color: #252728;
  background: #fff;
  border: 1px solid #252728;
  border-radius: 0;
  box-shadow: none;
  font-size: 13px;
  font-weight: 600;
}
.secondary-btn:hover:not(:disabled), .ghost-btn:hover:not(:disabled) { color: #fff; background: #252728; border-color: #252728; }
.danger-btn, .is-danger-button { color: #fff; background: #a63030; border-color: #a63030; box-shadow: none; }
button:disabled, .primary-btn:disabled, .secondary-btn:disabled, .vip-upgrade-btn:disabled { color: var(--disabled-ink); background: #f5f5f5; border-color: #dedede; box-shadow: none; opacity: 1; }
.form-card, .get-form-card { gap: 20px; padding: 22px 18px; background: #fff; border-color: var(--line); border-radius: 0; }
.field { gap: 8px; }
.field label { color: #252728; font-size: 14px; font-weight: 600; }
.input-wrap, .select-wrap, .register-auth-panel .input-wrap, .bank-select-button {
  min-height: 50px;
  color: #252728;
  background: #ffffff;
  border: 1px solid #dedede;
  border-radius: 0;
  box-shadow: none;
}
.input-wrap input, .input-wrap select, .input-wrap textarea { min-width: 0; color: #252728; background: transparent; font-size: 16px; }
.input-wrap svg, .select-wrap svg { color: var(--disabled-ink); }
input::placeholder, textarea::placeholder { color: var(--disabled-ink); opacity: 1; }
.input-wrap:focus-within, .bank-select-button:focus-visible { outline: 0; border-color: #bcbcbc; box-shadow: none; }
input:focus, select:focus, textarea:focus { outline: 0; border-color: #bcbcbc; box-shadow: none; }
.input-wrap input:focus, .input-wrap textarea:focus { outline: none; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 3px solid #858585; outline-offset: 3px; }
.notice, .observation-vip-notice, .observation-vip-inline {
  padding: 13px 14px;
  color: var(--muted);
  background: #f5f5f5;
  border: 1px solid #dedede;
  border-radius: 0;
  box-shadow: none;
  font-size: 13px;
  line-height: 1.7;
}
.notice svg { color: var(--muted); }
.badge, .chip, .pill { color: #252728; background: #f5f5f5; border-color: #dedede; border-radius: 0; }
.tabbar, .team-level-tabs { padding: 0; gap: 0; background: #fff; border: 0; border-bottom: 1px solid #dedede; border-radius: 0; }
.tabbar button, .team-level-tabs button { min-height: 48px; color: var(--muted); background: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: 0; font-size: 13px; }
.tabbar button.active, .team-level-tabs button.active { color: #252728; background: #fff; border: 0; border-bottom: 2px solid #252728; box-shadow: none; }
.toast { color: #fff; background: #252728; border: 1px solid #ffffff18; border-radius: 0; box-shadow: none; font-size: 13px; }
.progress-track.task-progress { border-color: rgba(37, 39, 40, .18); }

/* Product photographs provide the colour; the surrounding UI stays restrained. */
.get-media-banner, .get-company-hero, .get-task-banner, .get-vip-banner, .get-team-banner {
  color: #fff;
  background-color: #252728;
  border: 1px solid #252728;
  border-radius: 0;
  box-shadow: none;
}
.get-media-banner::after { background: linear-gradient(90deg, #252728eb, #25272888 60%, #25272818); }
.get-media-banner > div, .get-company-hero > div, .get-home-hero > div { background: linear-gradient(90deg, rgba(0, 0, 0, .96), rgba(0, 0, 0, .45)); }
.get-media-banner > div > span { color: #e0e2e4; letter-spacing: .1em; text-transform: uppercase; font-size: 11px; font-weight: 600; }
.get-media-banner strong { color: #fff; font-size: 23px; font-weight: 600; line-height: 1.2; letter-spacing: -.035em; }
.get-media-banner p { color: #e0e2e4; font-size: 13px; line-height: 1.65; }
.get-media-banner img { filter: none; }

/* Full-screen automotive photography with transparent authentication controls. */
body:has(.auth-screen) { padding: 0; background: #071119; }
.app-shell:has(.auth-screen) { max-width: none !important; background: #071119; }
.screen.auth-screen, .screen.auth-screen.register-auth-screen {
  isolation: isolate;
  min-height: 100vh;
  min-height: 100dvh;
  height: auto;
  align-items: center;
  gap: 22px;
  padding: max(36px, env(safe-area-inset-top)) 24px max(32px, env(safe-area-inset-bottom));
  color: #fff;
  background: #071119;
}
.screen.auth-screen::before {
  content: "";
  display: block;
  position: fixed;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(3, 9, 15, .14), rgba(3, 9, 15, .38) 35%, rgba(3, 9, 15, .88)),
    url("/assets/byd/products/vip6-byd-electric-car.png") 56% center / cover no-repeat;
}
.screen.auth-screen::after { display: none; }
.auth-screen > * { width: 100%; max-width: 420px; }
.auth-screen .brand { align-items: center; margin: 0 0 10px; background: transparent; mix-blend-mode: screen; }
.auth-screen .brand-logo {
  width: 76px; height: 76px; padding: 0;
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  mix-blend-mode: screen;
}
.auth-screen .brand-copy h1 { margin: 0 0 7px; color: #fff; font-size: 30px; font-weight: 600; letter-spacing: .13em; }
.auth-screen .brand-copy p { color: #e1e6eb; font-size: 12px; letter-spacing: .08em; }
.auth-screen .auth-panel, .auth-screen .register-auth-panel {
  gap: 18px; margin: 0; padding: 0; color: #fff;
  background: transparent; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none;
}
.auth-screen .field, .auth-screen .register-auth-panel .field { gap: 8px; }
.auth-screen .field label, .auth-screen .register-auth-panel .field label {
  position: static; width: auto; height: auto; overflow: visible; clip: auto;
  clip-path: none; margin: 0; white-space: normal;
  color: #fff; font-size: 13px; font-weight: 600;
}
.auth-screen .input-wrap, .auth-screen .register-auth-panel .input-wrap {
  min-height: 52px; padding: 0 14px; color: #fff;
  background: rgba(3, 11, 18, .60); border: 1.5px solid rgba(255, 255, 255, .85); border-radius: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 4px 16px rgba(0, 0, 0, .15);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.auth-screen .input-wrap:focus-within {
  background: rgba(3, 11, 18, .76); border-color: #fff;
  outline: 2px solid rgba(255, 255, 255, .32); outline-offset: 2px;
}
.auth-screen .input-wrap input, .auth-screen .register-auth-panel .input-wrap input {
  color: #fff; background: transparent; font-size: 16px; caret-color: #fff;
}
.auth-screen .input-wrap svg, .auth-screen .register-auth-panel .input-wrap svg { color: #e1e6eb; }
.auth-screen .phone-prefix { color: #e1e6eb; font-weight: 600; }
.auth-screen input:-webkit-autofill {
  -webkit-text-fill-color: #fff; caret-color: #fff;
  -webkit-background-clip: text; background-clip: text;
  box-shadow: none; transition: background-color 99999s ease-out;
}
.auth-screen .primary-btn, .auth-screen .register-auth-panel .primary-btn {
  min-height: 52px; margin-top: 4px; color: #fff;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .85);
  border-radius: 0; box-shadow: none; font-size: 15px;
}
.auth-screen .primary-btn:hover:not(:disabled) { color: #fff; background: rgba(255, 255, 255, .22); border-color: #fff; }
.auth-screen .primary-btn:disabled { color: #d4dce3; background: transparent; border-color: rgba(255, 255, 255, .3); }
.auth-screen .switch-line, .auth-screen .switch-line button { color: #e1e6eb; }
.auth-screen .switch-line { min-height: 44px; margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.auth-screen .switch-line button { min-height: 44px; color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.auth-screen .legal-note { margin: 0; color: #d4dce3; font-size: 12px; line-height: 1.7; text-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
.auth-screen button:focus-visible { outline-color: #fff; }
.auth-screen .registration-bonus-promo {
  padding: 14px 0; color: #fff; background: transparent;
  border: 0; border-block: 1px solid rgba(255, 255, 255, .25); border-radius: 0; box-shadow: none;
  mix-blend-mode: screen;
}
.auth-screen .registration-bonus-promo-heading > img {
  padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; mix-blend-mode: screen;
}
.auth-screen .registration-bonus-promo-copy span, .auth-screen .registration-bonus-promo-extra { color: #e1e6eb; }
.auth-screen .registration-bonus-promo-extra { border-color: rgba(255, 255, 255, .25); }
.screen.auth-screen.register-auth-screen {
  justify-content: center;
  gap: 14px;
  padding-block: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-bottom));
}
.register-auth-screen .brand { margin: 0; }
.register-auth-screen .brand-logo { width: 56px; height: 56px; }
.register-auth-screen .brand-copy h1 { margin-bottom: 5px; font-size: 27px; }
.register-auth-screen .registration-bonus-promo {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 0;
}
.register-auth-screen .registration-bonus-promo-heading { grid-column: 1; grid-row: 1; gap: 8px; }
.register-auth-screen .registration-bonus-promo-heading > img { flex-basis: 34px; width: 34px; height: 34px; }
.register-auth-screen .registration-bonus-promo-copy > span { font-size: 9px; line-height: 1.4; }
.register-auth-screen .registration-bonus-promo-copy > strong { font-size: 14px; }
.register-auth-screen .registration-bonus-promo-amount { grid-column: 2; grid-row: 1; font-size: 28px; white-space: nowrap; }
.register-auth-screen .registration-bonus-promo-extra { grid-column: 1 / -1; padding-top: 8px; font-size: 11px; line-height: 1.45; }
.auth-screen .register-auth-panel { gap: 12px; }
.auth-screen .register-auth-panel .field { gap: 6px; }
.auth-screen .register-auth-panel .field label { font-size: 12px; }
.auth-screen .register-auth-panel .input-wrap { min-height: 48px; }
.auth-screen .register-auth-panel .primary-btn { min-height: 48px; margin: 0; }

@media (max-width: 600px) and (max-height: 700px) {
  .screen.auth-screen { gap: 14px; padding: max(16px, env(safe-area-inset-top)) 20px max(16px, env(safe-area-inset-bottom)); }
  .auth-screen .brand { margin: 0; }
  .auth-screen .brand-logo { width: 48px; height: 48px; }
  .auth-screen .brand-copy h1 { margin-bottom: 4px; font-size: 24px; }
  .auth-screen .brand-copy p { font-size: 11px; }
  .auth-screen .auth-panel, .auth-screen .register-auth-panel { gap: 10px; }
  .auth-screen .input-wrap, .auth-screen .register-auth-panel .input-wrap { min-height: 44px; }
  .auth-screen .primary-btn, .auth-screen .register-auth-panel .primary-btn { min-height: 44px; margin: 0; }
  .auth-screen .switch-line, .auth-screen .switch-line button { min-height: 36px; font-size: 12px; }
  .auth-screen .legal-note { font-size: 11px; line-height: 1.5; }
  .screen.auth-screen.register-auth-screen {
    gap: 8px;
    padding-block: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-bottom));
  }
  .register-auth-screen .brand-logo { width: 40px; height: 40px; }
  .register-auth-screen .registration-bonus-promo { gap: 5px 10px; padding: 8px 0; }
  .register-auth-screen .registration-bonus-promo-heading > img { display: none; }
  .register-auth-screen .registration-bonus-promo-amount { font-size: 25px; }
  .register-auth-screen .registration-bonus-promo-extra { display: none; }
  .auth-screen .register-auth-panel { gap: 8px; }
  .auth-screen .register-auth-panel .field { gap: 4px; }
  .auth-screen .register-auth-panel .field label { font-size: 11px; line-height: 14px; }
}
.registration-bonus-promo { color: #f5f5f5; background: linear-gradient(120deg, #252728, #252728); border-color: #727272; border-radius: 0; box-shadow: none; }
.registration-bonus-promo strong, .registration-bonus-promo-amount { color: #fff; }
.registration-bonus-promo-copy span, .registration-bonus-promo small { color: #bcbcbc; }

@media (max-width: 360px) {
  .screen, .get-user-screen { padding-inline: 14px; }
  .topbar { margin-inline: -14px; padding-inline: 14px; gap: 9px; }
  .topbar h1 { font-size: 17px; }
  .topbar p { font-size: 12px; }
  .topbar .icon-btn { width: 44px; height: 44px; min-width: 44px; padding: 9px; }
  .section, .form-card, .get-form-card { padding: 17px 14px; }
  .screen.auth-screen, .screen.auth-screen.register-auth-screen { padding-inline: 18px; }
  .stat strong { font-size: 20px; }
}
@media (prefers-reduced-motion: no-preference) {
  .primary-btn, .secondary-btn, .ghost-btn, .bottom-nav a, .row { transition: background-color .18s ease, color .18s ease, border-color .18s ease; }
}