:root {
  --bg:#000;
  --bg2:#1c1c1e;
  --bg3:#2c2c2e;
  --bg4:#3a3a3c;
  --text:#fff;
  --text2:#ebebf5cc;
  --text3:#ebebf54d;
  --blue:#0a84ff;
  --green:#30d158;
  --red:#ff453a;
  --cyan:#64d2ff;
  --orange:#ff9f0a;
  --sep:rgba(84,84,88,.36);
  --cr:14px
}
* {
  box-sizing:border-box;
  margin:0;
  padding:0;
  -webkit-tap-highlight-color:transparent
}
body {
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,system-ui,sans-serif;
  min-height:100vh;
  -webkit-font-smoothing:antialiased
}
.app {
  max-width:480px;
  margin:0 auto;
  padding:0 0 40px
}
.navbar {
  padding:12px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:sticky;
  top:0;
  z-index:10;
  background:rgba(0,0,0,.85);
  -webkit-backdrop-filter:blur(20px);
  backdrop-filter:blur(20px)
}
.nav-title {
  font-size:17px;
  font-weight:600
}
.nav-right {
  display:flex;
  align-items:center;
  gap:10px
}
.nav-dot {
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--green)
}
.nav-dot.off {
  background:var(--bg4)
}
.nav-btn {
  background:none;
  border:none;
  color:var(--blue);
  font-size:22px;
  cursor:pointer;
  padding:4px
}
.bal-card {
  margin:8px 16px 16px;
  background:var(--bg2);
  border-radius:var(--cr);
  padding:16px
}
.bal-label {
  font-size:13px;
  color:var(--text3);
  margin-bottom:4px
}
.bal-val {
  font-size:34px;
  font-weight:700;
  letter-spacing:-.5px
}
.bal-val .cur {
  font-size:20px;
  color:var(--text3);
  font-weight:500
}
.bal-status {
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-top:6px;
  font-size:12px;
  color:var(--green);
  font-weight:500
}
.bal-status::before {
  content:'●';
  font-size:6px
}
.section {
  margin:0 16px 16px
}
.group {
  background:var(--bg2);
  border-radius:var(--cr);
  overflow:hidden
}
.group-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:11px 16px;
  border-bottom:1px solid var(--sep)
}
.group-row:last-child {
  border-bottom:none
}
.group-row-label {
  font-size:15px;
  color:var(--text2)
}
.group-row-value {
  font-size:15px;
  font-weight:500
}
.group-row-value.code {
  color:var(--blue);
  letter-spacing:1px
}
.group-row-value.active-s {
  color:var(--cyan)
}
.group-row-value.done-s {
  color:var(--green)
}
.btn-primary {
  display:block;
  width:100%;
  padding:14px;
  background:var(--blue);
  color:#fff;
  border:none;
  border-radius:var(--cr);
  font-size:17px;
  font-weight:600;
  cursor:pointer;
  text-align:center;
  font-family:inherit
}
.btn-primary:active {
  opacity:.8
}
.btn-primary:disabled {
  opacity:.4
}
.btn-danger {
  background:rgba(255,69,58,.12);
  color:var(--red);
  border:none;
  border-radius:var(--cr);
  padding:14px;
  width:100%;
  font-size:17px;
  font-weight:500;
  cursor:pointer;
  text-align:center;
  font-family:inherit
}
.btn-secondary {
  background:var(--bg2);
  color:var(--text);
  border:none;
  border-radius:var(--cr);
  padding:14px;
  width:100%;
  font-size:17px;
  font-weight:500;
  cursor:pointer;
  text-align:center;
  font-family:inherit
}
.btn-green {
  background:var(--green);
  color:#000;
  border:none;
  border-radius:var(--cr);
  padding:14px;
  width:100%;
  font-size:17px;
  font-weight:600;
  cursor:pointer;
  text-align:center;
  font-family:inherit
}
.btn-stack {
  display:flex;
  flex-direction:column;
  gap:8px;
  margin:0 16px
}
.segment {
  display:flex;
  background:var(--bg3);
  border-radius:9px;
  padding:2px;
  margin-bottom:16px
}
.seg-btn {
  flex:1;
  padding:8px;
  border:none;
  border-radius:7px;
  background:transparent;
  color:var(--text3);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  font-family:inherit;
  transition:.2s
}
.seg-btn.active {
  background:var(--bg4);
  color:var(--text);
  box-shadow:0 1px 4px rgba(0,0,0,.3)
}
.tabs {
  display:flex;
  background:var(--bg3);
  border-radius:9px;
  padding:2px;
  margin:0 16px 12px
}
.tab {
  flex:1;
  padding:8px;
  border:none;
  border-radius:7px;
  background:transparent;
  color:var(--text3);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  font-family:inherit;
  transition:.2s;
  text-align:center
}
.tab.active {
  background:var(--bg4);
  color:var(--text);
  box-shadow:0 1px 4px rgba(0,0,0,.3)
}
.tab .cnt {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px;
  height:18px;
  padding:0 5px;
  background:var(--bg4);
  border-radius:9px;
  font-size:11px;
  margin-left:4px
}
.tab.active .cnt {
  background:rgba(255,255,255,.15)
}
.card-list {
  padding:0 16px
}
.req-card {
  background:var(--bg2);
  border-radius:var(--cr);
  padding:14px 16px;
  margin-bottom:8px;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition:transform .1s
}
.req-card:active {
  transform:scale(.98)
}
.req-card::before {
  content:'';
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px
}
.req-card.give::before {
  background:var(--green)
}
.req-card.take::before {
  background:var(--cyan)
}
.req-card.done-card {
  opacity:.5
}
.req-card.done-card::before {
  background:var(--bg4)
}
.rh {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:8px
}
.rbadge {
  padding:3px 8px;
  border-radius:6px;
  font-size:11px;
  font-weight:600
}
.rbadge.give {
  background:rgba(48,209,88,.15);
  color:var(--green)
}
.rbadge.take {
  background:rgba(100,210,255,.15);
  color:var(--cyan)
}
.rbadge.done-b {
  background:var(--bg3);
  color:var(--text3)
}
.rid {
  font-size:13px;
  color:var(--text3);
  font-weight:500
}
.ramt {
  font-size:28px;
  font-weight:700;
  margin-bottom:8px;
  letter-spacing:-.5px
}
.ramt span {
  font-size:17px;
  color:var(--text3);
  font-weight:500
}
.rppl {
  display:flex;
  flex-direction:column;
  gap:4px
}
.rperson {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  color:var(--text2)
}
.rlbl {
  font-size:12px;
  color:var(--text3);
  min-width:50px
}
.rname {
  font-weight:500;
  color:var(--text)
}
.rfoot {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid var(--sep)
}
.rcode {
  font-size:13px;
  color:var(--blue);
  font-weight:600;
  letter-spacing:1px
}
.rcomment {
  font-size:13px;
  color:var(--text3);
  font-style:italic;
  max-width:50%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.rdone-tag {
  font-size:12px;
  color:var(--green);
  font-weight:500
}
.detail-amount {
  text-align:center;
  padding:20px;
  background:var(--bg2);
  border-radius:var(--cr);
  margin:0 16px 16px
}
.detail-amount-label {
  font-size:13px;
  color:var(--text3);
  margin-bottom:4px
}
.detail-amount-val {
  font-size:44px;
  font-weight:700;
  letter-spacing:-1px
}
.detail-amount-val.give {
  color:var(--green)
}
.detail-amount-val.take {
  color:var(--cyan)
}
.detail-amount-val span {
  font-size:24px;
  color:var(--text3);
  font-weight:500
}
.form-section {
  margin:0 16px 16px
}
.form-group {
  background:var(--bg2);
  border-radius:var(--cr);
  overflow:hidden;
  margin-bottom:16px
}
.form-field {
  padding:0 16px;
  border-bottom:1px solid var(--sep)
}
.form-field:last-child {
  border-bottom:none
}
.form-field label {
  display:block;
  font-size:12px;
  color:var(--text3);
  padding-top:10px
}
.form-field input,.form-field select,.form-field textarea {
  width:100%;
  background:transparent;
  border:none;
  color:var(--text);
  font-size:17px;
  font-family:inherit;
  padding:4px 0 10px;
  outline:none;
  -webkit-appearance:none
}
.form-field input::placeholder,.form-field textarea::placeholder {
  color:var(--text3)
}
.form-field select {
  padding:6px 0 10px
}
.form-field select option {
  background:var(--bg2);
  color:var(--text)
}
.form-field textarea {
  resize:none;
  height:60px
}
.manual-row {
  display:flex;
  gap:8px;
  padding:0 0 10px
}
.manual-row input {
  flex:1;
  background:var(--bg3);
  border:none;
  border-radius:8px;
  padding:10px 12px;
  color:var(--text);
  font-size:15px;
  font-family:inherit;
  outline:none
}
.manual-row button {
  background:var(--blue);
  border:none;
  border-radius:8px;
  color:#fff;
  padding:10px 16px;
  font-size:15px;
  font-weight:600;
  cursor:pointer
}
.ctr-field {
  position:relative
}
.ctr-drop {
  background:var(--bg3);
  border-radius:10px;
  max-height:180px;
  overflow-y:auto;
  z-index:20;
  display:none;
  box-shadow:0 4px 16px rgba(0,0,0,.3);
  margin-top:-8px;
  margin-bottom:12px
}
.ctr-drop.open {
  display:block
}
.ctr-opt {
  padding:12px 16px;
  font-size:16px;
  color:var(--text);
  cursor:pointer;
  border-bottom:1px solid var(--sep)
}
.ctr-opt:last-child {
  border-bottom:none
}
.ctr-opt:active {
  background:var(--bg4)
}
.screen {
  display:none
}
.screen.show {
  display:block;
  animation:fadeIn .2s
}
@keyframes fadeIn {
  from {
    opacity:0
  }
  to {
    opacity:1
  }
}
.back-btn {
  background:none;
  border:none;
  color:var(--blue);
  font-size:15px;
  font-weight:500;
  cursor:pointer;
  padding:12px 16px;
  font-family:inherit;
  display:flex;
  align-items:center;
  gap:4px
}
.empty {
  text-align:center;
  padding:40px 16px;
  color:var(--text3)
}
.empty-ico {
  font-size:40px;
  margin-bottom:10px;
  opacity:.4
}
.empty-txt {
  font-size:14px
}
.spinner {
  width:24px;
  height:24px;
  margin:0 auto 8px;
  border:2px solid var(--bg3);
  border-top-color:var(--blue);
  border-radius:50%;
  animation:spin .7s linear infinite
}
@keyframes spin {
  to {
    transform:rotate(360deg)
  }
}
.loading {
  text-align:center;
  padding:40px;
  color:var(--text3);
  font-size:13px
}
.toast {
  position:fixed;
  bottom:30px;
  left:50%;
  transform:translateX(-50%);
  background:var(--bg3);
  border-radius:14px;
  padding:12px 24px;
  font-size:15px;
  font-weight:500;
  z-index:200;
  pointer-events:none;
  opacity:0;
  transition:opacity .3s;
  -webkit-backdrop-filter:blur(20px);
  backdrop-filter:blur(20px)
}
.toast.show {
  opacity:1
}
.modal-bg {
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.5);
  z-index:100;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px)
}
.modal-bg.hidden {
  display:none
}
.modal {
  background:var(--bg2);
  border-radius:14px 14px 0 0;
  padding:20px;
  width:100%;
  max-width:480px;
  animation:slideUp .25s
}
@keyframes slideUp {
  from {
    transform:translateY(100%)
  }
  to {
    transform:translateY(0)
  }
}
.modal-title {
  font-size:17px;
  font-weight:600;
  margin-bottom:8px
}
.modal-text {
  font-size:15px;
  color:var(--text2);
  margin-bottom:20px;
  white-space:pre-wrap
}
.modal-btns {
  display:flex;
  gap:8px
}
.modal-btns button {
  flex:1;
  padding:14px;
  border:none;
  border-radius:var(--cr);
  font-size:17px;
  font-weight:500;
  cursor:pointer;
  font-family:inherit
}
/* PIN iOS style */ .pin-screen {
  display:flex;
  flex-direction:column;
  align-items:center;
  padding-top:25vh
}
.pin-dots {
  display:flex;
  gap:14px;
  margin:20px 0 12px
}
.pin-dot {
  width:14px;
  height:14px;
  border-radius:50%;
  border:1.5px solid var(--text3);
  transition:all .15s
}
.pin-dot.filled {
  background:var(--text);
  border-color:var(--text)
}
.pin-dot.error {
  border-color:var(--red);
  background:var(--red)
}
.pin-hidden {
  position:absolute;
  left:-9999px;
  opacity:0;
  width:1px;
  height:1px
}
.pin-error-text {
  color:var(--red);
  font-size:13px;
  height:18px;
  margin-top:4px
}
.pin-loading {
  margin-top:12px
}
@keyframes shake {
  0%,100% {
    transform:translateX(0)
  }
  20%,60% {
    transform:translateX(-8px)
  }
  40%,80% {
    transform:translateX(8px)
  }
}
.pin-dots.shake {
  animation:shake .4s ease
}
/* Keyboard toolbar */ .kb-toolbar {
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  z-index:50;
  background:var(--bg3);
  border-top:1px solid var(--sep);
  padding:8px 16px;
  display:none;
  justify-content:flex-end;
  -webkit-backdrop-filter:blur(20px);
  backdrop-filter:blur(20px)
}
.kb-toolbar.show {
  display:flex
}
.kb-done {
  background:none;
  border:none;
  color:var(--blue);
  font-size:17px;
  font-weight:600;
  cursor:pointer;
  padding:4px 8px;
  font-family:inherit
}