:root {
  --amp-light: #FFF0BF;
  --amp-main: #E8CB7A;
  --amp-deep: #BD9138;
  --amp-ink: #211707;
  --amp-secondary-top: #116F40;
  --amp-secondary-bottom: #043020;
  --amp-secondary-text: #FFFFFF;
  --amp-radius: 14px;
}

/* ครอบคลุมปุ่ม data-track รุ่นเดิม และ auth-actions รุ่นใหม่ */
#app :is(button[data-track="open_dialog_signup"],
         button[data-track="open_dialog_signin"],
         button[data-track="appbar_deposit"],
         .auth-actions > button.btn-primary,
         .auth-actions > button.btn-secondary,
         a.v-btn[href^="/articles/"],
         a.v-btn[href^="/promotions/"]) {
  box-sizing: border-box !important;
  position: relative;
  border-radius: var(--amp-radius) !important;
  font-family: inherit !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: none !important;
  transition: filter .2s ease, transform .2s ease, box-shadow .2s ease !important;
}

#app :is(button[data-track="open_dialog_signup"],
         button[data-track="open_dialog_signin"],
         .auth-actions > button.btn-primary,
         .auth-actions > button.btn-secondary) {
  height: 42px !important;
  padding: 0 19px !important;
  font-size: 14px !important;
}

/* สมัครสมาชิก + ฝาก เด่นตั้งแต่ยังไม่ชี้เมาส์ */
#app :is(button[data-track="open_dialog_signup"],
         button[data-track="appbar_deposit"],
         .auth-actions > button.btn-primary),
#app .cashier-tab .v-tab:has(path[d*="m-5 5"]) {
  color: var(--amp-ink) !important;
  background: linear-gradient(180deg, var(--amp-light), var(--amp-main) 38%, var(--amp-deep)) !important;
  border: 1px solid var(--amp-light) !important;
  box-shadow: inset 0 2px 0 #ffffff70, inset 0 -2px 0 #00000020,
              0 4px 10px #00000045, 0 0 12px color-mix(in srgb, var(--amp-main) 30%, transparent) !important;
  text-shadow: none !important;
}

/* เข้าสู่ระบบ + ถอน + ดูเพิ่มเติม เป็นสีรอง */
#app :is(button[data-track="open_dialog_signin"],
         .auth-actions > button.btn-secondary,
         a.v-btn[href^="/articles/"],
         a.v-btn[href^="/promotions/"]),
#app .cashier-tab .v-tab:has(path[d*="M12 16V3"]) {
  color: var(--amp-secondary-text) !important;
  background: linear-gradient(180deg, var(--amp-secondary-top), var(--amp-secondary-bottom)) !important;
  border: 1px solid var(--amp-main) !important;
  box-shadow: inset 0 1px 0 #ffffff25, 0 3px 8px #00000040 !important;
}

/* ข้อความและไอคอน */
#app :is(button[data-track="open_dialog_signup"],
         button[data-track="open_dialog_signin"],
         button[data-track="appbar_deposit"],
         .auth-actions > button.btn-primary,
         .auth-actions > button.btn-secondary,
         a.v-btn[href^="/articles/"],
         a.v-btn[href^="/promotions/"]) :is(.v-btn__content, .v-icon, .appbar-wallet__deposit-text) {
  color: inherit !important;
}

/* ปิดสี overlay เดิม */
#app :is(button[data-track="open_dialog_signup"],
         button[data-track="open_dialog_signin"],
         .auth-actions > button.btn-primary,
         .auth-actions > button.btn-secondary,
         a.v-btn[href^="/articles/"],
         a.v-btn[href^="/promotions/"])::before,
#app .auth-actions > button:is(.btn-primary, .btn-secondary) :is(.v-btn__overlay, .v-btn__underlay),
#app .cashier-tab .v-tab::before {
  opacity: 0 !important;
}

/* ฝากบนแถบยอดเงิน */
#app button[data-track="appbar_deposit"] {
  min-height: 34px !important;
  padding: 5px 13px !important;
  font-size: 14px !important;
}

/* แท็บฝากถอนในแคชเชียร์ */
#app .cashier-tab .v-tabs-bar { background: transparent !important; }
#app .cashier-tab .v-tabs-bar__content { gap: 8px; padding: 5px; }
#app .cashier-tab .v-tab {
  min-height: 42px;
  border-radius: var(--amp-radius) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}
#app .cashier-tab .v-tabs-slider { background: var(--amp-main) !important; }

/* ดูเพิ่มเติม เฉพาะลิงก์รายละเอียดบทความและโปรโมชัน */
#app :is(a.v-btn[href^="/articles/"], a.v-btn[href^="/promotions/"]) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 38px !important;
  height: auto !important;
  padding: 9px 20px !important;
  border-radius: 999px !important;
  font-size: 14px !important;
}

@media (hover: hover) and (pointer: fine) {
  #app :is(button[data-track="open_dialog_signup"],
           button[data-track="open_dialog_signin"],
           button[data-track="appbar_deposit"],
           .auth-actions > button.btn-primary,
           .auth-actions > button.btn-secondary,
           a.v-btn[href^="/articles/"],
           a.v-btn[href^="/promotions/"]):not(:disabled):hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
  }
}

#app :is(button[data-track="open_dialog_signup"],
         button[data-track="open_dialog_signin"],
         button[data-track="appbar_deposit"],
         .auth-actions > button.btn-primary,
         .auth-actions > button.btn-secondary,
         a.v-btn[href^="/articles/"],
         a.v-btn[href^="/promotions/"],
         .cashier-tab .v-tab):focus-visible {
  outline: 2px solid var(--amp-main) !important;
  outline-offset: 3px;
}

@media (max-width: 600px) {
  #app :is(button[data-track="open_dialog_signup"],
           button[data-track="open_dialog_signin"],
           .auth-actions > button.btn-primary,
           .auth-actions > button.btn-secondary) {
    height: 36px !important;
    min-width: 0 !important;
    padding: 0 12px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
  }
  #app button[data-track="appbar_deposit"] {
    padding: 4px 10px !important;
    font-size: 12px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #app :is(button[data-track="open_dialog_signup"],
           button[data-track="open_dialog_signin"],
           button[data-track="appbar_deposit"],
           .auth-actions > button.btn-primary,
           .auth-actions > button.btn-secondary,
           a.v-btn[href^="/articles/"],
           a.v-btn[href^="/promotions/"]) {
    transition: none !important;
    transform: none !important;
  }
}