:root {
  /* === color design === */
  
  /* 主题色 */
  --color-primary: #3782ff;


  /* --- common --- */
  --bg-body: #ffffff;
  --bg-primary: #ffffff;

  --color-hover-primary: #4c8eff;
  --color-active-primary: #2c68cc;

  --border-color-primary: #eaeaea;
  --border-color-hover-primary: #dcdcdc;

  --font-size-primary: 10px;
  --border-radius-primary: 1.2rem;

  /* --- text --- */
  --color-text-primary: #1f2024;
  --color-text-secondary: #71727a;
  --color-text-tip: rgba(0, 0, 0, 0.3);
  --color-text-error: #e64949;
  --color-text-highlight: #ff8a00;
  --color-select-item: #42d474;

  /* --- button --- */
  /* primary button */
  --bg-color-btn-primary: var(--color-primary);
  --bg-color-hover-btn-primary: var(--color-hover-primary);
  --bg-color-active-btn-primary: var(--color-active-primary);
  --border-color-btn-primary: var(--bg-color-btn-primary);
  --border-color-hover-btn-primary: var(--bg-color-hover-btn-primary);
  --border-color-active-btn-primary: var(--bg-color-active-btn-primary);
  --font-size-btn-primary: 1.4rem;
  --border-radius-btn-primary: var(--border-radius-primary);

  /* plain button */
  --bg-color-btn-plain: white;
  --bg-color-hover-btn-plain: #fefefe;
  --bg-color-active-btn-plain: #fafafa;
  --border-color-btn-plain: var(--color-primary);
  --border-color-hover-btn-plain: var(--color-hover-primary);
  --border-color-active-btn-plain: var(--color-active-primary);
  --bg-color-hover-btn-plain-danger: #fffcfc;
  --bg-color-active-btn-plain-danger: #ffefef;
  --border-color-btn-plain-danger: #FA3A3A;
  --border-color-hover-btn-plain-danger: #ff6060;
  --border-color-active-btn-plain-danger: #fa2222;
  --font-size-btn-plain: var(--font-size-btn-primary);
  --border-radius-btn-plain: var(--border-radius-btn-primary);

  /* text button */
  --color-btn: var(--color-primary);
  --color-hover-btn: var(--color-hover-primary);
  --color-active-btn: var(--color-active-primary);
  --font-size-btn-text: var(--font-size-btn-primary);

  /* --- input --- */
  --bg-color-input: var(--bg-primary);
  --border-color-input: var(--border-color-primary);
  --border-color-hover-input: var(--border-color-hover-primary);
  --border-color-focus-input: var(--color-primary);
  --shadow-color-focus-input: rgba(55, 130, 255, 0.2);
  --shadow-size-focus-input: 2px;

  --label-color-input: var(--color-text-tip);
  --label-color-focus-input: var(--color-primary);
  --action-color-input: var(--border-color-input);
  --action-color-hover-input: var(--border-color-hover-input);

  --color-placeholder-input: #dcdcdc;
  --color-input: var(--color-text-primary);

  --font-size-input: 1.6rem;
  --font-size-input-label: 1.4rem;
  --font-size-input-tip: 1.3rem;

  --height-input: 5.6rem;
  --size-checkbox: 1.4rem;
  --border-radius-input: var(--border-radius-primary);
  --border-radius-checkbox: calc(var(--border-radius-input) / 6);
  --bg-color-checkbox: var(--bg-color-input);
  --bg-color-active-checkbox: var(--color-primary);

  /* --- item --- */
  --bg-color-item: var(--bg-primary);
  --bg-color-selected-item: #f5f9ff;
  --bg-color-item-extra: rgba(0, 0, 0, 0.03);
  --bg-color-selected-item-extra: #fff;

  --border-color-item: var(--border-color-primary);
  --border-color-hover-item: var(--border-color-hover-primary);
  --border-color-selected-item: var(--color-primary);
  --border-color-selected-item-unvailable: rgba(55, 130, 255, 0.3);

  --font-size-item: 15px;
  --height-item: 36px;
  --height-item-btn: var(--height-item);
  --height-selected-item: 48px;
  --border-radius-item: var(--border-radius-primary);
  --shadow-color-focus-item: var(--shadow-color-focus-input);
  --shadow-color-focus-item-unvailable: rgba(55, 130, 255, 0.1);
  --shadow-size-focus-item: 2px;

  --color-item-account: rgba(0, 0, 0, 0.6);
  --color-local-currency: var(--color-primary);
  --bg-local-currency: rgba(55, 130, 255, .1);

  --color-item-status-tag: #fff;
  --bg-item-status-tag: rgba(0, 0, 0, 0.9);

  --color-item-desc: var(--color-text-tip);

  /* --- header --- */
  --header-height: 20rem;
  --header-top-height: 4.8rem;

  --header-bg: linear-gradient(0deg, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.03)), #FFFFFF;
  --header-top-bg: none;
  --header-main-bg: none;
  --header-bottom-bg: linear-gradient(360deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 20.31%);
  --header-fixed-bg: linear-gradient(0deg, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.03)), #FFFFFF;
  --header-fixed-shadow-bg: linear-gradient(360deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 50%);

  --color-text-header-common: var(--color-text-primary);
  --color-text-header-item: var(--color-text-secondary);
  --color-text-header-exchange: var(--color-text-tip);
  --color-text-header-amount: var(--color-text-primary);
  --color-text-header-tag: var(--color-text-secondary);
  --color-text-header-tag-got: var(--tag-got-color);
  --color-text-header-tip: var(--color-text-tip);
  --color-text-header-fix-tip: var(--color-text-header-tip);

  --padding-header-tags: 0 2.6rem;
  --padding-header-top: 0.8rem 1.6rem 0;
  --padding-header-main: 1.6rem 2.4rem;
  --padding-header-bottom: 0 1.6rem;
  --border-radius-header-main: 0;
  --border-radius-header-bottom: 0;
  --top-offset-header-bottom: 0;

  --header-content-align: center;
  --header-content-justify: center;

  /* --- others --- */
  --divider-color: rgba(0, 0, 0, 0.1);

  /* --- countdown --- */
  --color-countdown: var(--color-primary);
  --bg-countdown: rgba(55, 130, 255, .1);

  /* --- toast --- */
  --toast-bg: rgba(0, 0, 0, 0.9);
  --toast-action-color: var(--color-primary);
  --toast-color: var(--bg-primary);

  /* --- tag --- */
  --tag-bg: rgba(0, 0, 0, 0.05);
  --tag-got-bg: #FFF1EA;
  --tag-got-color: #ff7614;

  /* card */
  --bg-card: #f2f2f2;
  --border-color-card: #f2f2f2;
  --bg-card-org: var(--bg-primary);
  --border-color-card-org: rgba(51, 51, 51, 0.1);

  /* pay btn */
  --bg-pay-btn-container: var(--bg-primary);
  --shadow-pay-btn-wrapper: 0px -2px 4px rgba(0, 0, 0, 0.1);

  /* popup */
  --bg-popup: var(--bg-primary);
  --bg-popup-mask: #000000;

  /* --- skeleton --- */
  --bg-text-skeleton: linear-gradient(to right, #edeef1 0%, #f6f7f8 15%, #efefef 100%);
  --bg-text-skeleton-reverse: var(--bg-text-skeleton);
}

.desktop:root, .landscape:root {
  --header-content-justify: start;
  --header-bottom-bg: none;
}

.desktop:root {
  --padding-header-main: 4.8rem 1.6rem 1.6rem 1.6rem;
}