/* Translucent controls keep a clear primary/secondary hierarchy without solid fills. */
@media(max-width:899px){
  :where(.primary,.secondary,.outline,.merchant-blue-btn,.merchant-main-btn,.merchant-history>button,.grab-dialog-actions button,.filter,.tip-amounts button,.tip-tabs button,.choice-grid button,.choice-pills button,.subpage-link,.member-level,.member-balance-link,.quick-action,.cert-service-list .service-card,.mobile-task-card,.mobile-secondary-links button,.support-channel,.profile-link,.account-details summary,.gear,.header-back,.region-btn){
    -webkit-backdrop-filter:blur(18px) saturate(145%);
    backdrop-filter:blur(18px) saturate(145%);
  }

  .primary,.auth-card .auth-submit,.merchant-blue-btn,.merchant-main-btn,.grab-dialog-actions .primary{
    background:linear-gradient(135deg,#6a89ee5e,#716dcb36 62%,#8a6cc138)!important;
    border:1px solid #adc0ff9c!important;
    box-shadow:inset 0 1px 0 #ffffff47,inset 0 -1px 0 #8da4f326,0 10px 23px #142b6f3f!important;
    color:#f8faff!important;
    text-shadow:0 1px 1px #0a153650;
  }
  .merchant-main-btn.complete{
    background:linear-gradient(135deg,#2eaaaf70,#24ac9d35 65%,#56c2ae30)!important;
    border-color:#8de3d7a6!important;
    box-shadow:inset 0 1px 0 #ffffff4c,inset 0 -1px 0 #71c8be2a,0 10px 23px #0c5a6342!important;
  }
  .merchant-blue-btn:hover,.merchant-main-btn:hover,.primary:hover,.grab-dialog-actions .primary:hover{
    background:linear-gradient(135deg,#7596f080,#7874da52 62%,#9471ca4c)!important;
    box-shadow:inset 0 1px 0 #ffffff5c,0 13px 27px #233f8954!important;
  }
  .merchant-main-btn.complete:hover{background:linear-gradient(135deg,#3cbbbd85,#36b8a753)!important}

  .secondary,.outline,.grab-dialog-actions .secondary{
    background:linear-gradient(145deg,#ffffff1e,#a7b9fa0c)!important;
    border:1px solid #a0b1dd69!important;
    box-shadow:inset 0 1px 0 #ffffff30,0 6px 16px #050a1b24!important;
    color:#e9efff!important;
  }
  .secondary:hover,.outline:hover,.grab-dialog-actions .secondary:hover{background:linear-gradient(145deg,#ffffff2c,#a7b9fa1b)!important;border-color:#b8c8f596!important}

  .merchant-history>button{
    background:linear-gradient(110deg,#7895e32d,#6a7fb223 58%,#8f85d425)!important;
    border-color:#a0b3ee70!important;
    box-shadow:inset 0 1px 0 #ffffff27,0 8px 20px #050a1d34!important;
  }
  .merchant-history-leading{background:linear-gradient(145deg,#8aa5f035,#718bdb1c);border-color:#9bb4fa70}
  .merchant-history-chevron{background:#ffffff16;border-color:#a9bbe15c}

  .filter,.tip-amounts button,.choice-grid button,.choice-pills button,.subpage-link{
    background:linear-gradient(145deg,#ffffff18,#9baee50b)!important;
    border-color:#a2b3dc65!important;
    color:#d8e3ff!important;
  }
  .filter.active,.tip-amounts button.selected,.choice-grid button.active,.choice-pills button.active{
    background:linear-gradient(135deg,#7893eb59,#9074cd38)!important;
    border-color:#b8c8ffaf!important;
    color:#fff!important;
    box-shadow:inset 0 1px 0 #ffffff34,0 0 0 1px #94aaff28;
  }
  .tip-tabs button.active{background:linear-gradient(145deg,#9cb0fb3d,#977aca2b)!important;color:#f8faff!important;box-shadow:inset 0 1px 0 #ffffff24}
  .bottom-nav{
    height:calc(70px + env(safe-area-inset-bottom));
    padding-bottom:env(safe-area-inset-bottom);
    border-radius:16px 16px 0 0;
  }
  .screen{padding-bottom:calc(94px + env(safe-area-inset-bottom))}
  .nav-item{position:relative;isolation:isolate;border:0;border-radius:0;color:#aab4ce}
  .nav-item.active{background:transparent!important;border:0!important;box-shadow:none;color:#d5e0ff}
  .nav-item.active::before{
    content:"";
    position:absolute;
    top:5px;
    left:50%;
    width:46px;
    height:38px;
    transform:translateX(-50%);
    border:1px solid #a4b8f487;
    border-radius:13px;
    background:linear-gradient(145deg,#819bf14a,#9177d52d);
    box-shadow:inset 0 1px 0 #ffffff35,0 6px 15px #0c184354;
  }
  .nav-item .icon,.nav-item span{position:relative;z-index:1}
  .gear,.header-back,.region-btn,.tip-heading>button,.member-level,.member-balance-link{
    background:linear-gradient(145deg,#ffffff1b,#92a8ee0d)!important;
    border:1px solid #a4b7e374!important;
    box-shadow:inset 0 1px 0 #ffffff2d,0 6px 16px #050a1b20;
  }
  .profile-logout,.account-entry-top button{
    background:linear-gradient(145deg,#e98ca52b,#ffffff0b)!important;
    border:1px solid #e8a5b570!important;
    color:#ffc4d0!important;
  }
  .quick-action,.cert-service-list .service-card,.mobile-task-card,.mobile-secondary-links button,.support-channel{
    background:linear-gradient(145deg,#ffffff13,#8299db0c)!important;
    border-color:#9dafdb4f!important;
  }

  .primary:disabled,.secondary:disabled,.outline:disabled,.merchant-blue-btn:disabled,.merchant-main-btn:disabled{opacity:.5;box-shadow:none!important}
  .primary:focus-visible,.secondary:focus-visible,.outline:focus-visible,.merchant-blue-btn:focus-visible,.merchant-main-btn:focus-visible,.grab-dialog-actions button:focus-visible{outline:3px solid #d6e2ff;outline-offset:2px}
}

@media(min-width:900px){
  :where(.primary,.secondary,.outline,.merchant-blue-btn,.merchant-main-btn,.merchant-history>button,.grab-dialog-actions button,.filter,.tip-amounts button,.tip-tabs button,.choice-grid button,.choice-pills button,.subpage-link,.quick-action,.cert-service-list .service-card,.mobile-task-card,.support-channel){
    -webkit-backdrop-filter:blur(16px) saturate(135%);
    backdrop-filter:blur(16px) saturate(135%);
  }
  .primary,.merchant-blue-btn,.merchant-main-btn,.grab-dialog-actions .primary{
    background:linear-gradient(135deg,#8859b63d,#a76cbb26 62%,#7c5fc22e)!important;
    border:1px solid #a97bca9c!important;
    box-shadow:inset 0 1px 0 #ffffffae,0 9px 20px #6c45852d!important;
    color:#53336d!important;
    text-shadow:none;
  }
  .primary:hover,.merchant-blue-btn:hover,.merchant-main-btn:hover,.grab-dialog-actions .primary:hover{background:linear-gradient(135deg,#9a6dc35c,#a97bc446)!important}
  .club-hero-actions .primary,.video-modal .primary{
    background:linear-gradient(135deg,#ffffff3b,#d6c0e528)!important;
    border-color:#ffffffa6!important;
    color:#fff!important;
    text-shadow:0 1px 2px #110a1780;
    box-shadow:inset 0 1px 0 #ffffff80,0 9px 20px #08050d42!important;
  }
  .club-hero-actions .primary:hover,.video-modal .primary:hover{background:linear-gradient(135deg,#ffffff55,#dcc7ec3d)!important}
  .club-hero-actions .primary svg.icon,.video-modal .primary svg.icon{color:#fff}
  .merchant-main-btn.complete{
    background:linear-gradient(135deg,#32afa657,#4bbca33d)!important;
    border-color:#47ad9eb0!important;
    color:#125c5a!important;
  }
  .merchant-main-btn.complete:hover{background:linear-gradient(135deg,#40bcb36d,#5bc6af54)!important}
  .secondary,.outline,.grab-dialog-actions .secondary{
    background:linear-gradient(145deg,#ffffffb3,#f1e8f28c)!important;
    border:1px solid #bba4d0a8!important;
    color:#634878!important;
    box-shadow:inset 0 1px 0 #ffffffd9,0 7px 16px #6950781c!important;
  }
  .merchant-history>button{
    background:linear-gradient(115deg,#ffffffb8,#e6ddf39c)!important;
    border-color:#c8b6ddb8!important;
    box-shadow:inset 0 1px 0 #ffffffd9,0 9px 20px #6950781c!important;
  }
  .merchant-history-leading{background:#cdbce16b}
  .filter,.tip-amounts button,.choice-grid button,.choice-pills button,.subpage-link{background:linear-gradient(145deg,#ffffffbd,#f1e9f4a1)!important;border-color:#d6c4e2!important;color:#62477a!important}
  .filter.active,.tip-amounts button.selected,.choice-grid button.active,.choice-pills button.active,.tip-tabs button.active{background:linear-gradient(135deg,#c7a7e47d,#e1c7ea78)!important;border-color:#b990d8!important;color:#593473!important}
  .nav-item.active{background:#eaddec8c!important;border:1px solid #d7c1df}
  .gear,.header-back,.region-btn,.tip-heading>button,.member-level,.member-balance-link{
    background:linear-gradient(145deg,#ffffffbd,#eadff3a3)!important;
    border:1px solid #d7c3e5a8!important;
  }
  .profile-logout,.account-entry-top button{background:linear-gradient(145deg,#f5d8e488,#ffffffa6)!important;border:1px solid #e6b6c9!important;color:#9d4464!important}
  .quick-action,.cert-service-list .service-card,.mobile-task-card,.support-channel{background:linear-gradient(145deg,#ffffffc7,#f3eafaaf)!important;border-color:#e2d3e9!important}
  .primary svg.icon,.merchant-blue-btn svg.icon,.merchant-main-btn svg.icon{color:currentColor}
}

@media(prefers-reduced-motion:reduce){
  .primary,.secondary,.outline,.merchant-blue-btn,.merchant-main-btn,.grab-dialog-actions button{transition:none}
}