#s-settle{
  padding:0 0 calc(140px + env(safe-area-inset-bottom));
  background:transparent;
}

#s-settle .settleHeader{
  position:sticky;
  top:0;
  z-index:14;
  margin:0;
  padding:8px 0 10px;
  display:grid;
  grid-template-columns:44px minmax(0, 1fr) 44px;
  align-items:center;
  gap:10px;
  background:transparent;
  border-bottom:0;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

#s-settle .settleHeaderBtn{
  width:44px;
  height:44px;
}

#s-settle .settleHeaderTitle{
  margin:0;
  text-align:center;
  font-size:20px;
  line-height:1.1;
  font-weight:700;
  color:var(--title);
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
}

#s-settle .settlePage{
  padding:14px var(--pagePadding) 0;
  display:flex;
  flex-direction:column;
  gap:16px;
}

#s-settle .no-scrollbar{
  scrollbar-width:none;
}

#s-settle .no-scrollbar::-webkit-scrollbar{
  display:none;
}

#s-settle .settleSection{
  display:flex;
  flex-direction:column;
  gap:10px;
}

#s-settle .settleSectionHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

#s-settle .settleSectionLabel{
  margin:0;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:rgba(210,191,236,0.74);
}

#s-settle .settleLinkBtn{
  height:30px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(168,141,205,0.38);
  background:rgba(88,66,119,0.28);
  color:rgba(224,209,247,0.9);
  font-size:12px;
  font-weight:600;
}

#s-settle .settleCard{
  margin:0;
  padding:14px;
  border-radius:24px;
  border:1px solid rgba(159,126,197,0.3);
  background:rgba(49,35,70,0.95);
  box-shadow:0 14px 26px rgba(8,5,13,0.24), inset 0 1px 0 rgba(255,255,255,0.04);
}

#s-settle .settleList{
  display:flex;
  flex-direction:column;
  gap:10px;
}

#s-settle .settleNetRow{
  border-radius:18px;
  border:1px solid rgba(154,122,190,0.28);
  background:rgba(41,28,59,0.8);
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:9px;
}

#s-settle .settleNetTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

#s-settle .settleNetIdentity{
  min-width:0;
  flex:1;
  display:flex;
  align-items:center;
  gap:10px;
}

#s-settle .settleAvatar{
  width:38px;
  height:38px;
  flex:0 0 38px;
  border-radius:50%;
  border:1px solid rgba(173,140,212,0.44);
  background:rgba(126,95,164,0.42);
  color:rgba(236,226,252,0.95);
  font-size:12px;
  font-weight:700;
  display:grid;
  place-items:center;
}

#s-settle .settleAvatar--image{
  overflow:hidden;
  background:rgba(212,202,240,0.22);
}

#s-settle .settleAvatar--image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

#s-settle .settleNetMeta{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}

#s-settle .settleNetName{
  font-size:14px;
  line-height:1.2;
  font-weight:700;
  color:var(--title);
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
}

#s-settle .settleNetStatus{
  font-size:11px;
  line-height:1.2;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:rgba(197,178,223,0.76);
}

#s-settle .settleNetAmountWrap{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding-top:2px;
  flex:0 0 auto;
}

#s-settle .settleNetTrend{
  width:20px;
  height:20px;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-size:12px;
  font-weight:700;
}

#s-settle .settleNetAmount{
  font-size:18px;
  line-height:1;
  font-weight:700;
  white-space:nowrap;
}

#s-settle .settleNetRow.is-positive .settleNetAmount,
#s-settle .settleNetRow.is-positive .settleNetTrend{
  color:rgba(129,230,190,0.98);
}

#s-settle .settleNetRow.is-positive .settleNetTrend{
  background:rgba(65,149,119,0.2);
  border:1px solid rgba(113,220,179,0.38);
}

#s-settle .settleNetRow.is-negative .settleNetAmount,
#s-settle .settleNetRow.is-negative .settleNetTrend{
  color:rgba(255,177,195,0.98);
}

#s-settle .settleNetRow.is-negative .settleNetTrend{
  background:rgba(160,72,97,0.2);
  border:1px solid rgba(234,123,152,0.36);
}

#s-settle .settleNetRow.is-neutral .settleNetAmount,
#s-settle .settleNetRow.is-neutral .settleNetTrend{
  color:rgba(201,184,226,0.86);
}

#s-settle .settleNetRow.is-neutral .settleNetTrend{
  background:rgba(96,78,126,0.22);
  border:1px solid rgba(170,145,206,0.32);
}

#s-settle .settleBreakdown{
  padding-left:48px;
  display:flex;
  flex-direction:column;
  gap:5px;
}

#s-settle .settleBreakLine{
  min-width:0;
  display:flex;
  align-items:flex-start;
  gap:8px;
}

#s-settle .settleBreakDot{
  width:6px;
  height:6px;
  flex:0 0 6px;
  border-radius:50%;
  margin-top:6px;
  background:rgba(190,163,223,0.82);
}

#s-settle .settleBreakText{
  min-width:0;
  font-size:12px;
  line-height:1.35;
  color:rgba(213,197,238,0.86);
}

#s-settle .settleBreakText strong{
  font-weight:700;
  color:var(--title);
}

#s-settle .settlePayRow{
  border-radius:16px;
  border:1px solid rgba(154,122,190,0.28);
  background:rgba(40,27,57,0.78);
  padding:12px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

#s-settle .settlePayMain{
  min-width:0;
  flex:1;
  display:flex;
  flex-direction:column;
  gap:4px;
}

#s-settle .settlePayRoute{
  min-width:0;
  font-size:14px;
  line-height:1.2;
  font-weight:700;
  color:var(--title);
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
}

#s-settle .settlePayMeta{
  font-size:12px;
  line-height:1.2;
  color:rgba(197,178,223,0.72);
}

#s-settle .settlePayRight{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:auto;
}

#s-settle .settlePayAmount{
  font-size:15px;
  line-height:1;
  font-weight:700;
  color:var(--title);
  white-space:nowrap;
}

#s-settle .settlePayAmount.is-zero{
  color:rgba(191,173,219,0.66);
}

#s-settle .settlePayBtn{
  min-width:66px;
  height:32px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(165,137,202,0.48);
  background:rgba(79,57,108,0.45);
  color:rgba(232,219,252,0.95);
  font-size:12px;
  font-weight:600;
}

#s-settle .settlePayRow.is-settled{
  opacity:0.88;
}

#s-settle .settlePayBtn.is-off,
#s-settle .settlePayBtn:disabled{
  border-color:rgba(151,124,187,0.3);
  background:rgba(70,50,95,0.36);
  color:rgba(196,178,223,0.72);
}

#s-settle .settleCompleteChip{
  min-width:72px;
  height:30px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(153,125,190,0.34);
  background:rgba(64,46,88,0.62);
  color:rgba(206,189,231,0.88);
  font-size:12px;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

#s-settle .settleMicrocopy{
  margin:2px 4px 0;
  text-align:center;
  font-size:12px;
  line-height:1.35;
  color:rgba(196,177,222,0.7);
}

#s-settle .settleHint{
  padding:8px;
  border-radius:14px;
  border:1px solid rgba(150,121,185,0.2);
  background:rgba(44,30,62,0.6);
  color:rgba(200,182,225,0.78);
  font-size:12px;
  text-align:center;
}

#s-settle .settleAllFab{
  position:fixed;
  z-index:25;
  right:max(16px, calc((100vw - 420px) / 2 + 16px));
  bottom:calc(92px + env(safe-area-inset-bottom));
  height:42px;
  padding:0 14px;
  border:1px solid rgba(165,137,202,0.46);
  border-radius:999px;
  background:rgba(79,57,108,0.45);
  color:rgba(232,219,252,0.95);
  font-size:13px;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:7px;
  box-shadow:0 8px 18px rgba(20,12,31,0.22);
}

#s-settle .settleAllFab .uiIcon{
  background-color:currentColor;
}

#s-settle .settleAllFab.is-complete{
  border-color:rgba(149,124,181,0.36);
  background:rgba(70,50,95,0.34);
  color:rgba(206,189,231,0.84);
  box-shadow:none;
}

#s-settle .settleAllFab:disabled{
  opacity:1;
  cursor:default;
}

@media (max-width: 430px){
  #s-settle{
    padding-bottom:calc(136px + env(safe-area-inset-bottom));
  }

  #s-settle .settleHeader{
    margin:0;
    padding:7px 0 9px;
  }

  #s-settle .settleHeaderTitle{
    font-size:18px;
  }

  #s-settle .settlePage{
    padding:12px 14px 0;
    gap:14px;
  }

  #s-settle .settleSection{
    gap:9px;
  }

  #s-settle .settleCard{
    padding:12px;
    border-radius:20px;
  }

  #s-settle .settleNetRow,
  #s-settle .settlePayRow{
    padding:10px;
  }

  #s-settle .settleAvatar{
    width:34px;
    height:34px;
    flex-basis:34px;
    font-size:11px;
  }

  #s-settle .settleBreakdown{
    padding-left:44px;
  }

  #s-settle .settleNetAmount{
    font-size:16px;
  }

  #s-settle .settlePayBtn{
    min-width:62px;
    height:30px;
    font-size:12px;
    padding:0 10px;
  }

  #s-settle .settleAllFab{
    right:14px;
    bottom:calc(88px + env(safe-area-inset-bottom));
    height:40px;
    padding:0 13px;
    font-size:12px;
  }
}

@media (max-width: 360px){
  #s-settle .settlePayRight{
    gap:8px;
  }

  #s-settle .settlePayAmount{
    font-size:13px;
  }

  #s-settle .settlePayBtn{
    min-width:58px;
    padding:0 10px;
  }

  #s-settle .settleBreakText{
    font-size:11px;
  }
}