:root{
  --ks-orange:#ff6a00;
  --ks-orange2:#ff8a2a;
  --card-w: 520px;
}

body{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC","Hiragino Sans GB","Microsoft YaHei", Arial, sans-serif;
  background:#f5f6f8;
}

.topbar{
  height:64px;
  background:#fff;
  border-bottom:1px solid #eee;
  position:sticky;
  top:0;
  z-index:10;
}

/* 让导航文字整体略靠下，贴近截图视觉 */
.topbar .brand,
.topbar nav{
  position: relative;
  top: 8px;
}

/* 让导航栏整体别贴边：更接近截图的居中布局 */
.topbar-inner{
  max-width: 1180px;
  padding-left: 18px;
  padding-right: 18px;
}

.brand-logo{
  height:28px;
  width:auto;
}
.brand-title{
  font-size:20px;
  font-weight:700;
  color:#ff6a00;
  letter-spacing: .5px;
}

.navpill{
  text-decoration:none;
  padding:8px 16px;
  border-radius:999px;
  color:#333;
  font-weight:600;
}
.navpill.active{
  background: #ffe8d8;
  color: var(--ks-orange);
}

.page{
  position:relative;
  min-height: calc(100vh - 64px);
  padding: 36px 0 80px;
  overflow:hidden;
}

.bg-layer{
  position:absolute;
  inset:0;
  background: radial-gradient(1200px 500px at 25% 10%, rgba(255,106,0,.10), transparent 60%),
              radial-gradient(900px 400px at 75% 25%, rgba(255,138,42,.10), transparent 60%);
  pointer-events:none;
}

.apply-card{
  width: min(var(--card-w), 94vw);
  border-radius: 10px;
  background: #fff;
  overflow:hidden;
  border:1px solid #f0f0f0;
}

.apply-title{
  background: linear-gradient(180deg, var(--ks-orange2), var(--ks-orange));
  color:#fff;
  font-size: 26px;
  font-weight: 800;
  text-align:center;
  padding: 26px 16px;
}

.form-label{
  font-weight:700;
  color:#333;
}

.form-label-icon .i-dot{ color: var(--ks-orange); margin-right:8px; }
.form-label-icon .i-pin{ margin-right:8px; }
.form-label-icon .i-phone{ margin-right:8px; }

.form-control-lg{
  border-radius: 10px;
  padding: 14px 14px;
}

.amount-pills{
  display:flex;
  gap:10px;
}

.amount-pill{
  flex:1;
  border:1px solid #e9e9e9;
  background:#fff;
  border-radius: 8px;
  padding: 10px 8px;
  font-weight:800;
  color: var(--ks-orange);
  line-height:1.1;
}
.amount-pill small{ font-weight:700; color:#666; }
.amount-pill.active{
  border-color: var(--ks-orange);
  box-shadow: 0 0 0 3px rgba(255,106,0,.12);
}

.btn-apply{
  background: linear-gradient(180deg, var(--ks-orange2), var(--ks-orange));
  color:#fff;
  font-weight:800;
  border: none;
  border-radius: 10px;
  padding: 14px 18px;
}
.btn-apply:hover{ filter: brightness(0.98); color:#fff; }

/* 飘过的到账提示（参考你给的网址：从左往右穿屏而过） */
.floating-notifications{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
  z-index: 999;
  overflow: hidden;
}

.notification-item{
  position: absolute;
  left: 0;
  background: linear-gradient(180deg, var(--ks-orange2), var(--ks-orange));
  color: white;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 800;
  box-shadow: 0 10px 22px rgba(255,106,0,.18);
  opacity: 0;
  transform: translateX(-100%);
  white-space: nowrap;
}

/* 默认隐藏，通过 JS 加 show 后开始动画 */
.notification-item.show{
  animation: float-across 15s linear infinite;
}

.notification-item:nth-child(1){ top: 15%; }
.notification-item:nth-child(2){ top: 25%; }
.notification-item:nth-child(3){ top: 35%; }
.notification-item:nth-child(4){ top: 45%; }
.notification-item:nth-child(5){ top: 55%; }
.notification-item:nth-child(6){ top: 65%; }
.notification-item:nth-child(7){ top: 75%; }
.notification-item:nth-child(8){ top: 85%; }

@keyframes float-across{
  0%{ transform: translateX(-100%); opacity: 0; }
  10%{ opacity: 1; }
  90%{ opacity: 1; }
  100%{ transform: translateX(100vw); opacity: 0; }
}

@media (max-width: 768px){
  .notification-item{ font-size: 0.82rem; padding: 6px 12px; }
  .notification-item.show{ animation-duration: 12s; }
}

@media (max-width: 900px){
  /* 移动端也显示飘过提示，但更小一点 */
  .notification-item{ font-size: 0.78rem; padding: 6px 12px; }
  .notification-item.show{ animation-duration: 12s; }
}

/* 更适配手机的小尺寸布局 */
@media (max-width: 576px){
  .page{ padding: 12px 0 40px; }

  .topbar{ height: 52px; }
  .topbar-inner{ padding-left: 12px; padding-right: 12px; }
  .topbar .brand,
  .topbar nav{ top: 4px; }
  .brand-logo{ height: 22px; }
  .brand-title{ font-size: 15px; }

  .apply-card{ border-radius: 12px; }
  .apply-title{
    font-size: 18px;
    padding: 16px 12px;
  }

  .p-4{ padding: 14px !important; }
  .p-md-5{ padding: 14px !important; }

  .form-label{ font-size: 14px; }

  .form-control-lg{
    padding: 10px 11px;
    border-radius: 10px;
    font-size: 15px;
  }

  .amount-pill{ padding: 8px 6px; font-size: 14px; }
  .amount-pill small{ font-size: 12px; }

  .btn-apply{ padding: 12px 16px; font-size: 16px; }

  .ks-upload-box{ width: 132px; border-radius: 12px; }
  .ks-upload-plus{ font-size: 36px; }
  .ks-upload-hint{ font-size: 12px; }
}

/* 收款码上传：正方形“+”框 */
.ks-upload-input{
  display:none;
}

.ks-upload-center{
  display:flex;
  justify-content:center;
}

.ks-upload-box{
  position: relative;
  width: 180px;           /* 方框尺寸，可按你要的改 */
  aspect-ratio: 1 / 1;
  border: 2px dashed #d7deea;
  border-radius: 12px;
  background: #fafbff;
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  gap: 6px;
  cursor:pointer;
  user-select:none;
  overflow:hidden;
  transition: border-color .15s ease, background .15s ease;
}

.ks-upload-box:hover{
  border-color: rgba(255,106,0,.55);
  background: #fff7f0;
}

.ks-upload-plus{
  font-size: 46px;
  line-height: 1;
  font-weight: 300;
  color: #8a93a5;
}

.ks-upload-hint{
  font-size: 13px;
  color: #8a93a5;
  font-weight: 700;
}

.ks-upload-preview{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: contain;    /* 收款码建议 contain，避免裁切 */
  background:#fff;
  display:none;
}

.ks-upload-box.has-image .ks-upload-plus,
.ks-upload-box.has-image .ks-upload-hint{
  display:none;
}

.ks-upload-box.has-image .ks-upload-preview{
  display:block;
}