:root{--ink:#202124;--soft:#eef0f4;--nav:#f6f6f8;--grid:#dfe3e8;--price:#dfe2e8;--page:#fff}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#000;color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased}
body{min-height:100vh}
button,input{font:inherit}

/* iPhone status bar */
.ios-status{position:fixed;top:0;left:50%;transform:translateX(-50%);width:min(720px,100vw);height:62px;z-index:120;pointer-events:none;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:7px 18px 0;color:#111}
.ios-time{font-size:18px;line-height:1;font-weight:700;letter-spacing:-.35px;min-width:52px}
.dynamic-island{position:absolute;left:50%;top:8px;transform:translateX(-50%);width:180px;height:42px;border-radius:24px;background:#000;border:1px solid #111;box-shadow:0 1px 7px rgba(0,0,0,.35)}
.ios-right{display:flex;align-items:center;height:28px;padding-right:0}.ios-icons{display:flex;align-items:center;gap:7px;height:24px}
.ios-signal{width:22px;height:18px;object-fit:contain}.ios-wifi{width:23px;height:18px;object-fit:contain}.ios-battery-static{width:39px;height:19px;object-fit:contain}
.has-status{padding-top:62px;background:#000}

.app{width:100%;max-width:720px;min-height:100vh;margin:auto;background:#fff;overflow:hidden}
.topbar{height:76px;display:flex;align-items:center;padding:0 18px;background:rgba(246,246,248,.98);position:sticky;top:0;z-index:20;border:0}
.top-close{width:48px;height:48px;border:0;border-radius:50%;background:#f1f2f4;font-size:38px;line-height:44px;font-weight:300;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#111}
.balance{display:flex;align-items:center;gap:7px;font-size:25px;font-weight:800;margin-left:12px;letter-spacing:-.5px}.logo{width:28px;height:28px;object-fit:contain;display:block}
.send{margin-left:auto;border:0;background:#e1e3e8;border-radius:14px;padding:12px 18px;font-weight:750;color:#202124;font-size:17px;white-space:nowrap}

/* Main upper canvas. The grid is one continuous layer and ends before packs. */
.shop{position:relative;padding:0 38px 52px;background:#fff;overflow:hidden}
.shop-grid{position:absolute;z-index:0;left:0;right:0;top:0;height:480px;pointer-events:none;overflow:hidden;opacity:.72}
.shop-grid svg{position:absolute;width:118%;height:100%;left:-9%;top:0}
.shop-content{position:relative;z-index:1;padding-top:28px}
.shop h1{font-size:48px;line-height:1.02;margin:0 0 78px;font-weight:850;letter-spacing:-2px}
.section-title{display:flex;justify-content:space-between;gap:14px;align-items:center;margin-bottom:22px}
.section-title h2{font-size:25px;line-height:1.13;margin:0;font-weight:850;letter-spacing:-.5px;max-width:70%}

.feature{background:#eef0f4;border-radius:23px;overflow:hidden;margin-bottom:64px}
.crown-area{height:350px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#eef0f4}
.crown-video{width:350px;height:310px;object-fit:contain;display:block}
.feature-info{padding:18px 28px 25px}.feature-name{font-size:20px;font-weight:850;letter-spacing:-.25px}.brand{font-size:16px;margin-top:7px}.verified{display:inline-flex;width:21px;height:21px;border-radius:2px;background:#1987ff;color:#fff;align-items:center;justify-content:center;font-weight:900;font-size:14px;vertical-align:-2px;margin-left:2px}
.price-row{display:flex;justify-content:space-between;align-items:center;padding:16px 28px;background:#dfe2e9}.robux-price{display:flex;align-items:center;gap:9px;font-size:31px;font-weight:850;letter-spacing:-1px}.cop{background:#d0d3dc;border-radius:12px;padding:13px 20px;font-size:18px;font-weight:750}
.packs-wrap{position:relative;z-index:1;background:#fff;margin:0 -38px;padding:0 38px 50px}.packs-title{font-size:25px;margin:0 0 14px;font-weight:850;letter-spacing:-.6px}.terms{font-size:15px;line-height:1.45;color:#333;margin-bottom:25px;max-width:100%}
.packs{border:1px solid #e0e1e5;border-radius:23px;padding:8px 28px;background:#fff}.pack{display:flex;justify-content:space-between;align-items:center;padding:18px 0}.pack:last-child{padding-bottom:18px}.pack-amount{display:flex;align-items:center;gap:10px;font-size:27px;font-weight:850;letter-spacing:-.8px}.pack-price{background:#e0e2e8;border-radius:12px;padding:14px 22px;min-width:180px;text-align:center;font-size:17px;font-weight:750}

/* iOS-style bottom sheet */
.overlay{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.43);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s linear .25s}.overlay.open{opacity:1;visibility:visible;transition:opacity .25s ease}
.sheet{position:absolute;left:0;right:0;bottom:0;width:100%;max-width:720px;margin:auto;background:#fff;border-radius:25px 25px 0 0;min-height:55vh;max-height:94vh;overflow:hidden;display:flex;flex-direction:column;transform:translateY(105%);transition:transform .40s cubic-bezier(.2,.9,.2,1);padding-bottom:env(safe-area-inset-bottom)}.overlay.open .sheet{transform:translateY(0)}
.handle{width:43px;height:5px;background:#d7d8dc;border-radius:20px;margin:10px auto 5px;flex:0 0 auto}.sheet-head{display:flex;justify-content:space-between;align-items:center;padding:12px 22px 13px;flex:0 0 auto}.sheet-title{display:flex;align-items:center;gap:8px;font-size:20px;font-weight:850}.sheet-title img{width:25px;height:25px}.sheet-balance{display:flex;align-items:center;gap:7px;font-size:17px;font-weight:800}.sheet-balance img{width:22px;height:22px}.sheet-body{border-top:1px solid #eee;overflow:auto;min-height:0;overscroll-behavior:contain}.step{display:none;padding:18px 20px 18px}.step.active{display:block}
.search-input{width:100%;height:49px;border:1.5px solid #8aa5db;border-radius:10px;outline:0;padding:0 13px;font-size:17px}.search-results{margin-top:9px;border-radius:13px;overflow:hidden;background:#f7f7f8}.search-result{width:100%;border:0;border-bottom:1px solid #e6e6e8;background:#fff;padding:11px 13px;display:flex;gap:12px;align-items:center;text-align:left;cursor:pointer}.search-result:last-child{border-bottom:0}.search-result img{width:42px;height:42px;border-radius:50%;object-fit:cover;background:#eee}.sr-name{font-size:15px;font-weight:750}.sr-user{font-size:12px;color:#777;margin-top:2px}.friends-title{font-size:21px;font-weight:800;margin:26px 0 12px}.friend-row{display:flex;align-items:center;gap:12px;padding:8px 2px}.friend-row img{width:39px;height:39px;border-radius:50%;object-fit:cover;background:#eee}.friend-name{font-size:16px}
.amount{padding-top:12px}.amount-top{display:flex;justify-content:flex-end;align-items:center;font-size:17px;font-weight:800}.recipient{text-align:center;padding:31px 0 12px}.recipient img{width:76px;height:76px;border-radius:50%;object-fit:cover;background:#eee;display:block;margin:auto}.recipient-name{font-size:22px;font-weight:750;margin-top:10px}.amount-display{display:flex;justify-content:center;align-items:center;gap:8px;margin:5px 0 17px}.amount-display img{width:37px;height:37px}.amount-input{width:1.05em;border:0;outline:0;background:transparent;font-size:53px;line-height:1;font-weight:850;text-align:left;padding:0;flex:0 0 auto}.amount-input::placeholder{color:#202124;opacity:1}.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:11px}.quick button{height:57px;border:0;border-radius:12px;background:#e3e4e8;font-size:16px;font-weight:750;display:flex;align-items:center;justify-content:center;gap:5px}.quick img{width:18px;height:18px}.primary{width:100%;height:61px;border:0;border-radius:12px;background:#3155f5;color:#fff;font-size:18px;font-weight:800;margin-top:15px}.primary:disabled{background:#9db4ff;color:#fff}.note{text-align:center;color:#92949a;font-size:13px;margin-top:10px}.secondary{width:100%;border:0;background:transparent;font-weight:750;padding:11px}
.confirm-card{background:#f0f0f2;border-radius:12px;text-align:center;padding:28px 16px 25px}.confirm-card img{width:76px;height:76px;border-radius:50%;object-fit:cover}.confirm-name{font-size:18px;font-weight:800;margin-top:9px}.confirm-handle{font-size:14px;color:#777;margin-top:3px}.confirm-meta{display:flex;justify-content:center;gap:20px;color:#686b72;font-size:14px;margin-top:22px;flex-wrap:wrap}.confirm-sub{margin-top:12px;color:#686b72;font-size:14px}.confirm-robux{margin-top:23px;background:#f0f0f2;border-radius:12px;text-align:center;padding:35px 10px 29px}.confirm-robux .big{display:flex;justify-content:center;align-items:center;gap:8px;font-size:46px;font-weight:900}.confirm-robux img{width:39px;height:39px}.confirm-robux p{margin:11px 0 0;color:#666;font-size:14px}.confirm-actions{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:15px}.confirm-actions button{height:61px;border-radius:12px;border:0;font-size:18px;font-weight:800}.confirm-send{background:#3155f5;color:#fff}.confirm-edit{background:#dedfe2;color:#222}.confirm-warning{text-align:center;color:#888;font-size:12px;line-height:1.35;margin:13px 8px}.success{text-align:center;padding:65px 15px 22px}.success-icon{width:66px;height:66px;border:2px solid #777;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 13px;font-size:37px;color:#555}.success p{font-size:18px;font-weight:750}
.virtual-keyboard{position:fixed;left:50%;bottom:0;transform:translate(-50%,110%);width:min(720px,100vw);background:#d5d8dc;padding:6px 7px 10px;z-index:100;opacity:0;visibility:hidden;pointer-events:none;transition:transform .30s ease,opacity .20s ease,visibility 0s linear .30s;box-shadow:0 -2px 14px rgba(0,0,0,.20)}.virtual-keyboard.open{transform:translate(-50%,0);opacity:1;visibility:visible;pointer-events:auto;transition:transform .30s cubic-bezier(.2,.85,.25,1),opacity .18s ease}.vk-bar{height:22px;display:flex;align-items:center;justify-content:center;font-size:12px;color:#666;font-weight:600}.vk-row{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:4px 0}.vk-key{height:55px;border:0;border-radius:7px;background:#f7f7f8;color:#111;font-size:24px;box-shadow:0 1px 1px rgba(0,0,0,.28);cursor:pointer}.vk-key:active{background:#c5c8cc}.vk-key.pressed{background:#b6bac0;transform:scale(.985);box-shadow:inset 0 1px 2px rgba(0,0,0,.16)}.vk-key.action{background:#bbc0c5;font-size:22px;font-weight:500}.vk-key.blue{background:#147ef5;color:#fff;font-size:16px;font-weight:700;grid-column:1 / -1}
.keyboard-open .sheet{max-height:calc(100vh - 4px);bottom:0}.keyboard-open .sheet-body{max-height:calc(100vh - 150px);padding-bottom:max(18px,env(safe-area-inset-bottom))}

@media(max-width:560px){
  .ios-status{height:54px;padding:7px 13px 0}.dynamic-island{width:154px;height:37px;top:6px}.ios-time{font-size:17px}.ios-signal{width:18px;height:15px}.ios-wifi{width:19px;height:15px}.ios-battery-static{width:32px;height:16px}.ios-icons{gap:5px}.has-status{padding-top:54px}
  .topbar{height:70px;padding:0 12px}.top-close{width:47px;height:47px;font-size:35px}.balance{font-size:23px;margin-left:10px}.balance .logo{width:27px;height:27px}.send{padding:11px 15px;font-size:16px;border-radius:13px}
  .shop{padding:0 18px 35px}.shop-grid{height:450px}.shop-grid svg{width:150%;left:-25%}.shop-content{padding-top:25px}.shop h1{font-size:43px;margin-bottom:73px;letter-spacing:-1.8px}.section-title{margin-bottom:20px;align-items:flex-start}.section-title h2{font-size:23px;max-width:68%}.days{font-size:13px;padding:9px 13px;margin-top:4px}.feature{border-radius:22px;margin-bottom:65px}.crown-area{height:320px}.crown-video{width:310px;height:285px}.feature-info{padding:17px 27px 23px}.feature-name{font-size:20px}.brand{font-size:16px}.price-row{padding:15px 27px}.robux-price{font-size:29px}.cop{font-size:17px;padding:13px 19px}.packs-wrap{margin:0 -18px;padding:0 18px 35px}.packs-title{font-size:24px}.terms{font-size:14px;margin-bottom:23px}.packs{border-radius:22px;padding:7px 27px}.pack{padding:18px 0}.pack-amount{font-size:26px}.pack-price{min-width:180px;padding:14px 19px;font-size:16px}
}
@media(min-width:561px){.topbar{height:76px}.shop-grid{height:500px}}

/* fusion-responsive */
@media(max-width:512px){.overlay .sheet{width:100%;max-width:512px}.virtual-keyboard{width:100%;max-width:512px}}


/* White accessory/navigation bar immediately above the keyboard. */
.sheet .ios-accessory{
 position:absolute;z-index:30;left:50%;bottom:400px;width:calc(100% - 40px);height:64px;
 transform:translateX(-50%);border-radius:34px;background:#fff;
 box-shadow:0 1px 12px rgba(0,0,0,.08);
 display:flex;align-items:center;padding:0 28px;
 color:#b7b9bd;font-size:34px;font-weight:300;
 pointer-events:none;opacity:0;visibility:hidden;box-sizing:border-box;
}
.sheet .ios-accessory.open{opacity:1;visibility:visible}
.sheet .ios-accessory .accessory-arrow{margin-right:38px;line-height:1}
.sheet .ios-accessory .down{margin-right:auto}
.sheet .ios-accessory .accessory-check{color:#111;font-size:39px;line-height:1}

/* Keyboard occupies the complete lower portion of the sheet. */
.sheet .visual-ios-keyboard{
 position:absolute;z-index:29;left:50%;bottom:0;width:100%;height:400px;
 transform:translate(-50%,100%);transition:transform .40s cubic-bezier(.2,.9,.2,1);
 background:#3b3b3d;border-radius:28px 28px 0 0;padding:8px 8px 10px;
 color:#fff;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",Arial,sans-serif;
 pointer-events:none;box-sizing:border-box;
}
.sheet .visual-ios-keyboard.open{transform:translate(-50%,0)}

.ios-suggestions{
 height:45px;display:flex;align-items:center;justify-content:space-around;
 color:#f5f5f5;font-size:17px;border-bottom:1px solid rgba(255,255,255,.12)
}
.ios-suggestions span{flex:1;text-align:center}
.ios-krow{display:flex;gap:6px;margin:7px 4px 0;justify-content:center}
.ios-krow button{
 height:44px;flex:1;border:0;border-radius:7px;background:#5a5a5d;
 color:#fff;font-size:22px;font-weight:400
}
.ios-krow.lower{padding:0 22px}
.ios-krow button.wide{flex:1.25}
.ios-krow.bottom button.num{flex:1.35}
.ios-krow.bottom button.space{flex:4;color:#d7d7d9;font-size:15px}
.ios-krow.bottom button.return{flex:1.5;font-size:28px}
.ios-krow.mic{justify-content:space-between;margin-top:7px}
.ios-krow.mic button{background:transparent;box-shadow:none;font-size:26px;flex:0 0 52px}

/* Keep the search field and five friendships above the keyboard. */
.sheet .searchStep{
 position:relative;
 z-index:5;
}
.overlay .sheet{overflow:hidden}


/* =========================================================
   ENVIAR ROBUX — DIMENSIONES CORRECTAS
   The sheet is a bottom sheet: it does NOT fill the whole
   iPhone. Its bottom is exactly the bottom of .app.
   ========================================================= */
#overlay{
  position:absolute;
  inset:0;
  z-index:500;
  width:100%;
  height:100%;
  overflow:hidden;
  background:rgba(0,0,0,.43);
}

#overlay .sheet{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:calc(100% - 136px);
  min-height:0;
  max-height:none;
  margin:0 auto;
  background:#fff;
  border-radius:25px 25px 0 0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-sizing:border-box;
  transform:translateY(105%);
  transition:transform .40s cubic-bezier(.2,.9,.2,1);
  padding-bottom:0;
}
#overlay.open .sheet{transform:translateY(0)}

#overlay .sheet-body{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
  border-top:1px solid #eee;
}

/* Search + friends are the visible content above the keyboard. */
#overlay #searchStep{
  height:100%;
  box-sizing:border-box;
  overflow:hidden;
  padding:18px 20px 0;
}
#overlay .search-input{
  box-sizing:border-box;
  width:100%;
  height:49px;
}
#overlay .friends-title{margin-top:26px}
#overlay .friend-row{padding:8px 2px}

/* Visual iOS accessory bar, immediately above keyboard. */
#overlay .ios-accessory{
  position:absolute;
  z-index:900;
  left:50%;
  bottom:485px;
  width:calc(100% - 40px);
  height:60px;
  transform:translateX(-50%);
  border-radius:32px;
  background:#fff;
  box-shadow:0 1px 12px rgba(0,0,0,.08);
  display:flex;
  align-items:center;
  padding:0 28px;
  color:#b7b9bd;
  font-size:36px;
  font-weight:300;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  box-sizing:border-box;
}
#overlay .ios-accessory.open{opacity:1;visibility:visible}
#overlay .ios-accessory .accessory-arrow{margin-right:42px;line-height:1}
#overlay .ios-accessory .down{margin-right:auto}
#overlay .ios-accessory .accessory-check{color:#111;font-size:45px;line-height:1}

/* Visual keyboard starts at the bottom edge and slides upward. */
#overlay .visual-ios-keyboard{
  position:absolute;
  z-index:899;
  left:0;
  bottom:0;
  width:100%;
  height:485px;
  transform:translateY(100%);
  transition:transform .40s cubic-bezier(.2,.9,.2,1);
  background:#3b3b3d;
  border-radius:28px 28px 0 0;
  padding:8px 8px 12px;
  color:#fff;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",Arial,sans-serif;
  pointer-events:none;
  box-sizing:border-box;
}
#overlay .visual-ios-keyboard.open{transform:translateY(0)}

#overlay .ios-suggestions{
  height:45px;
  display:flex;
  align-items:center;
  justify-content:space-around;
  color:#f5f5f5;
  font-size:17px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
#overlay .ios-suggestions span{flex:1;text-align:center}
#overlay .ios-krow{display:flex;gap:6px;margin:7px 4px 0;justify-content:center}
#overlay .ios-krow button{
  height:44px;
  flex:1;
  border:0;
  border-radius:7px;
  background:#5a5a5d;
  color:#fff;
  font-size:22px;
  font-weight:400;
}
#overlay .ios-krow.lower{padding:0 22px}
#overlay .ios-krow button.wide{flex:1.25}
#overlay .ios-krow.bottom button.num{flex:1.35}
#overlay .ios-krow.bottom button.space{flex:4;color:#d7d7d9;font-size:15px}
#overlay .ios-krow.bottom button.return{flex:1.5;font-size:28px}
#overlay .ios-krow.mic{justify-content:space-between;margin-top:7px}
#overlay .ios-krow.mic button{background:transparent;box-shadow:none;font-size:26px;flex:0 0 52px}

/* The keyboard's own home indicator is part of the visual keyboard. */
#overlay .visual-ios-keyboard::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:8px;
  width:136px;
  height:5px;
  transform:translateX(-50%);
  border-radius:999px;
  background:#fff;
}

/* The real page indicator stays above the initial page only. */
#app > 

/* FINAL: overlay uses the SAME 512x1112 coordinate system as .app.
   It is outside .app in the DOM, so it must not use viewport percentages. */
#overlay{
  position:absolute !important;
  top:0 !important;
  left:50% !important;
  right:auto !important;
  bottom:auto !important;
  width:512px !important;
  height:1112px !important;
  transform:translateX(-50%) !important;
  overflow:hidden !important;
  z-index:500 !important;
  background:rgba(0,0,0,.43) !important;
}

#overlay .sheet{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  width:512px !important;
  height:956px !important; /* 86% of the 1112px iPhone canvas */
  min-height:956px !important;
  max-height:956px !important;
  margin:0 !important;
  padding-bottom:0 !important;
  overflow:hidden !important;
  border-radius:25px 25px 0 0 !important;
  box-sizing:border-box !important;
}

#overlay .sheet-body{
  position:relative !important;
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}

#overlay #searchStep{
  height:100% !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}

/* Reference proportions: keyboard starts at ~64% of the iPhone canvas. */
#overlay .visual-ios-keyboard{
  position:absolute !important;
  left:0 !important;
  bottom:0 !important;
  width:512px !important;
  height:400px !important;
  transform:translateY(100%) !important;
  box-sizing:border-box !important;
}

#overlay .visual-ios-keyboard.open{
  transform:translateY(0) !important;
}

#overlay .ios-accessory{
  position:absolute !important;
  left:20px !important;
  bottom:400px !important;
  width:472px !important;
  height:64px !important;
  transform:none !important;
  box-sizing:border-box !important;
}

#overlay .ios-accessory.open{
  opacity:1 !important;
  visibility:visible !important;
}


/* =========================================================
   FINAL ENVIAR ROBUX / iOS KEYBOARD VISUAL OVERRIDE
   Reference: uploaded iOS keyboard image.
   The keyboard is VISUAL ONLY.
   ========================================================= */

/* The overlay must be the same 512x1112 coordinate system as the phone. */
#overlay{
  position:absolute !important;
  top:0 !important;
  left:50% !important;
  right:auto !important;
  bottom:auto !important;
  width:512px !important;
  height:1112px !important;
  transform:translateX(-50%) !important;
  overflow:hidden !important;
  z-index:10000 !important;
  background:rgba(0,0,0,.43) !important;
}

/* Bottom sheet: completely opaque so Home can NEVER show through it. */
#overlay .sheet{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  width:512px !important;
  height:956px !important;
  min-height:956px !important;
  max-height:956px !important;
  margin:0 !important;
  padding:0 !important;
  background:#fff !important;
  opacity:1 !important;
  overflow:hidden !important;
  isolation:isolate !important;
  border-radius:25px 25px 0 0 !important;
  box-sizing:border-box !important;
  transform:translateY(105%) !important;
  transition:transform .40s cubic-bezier(.2,.9,.2,1) !important;
}

#overlay.open .sheet{
  transform:translateY(0) !important;
}

/* The body is the stacking context for the visual keyboard. */
#overlay .sheet-body{
  position:relative !important;
  flex:1 1 auto !important;
  min-height:0 !important;
  height:auto !important;
  overflow:hidden !important;
  background:#fff !important;
  border-top:1px solid #eee !important;
  isolation:isolate !important;
}

/* Search/friends stay above the keyboard. */
#overlay #searchStep{
  position:relative !important;
  z-index:2 !important;
  height:100% !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
  background:#fff !important;
  padding:18px 20px 0 !important;
}

/* Keyboard visual: anchored to the bottom of the Send Robux body. */
#overlay .visual-ios-keyboard{
  position:absolute !important;
  z-index:20 !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  width:100% !important;
  height:400px !important;
  margin:0 !important;
  padding:8px 8px 13px !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
  background:#3b3b3d !important;
  border-radius:27px 27px 0 0 !important;
  transform:translateY(100%) !important;
  transition:transform .40s cubic-bezier(.2,.9,.2,1) !important;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif !important;
  color:#fff !important;
  pointer-events:none !important;
}

#overlay .visual-ios-keyboard.open{
  transform:translateY(0) !important;
}

/* iOS predictive text row */
#overlay .ios-suggestions{
  height:44px !important;
  margin:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-around !important;
  border-bottom:1px solid rgba(255,255,255,.13) !important;
  color:#f4f4f4 !important;
  font-size:17px !important;
}

#overlay .ios-suggestions span{
  flex:1 !important;
  text-align:center !important;
}

/* Keyboard rows: larger, softer iOS-style keys matching the reference. */
#overlay .ios-krow{
  display:flex !important;
  gap:6px !important;
  margin:7px 4px 0 !important;
  padding:0 !important;
  justify-content:center !important;
}

#overlay .ios-krow button{
  height:45px !important;
  min-width:0 !important;
  flex:1 1 0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:7px !important;
  background:#5a5a5d !important;
  color:#fff !important;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif !important;
  font-size:21px !important;
  font-weight:400 !important;
  box-shadow:none !important;
}

#overlay .ios-krow.lower{
  padding:0 20px !important;
}

#overlay .ios-krow button.wide{
  flex:1.25 1 0 !important;
}

#overlay .ios-krow.bottom button.num{
  flex:1.25 1 0 !important;
}

#overlay .ios-krow.bottom button.space{
  flex:4 1 0 !important;
  color:#d8d8da !important;
  font-size:15px !important;
}

#overlay .ios-krow.bottom button.return{
  flex:1.5 1 0 !important;
  font-size:25px !important;
}

#overlay .ios-krow.mic{
  display:flex !important;
  justify-content:space-between !important;
  margin-top:5px !important;
}

#overlay .ios-krow.mic button{
  flex:0 0 48px !important;
  height:37px !important;
  background:transparent !important;
  font-size:23px !important;
}

/* iOS home indicator inside the visual keyboard. */
#overlay .visual-ios-keyboard::after{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  bottom:8px !important;
  width:136px !important;
  height:5px !important;
  transform:translateX(-50%) !important;
  border-radius:999px !important;
  background:#fff !important;
}

/* Accessory bar immediately above keyboard. */
#overlay .ios-accessory{
  position:absolute !important;
  z-index:21 !important;
  left:20px !important;
  bottom:400px !important;
  width:472px !important;
  height:64px !important;
  margin:0 !important;
  padding:0 28px !important;
  box-sizing:border-box !important;
  transform:none !important;
  border-radius:34px !important;
  background:#fff !important;
  box-shadow:0 1px 12px rgba(0,0,0,.08) !important;
  display:flex !important;
  align-items:center !important;
  color:#b7b9bd !important;
  font-size:34px !important;
  font-weight:300 !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

#overlay .ios-accessory.open{
  opacity:1 !important;
  visibility:visible !important;
}

#overlay .ios-accessory .accessory-arrow{
  margin-right:38px !important;
  line-height:1 !important;
}

#overlay .ios-accessory .down{
  margin-right:auto !important;
}

#overlay .ios-accessory .accessory-check{
  color:#111 !important;
  font-size:42px !important;
  line-height:1 !important;
}


/* =========================================================
   DEFINITIVE SEND ROBUX LAYOUT
   Overlay is now INSIDE .app, so coordinates are exactly
   the same 512x1112 iPhone canvas as the initial screen.
   ========================================================= */

.app > #overlay{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  z-index:5000 !important;
  background:rgba(0,0,0,.43) !important;
}

/* The sheet starts around 14% from the top and reaches the
   exact bottom of the iPhone. */
.app > #overlay > .sheet{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;

  width:100% !important;
  height:956px !important;
  min-height:956px !important;
  max-height:956px !important;

  margin:0 !important;
  padding:0 !important;
  box-sizing:border-box !important;

  background:#fff !important;
  border-radius:25px 25px 0 0 !important;
  overflow:hidden !important;

  display:flex !important;
  flex-direction:column !important;

  transform:translateY(105%) !important;
  transition:transform .40s cubic-bezier(.2,.9,.2,1) !important;
}

.app > #overlay.open > .sheet{
  transform:translateY(0) !important;
}

/* Keep header at the top of the sheet. */
.app > #overlay .handle{
  flex:0 0 auto !important;
}

.app > #overlay .sheet-head{
  flex:0 0 auto !important;
}

/* Body fills the rest of the sheet. */
.app > #overlay .sheet-body{
  position:relative !important;
  flex:1 1 auto !important;
  min-height:0 !important;
  height:auto !important;
  overflow:hidden !important;
  background:#fff !important;
  border-top:1px solid #eee !important;
  box-sizing:border-box !important;
}

/* Search + friends stay above the keyboard layer. */
.app > #overlay #searchStep{
  position:relative !important;
  z-index:10 !important;
  height:100% !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
  background:#fff !important;
  padding:18px 20px 0 !important;
}

/* Keyboard design/size based on the last iOS reference. */
.app > #overlay .visual-ios-keyboard{
  position:absolute !important;
  z-index:30 !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;

  width:100% !important;
  height:500px !important;

  margin:0 !important;
  padding:8px 10px 12px !important;
  box-sizing:border-box !important;

  overflow:hidden !important;
  background:#3b3b3d !important;
  color:#fff !important;

  border-radius:28px 28px 0 0 !important;

  transform:translateY(100%) !important;
  transition:transform .40s cubic-bezier(.2,.9,.2,1) !important;

  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif !important;

  pointer-events:none !important;
}

.app > #overlay .visual-ios-keyboard.open{
  transform:translateY(0) !important;
}

/* Prediction row */
.app > #overlay .ios-suggestions{
  height:55px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-around !important;

  border-bottom:1px solid rgba(255,255,255,.13) !important;

  color:#f5f5f5 !important;
  font-size:20px !important;
}

.app > #overlay .ios-suggestions span{
  flex:1 !important;
  text-align:center !important;
}

/* Main QWERTY rows */
.app > #overlay .ios-krow{
  display:flex !important;
  gap:8px !important;
  margin:8px 4px 0 !important;
  padding:0 !important;
  justify-content:center !important;
}

.app > #overlay .ios-krow button{
  height:50px !important;
  flex:1 1 0 !important;

  min-width:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:8px !important;

  background:#5a5a5d !important;
  color:#fff !important;

  font-size:24px !important;
  font-weight:400 !important;
  box-shadow:none !important;
}

.app > #overlay .ios-krow.lower{
  padding:0 26px !important;
}

.app > #overlay .ios-krow button.wide{
  flex:1.25 1 0 !important;
}

.app > #overlay .ios-krow.bottom button.num{
  flex:1.35 1 0 !important;
}

.app > #overlay .ios-krow.bottom button.space{
  flex:4 1 0 !important;
  font-size:16px !important;
  color:#d7d7d9 !important;
}

.app > #overlay .ios-krow.bottom button.return{
  flex:1.5 1 0 !important;
  font-size:30px !important;
}

.app > #overlay .ios-krow.mic{
  justify-content:space-between !important;
  margin-top:8px !important;
}

.app > #overlay .ios-krow.mic button{
  flex:0 0 52px !important;
  height:40px !important;

  background:transparent !important;
  box-shadow:none !important;

  font-size:27px !important;
}

/* Home indicator inside the visual keyboard. */
.app > #overlay .visual-ios-keyboard::after{
  content:"" !important;

  position:absolute !important;
  left:50% !important;
  bottom:8px !important;

  width:136px !important;
  height:5px !important;

  transform:translateX(-50%) !important;

  background:#fff !important;
  border-radius:999px !important;
}

/* iOS accessory bar above the keyboard */
.app > #overlay .ios-accessory{
  position:absolute !important;
  z-index:31 !important;

  left:20px !important;
  bottom:500px !important;

  width:calc(100% - 40px) !important;
  height:64px !important;

  margin:0 !important;
  padding:0 28px !important;

  box-sizing:border-box !important;

  border-radius:34px !important;
  background:#fff !important;

  box-shadow:0 1px 12px rgba(0,0,0,.08) !important;

  display:flex !important;
  align-items:center !important;

  color:#b7b9bd !important;
  font-size:34px !important;
  font-weight:300 !important;

  transform:none !important;

  opacity:0 !important;
  visibility:hidden !important;

  pointer-events:none !important;
}

.app > #overlay .ios-accessory.open{
  opacity:1 !important;
  visibility:visible !important;
}

.app > #overlay .ios-accessory .accessory-arrow{
  margin-right:38px !important;
  line-height:1 !important;
}

.app > #overlay .ios-accessory .down{
  margin-right:auto !important;
}

.app > #overlay .ios-accessory .accessory-check{
  color:#111 !important;
  font-size:43px !important;
  line-height:1 !important;
}

/* The sheet itself blocks the Home underneath. */
.app > #overlay .sheet,
.app > #overlay .sheet-body{
  isolation:isolate !important;
}

/* =========================================================
   FINAL CENTERING FIX
   ========================================================= */

.app > #overlay{
  position:absolute !important;
  inset:0 !important;
  left:0 !important;
  top:0 !important;
  right:0 !important;
  bottom:0 !important;

  width:100% !important;
  height:100% !important;

  margin:0 !important;
  padding:0 !important;

  transform:none !important;
  overflow:hidden !important;

  z-index:5000 !important;
}

.app > #overlay > .sheet{
  position:absolute !important;

  left:0 !important;
  right:0 !important;
  bottom:0 !important;

  width:100% !important;
  height:956px !important;

  min-width:0 !important;
  max-width:none !important;
  min-height:956px !important;
  max-height:956px !important;

  margin:0 !important;
  padding:0 !important;

  transform:translateY(105%) !important;
  box-sizing:border-box !important;
}

.app > #overlay.open > .sheet{
  transform:translateY(0) !important;
}

/* Keyboard fills the sheet width instead of keeping a hard 512px width. */
.app > #overlay .visual-ios-keyboard{
  left:0 !important;
  right:0 !important;
  width:100% !important;
  height:500px !important;

  transform:translateY(100%) !important;
  box-sizing:border-box !important;
}

.app > #overlay .visual-ios-keyboard.open{
  transform:translateY(0) !important;
}

/* Accessory bar centered relative to the sheet. */
.app > #overlay .ios-accessory{
  left:20px !important;
  right:20px !important;

  width:auto !important;

  transform:none !important;
  box-sizing:border-box !important;
}

/* Keep content aligned to the sheet rather than a fixed 512px canvas. */
.app > #overlay .sheet-body,
.app > #overlay #searchStep{
  width:100% !important;
  max-width:none !important;
  box-sizing:border-box !important;
}

/* Final vertical alignment: sheet covers to the bottom; keyboard sits lower. */
.app > #overlay > .sheet{
  top:140px !important;
  bottom:0 !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
}

.app > #overlay .visual-ios-keyboard{
  height:430px !important;
  bottom:0 !important;
}

.app > #overlay .ios-accessory{
  bottom:430px !important;
}

/* =========================================================
   FINAL KEYBOARD LOWER/BETTER SPACING
   Keep the keyboard at the bottom and move its last row
   closer to the iPhone home indicator.
   ========================================================= */

/* Keep the visual keyboard itself anchored at the bottom. */
.app > #overlay .visual-ios-keyboard{
  bottom:0 !important;
  height:430px !important;
  padding-bottom:14px !important;
}

/* Pull the emoji/microphone row down toward the bottom. */
.app > #overlay .ios-krow.mic{
  position:absolute !important;
  left:8px !important;
  right:8px !important;
  bottom:18px !important;
  margin:0 !important;
  height:34px !important;
  align-items:center !important;
}

/* Keep the last functional-looking QWERTY row closer to the mic row. */
.app > #overlay .ios-krow.bottom{
  margin-top:8px !important;
}

/* The white iPhone home indicator: make it slightly shorter and lower,
   matching the supplied reference. */
.app > #overlay .visual-ios-keyboard::after{
  bottom:10px !important;
  width:108px !important;
  height:5px !important;
}

/* Ajuste final: el bloque visual del teclado ocupa más altura, de modo que
   su borde superior queda más cerca del último amigo, mientras su borde
   inferior permanece pegado al fondo del iPhone. */
.app > #overlay .visual-ios-keyboard{
  height:480px !important;
  bottom:0 !important;
}
.app > #overlay .ios-accessory{
  bottom:480px !important;
}

/* Corrección fina: reducir la altura para bajar el borde superior del teclado. */
.app > #overlay .visual-ios-keyboard{
  height:410px !important;
  bottom:0 !important;
}
.app > #overlay .ios-accessory{
  bottom:410px !important;
  height:64px !important;
}

/* La barra blanca debe tener los tres controles en una misma línea:
   flecha arriba, flecha abajo y check, todos centrados verticalmente. */
.app > #overlay .ios-accessory{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  padding:0 28px !important;
  gap:42px !important;
}
.app > #overlay .ios-accessory .accessory-arrow{
  margin:0 !important;
  line-height:1 !important;
}
.app > #overlay .ios-accessory .down{
  margin:0 !important;
}
.app > #overlay .ios-accessory .accessory-check{
  margin-left:auto !important;
  line-height:1 !important;
}

/* Ajuste solicitado: teclado visual a 370px de alto. */
.app > #overlay .visual-ios-keyboard{
  height:370px !important;
  bottom:0 !important;
}
.app > #overlay .ios-accessory{
  bottom:370px !important;
}

/* =========================================================
   ACCESSORY BAR — cropped directly from user's reference
   ========================================================= */
.app > #overlay .ios-accessory{
  position:absolute !important;
  z-index:31 !important;

  left:20px !important;
  right:20px !important;
  bottom:370px !important;

  width:auto !important;
  height:78px !important;

  margin:0 !important;
  padding:0 !important;

  background:transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;

  display:block !important;

  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;

  transform:none !important;
  overflow:hidden !important;
}

.app > #overlay .ios-accessory.open{
  opacity:1 !important;
  visibility:visible !important;
}

.app > #overlay .ios-accessory img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:fill !important;
}

/* =========================================================
   ORIGINAL PHOTO KEYBOARD — clean final layout
   ========================================================= */
.app > #overlay .visual-ios-keyboard{
  position:absolute !important;
  z-index:30 !important;
  left:50% !important;
  bottom:0 !important;

  width:100% !important;
  height:370px !important;

  transform:translate(-50%,100%) !important;
  transition:transform .40s cubic-bezier(.2,.9,.2,1) !important;

  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  overflow:hidden !important;

  pointer-events:none !important;
  box-sizing:border-box !important;
}

.app > #overlay .visual-ios-keyboard.open{
  transform:translate(-50%,0) !important;
}

.app > #overlay .visual-ios-keyboard::after{
  display:none !important;
}

.app > #overlay .ios-keyboard-original{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:fill !important;
  margin:0 !important;
  padding:0 !important;
}

/* The reference accessory bar sits directly above the photo keyboard. */
.app > #overlay .ios-accessory{
  bottom:370px !important;
}

/* =========================================================
   FINAL PHOTO KEYBOARD POSITION — sibling of sheet-body
   ========================================================= */
.app > #overlay > .sheet{
  position:absolute !important;
  top:140px !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:hidden !important;
  background:#fff !important;
}

.app > #overlay > .sheet > .visual-ios-keyboard{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  width:100% !important;
  height:370px !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  background:transparent !important;
  border-radius:28px 28px 0 0 !important;
  box-sizing:border-box !important;
  z-index:200 !important;
  transform:translateY(100%) !important;
  transition:transform .40s cubic-bezier(.2,.9,.2,1) !important;
  pointer-events:none !important;
}

.app > #overlay > .sheet > .visual-ios-keyboard.open{
  transform:translateY(0) !important;
}

.app > #overlay > .sheet > .visual-ios-keyboard > .ios-keyboard-original{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:fill !important;
  margin:0 !important;
  padding:0 !important;
}

.app > #overlay > .sheet > .ios-accessory{
  position:absolute !important;
  left:20px !important;
  right:20px !important;
  bottom:370px !important;
  width:auto !important;
  height:78px !important;
  padding:0 !important;
  margin:0 !important;
  overflow:hidden !important;
  background:transparent !important;
  box-shadow:none !important;
  z-index:201 !important;
  opacity:0 !important;
  visibility:hidden !important;
  display:block !important;
}

.app > #overlay > .sheet > .ios-accessory.open{
  opacity:1 !important;
  visibility:visible !important;
}

.app > #overlay > .sheet > .ios-accessory > img{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:fill !important;
}

.app > #overlay .visual-ios-keyboard:not(.open),
.app > #overlay .ios-accessory:not(.open){
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

/* =========================================================
   CLEAN FINAL SEND ROBUX LAYOUT
   ========================================================= */

.app > #overlay{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  z-index:5000 !important;
  background:rgba(0,0,0,.43) !important;
}

.app > #overlay > .sheet{
  position:absolute !important;
  top:140px !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;

  width:100% !important;
  height:auto !important;
  min-width:0 !important;
  min-height:0 !important;
  max-width:none !important;
  max-height:none !important;

  margin:0 !important;
  padding:0 !important;

  display:flex !important;
  flex-direction:column !important;

  overflow:hidden !important;
  box-sizing:border-box !important;
  background:#fff !important;

  border-radius:25px 25px 0 0 !important;

  transform:translateY(105%) !important;
  transition:transform .40s cubic-bezier(.2,.9,.2,1) !important;
}

.app > #overlay.open > .sheet{
  transform:translateY(0) !important;
}

.app > #overlay > .sheet > .handle,
.app > #overlay > .sheet > .sheet-head{
  flex:0 0 auto !important;
}

.app > #overlay > .sheet > .sheet-body{
  position:relative !important;
  flex:1 1 auto !important;
  min-height:0 !important;
  height:auto !important;

  overflow:hidden !important;
  box-sizing:border-box !important;
  background:#fff !important;
  border-top:1px solid #eee !important;
}

/* Search content lives inside the sheet body. */
.app > #overlay #searchStep{
  position:relative !important;
  z-index:2 !important;
  height:100% !important;
  min-height:0 !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
  padding:18px 20px 0 !important;
  background:#fff !important;
}

/* Visual original keyboard is a direct child of the sheet. */
.app > #overlay > .sheet > .visual-ios-keyboard{
  position:absolute !important;

  left:0 !important;
  right:0 !important;
  bottom:0 !important;

  width:100% !important;
  height:370px !important;

  margin:0 !important;
  padding:0 !important;

  overflow:hidden !important;
  box-sizing:border-box !important;
  background:transparent !important;

  border-radius:28px 28px 0 0 !important;

  z-index:100 !important;

  transform:translateY(100%) !important;
  transition:transform .40s cubic-bezier(.2,.9,.2,1) !important;

  pointer-events:none !important;
}

.app > #overlay > .sheet > .visual-ios-keyboard.open{
  transform:translateY(0) !important;
}

.app > #overlay > .sheet > .visual-ios-keyboard > .ios-keyboard-original{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:fill !important;
  margin:0 !important;
  padding:0 !important;
}

/* Reference accessory, immediately above photo keyboard. */
.app > #overlay > .sheet > .ios-accessory{
  position:absolute !important;

  left:20px !important;
  right:20px !important;
  bottom:370px !important;

  width:auto !important;
  height:78px !important;

  margin:0 !important;
  padding:0 !important;

  overflow:hidden !important;
  background:transparent !important;

  z-index:101 !important;

  opacity:0 !important;
  visibility:hidden !important;

  pointer-events:none !important;
}

.app > #overlay > .sheet > .ios-accessory.open{
  opacity:1 !important;
  visibility:visible !important;
}

.app > #overlay > .sheet > .ios-accessory > img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:fill !important;
}

/* Hidden visual layers never affect layout when closed. */
.app > #overlay .visual-ios-keyboard:not(.open),
.app > #overlay .ios-accessory:not(.open){
  visibility:hidden !important;
  pointer-events:none !important;
}

/* Final header containment fix */
.app > #overlay > .sheet > .sheet-head{
  position:relative !important;
  z-index:10 !important;
  width:100% !important;
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  flex:0 0 auto !important;
  box-sizing:border-box !important;
  padding:12px 22px 13px !important;
  background:#fff !important;
}
.app > #overlay > .sheet > .sheet-head > .sheet-title,
.app > #overlay > .sheet > .sheet-head > .sheet-balance{
  display:flex !important;
  align-items:center !important;
}

/* =========================================================
   KEYBOARD EXIT ANIMATION
   Closing mirrors the entrance: the visual keyboard and
   accessory slide downward before the amount step appears.
   ========================================================= */
.app > #overlay > .sheet > .visual-ios-keyboard{
  transition:transform .40s cubic-bezier(.2,.9,.2,1) !important;
  will-change:transform !important;
}

.app > #overlay > .sheet > .ios-accessory{
  transform:translateY(100%) !important;
  transition:
    transform .40s cubic-bezier(.2,.9,.2,1),
    opacity .40s ease,
    visibility 0s linear .40s !important;
  will-change:transform,opacity !important;
}

.app > #overlay > .sheet > .ios-accessory.open{
  transform:translateY(0) !important;
  opacity:1 !important;
  visibility:visible !important;
  transition:
    transform .40s cubic-bezier(.2,.9,.2,1),
    opacity .15s ease,
    visibility 0s linear 0s !important;
}

.app > #overlay > .sheet > .visual-ios-keyboard:not(.open){
  transform:translateY(100%) !important;
}

/* =========================================================
   NUMERIC ROBUX KEYBOARD — INSIDE THE IPHONE ONLY
   ========================================================= */
.app > #virtualKeyboard{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;

  width:100% !important;
  max-width:none !important;

  height:285px !important;

  margin:0 !important;
  padding:6px 7px 10px !important;
  box-sizing:border-box !important;

  transform:translateY(110%) !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;

  z-index:7000 !important;

  background:#d5d8dc !important;
  border-radius:0 !important;
}

.app > #virtualKeyboard.open{
  transform:translateY(0) !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}

.app > #virtualKeyboard .vk-bar{
  height:22px !important;
}

.app > #virtualKeyboard .vk-row{
  margin:4px 0 !important;
  gap:5px !important;
}

.app > #virtualKeyboard .vk-key{
  height:55px !important;
}

.app > #virtualKeyboard .vk-key.blue{
  display:none !important;
}

/* The numeric keyboard must not resize the Send Robux sheet. */
.keyboard-open .sheet{
  max-height:none !important;
  bottom:auto !important;
}

.keyboard-open .sheet-body{
  max-height:none !important;
  padding-bottom:0 !important;
}

/* =========================================================
   AMOUNT DISPLAY — keep large Robux values fully visible
   ========================================================= */
.app > #overlay .amount-display{
  width:100% !important;
  max-width:100% !important;
  overflow:visible !important;
  white-space:nowrap !important;
  box-sizing:border-box !important;
}

.app > #overlay .amount-input{
  width:auto !important;
  min-width:3.8em !important;
  max-width:calc(100% - 55px) !important;

  overflow:visible !important;
  text-overflow:clip !important;
  white-space:nowrap !important;

  text-align:center !important;
  box-sizing:content-box !important;

  font-size:53px !important;
  line-height:1 !important;
  letter-spacing:-1.2px !important;
}

.app > #overlay .amount-display img{
  flex:0 0 37px !important;
}

/* FINAL: icon + amount are one centered visual group */
.app > #overlay .amount{
  text-align:center !important;
}

.app > #overlay .amount-display{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;

  width:max-content !important;
  max-width:none !important;

  margin:5px auto 17px !important;
  gap:8px !important;

  overflow:visible !important;
  white-space:nowrap !important;

  position:relative !important;
  left:auto !important;
  transform:none !important;
  box-sizing:border-box !important;
}

.app > #overlay .amount-display img{
  display:block !important;
  flex:0 0 37px !important;
  width:37px !important;
  height:37px !important;
}

.app > #overlay .amount-input{
  display:block !important;
  flex:0 0 auto !important;

  width:1px !important;
  min-width:1px !important;
  max-width:none !important;

  height:1em !important;
  margin:0 !important;
  padding:0 !important;

  border:0 !important;
  outline:0 !important;
  background:transparent !important;

  font-size:53px !important;
  font-weight:850 !important;
  line-height:1 !important;
  letter-spacing:-1.2px !important;

  text-align:left !important;
  overflow:visible !important;
  white-space:nowrap !important;
  box-sizing:content-box !important;
}

/* FINAL AMOUNT INPUT: visible and editable */
.app > #overlay .amount-display{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  max-width:100% !important;
  margin:5px 0 17px !important;
  gap:8px !important;
  overflow:visible !important;
  white-space:nowrap !important;
  text-align:center !important;
}

.app > #overlay .amount-display img{
  flex:0 0 37px !important;
  width:37px !important;
  height:37px !important;
  display:block !important;
}

.app > #overlay .amount-input{
  display:block !important;
  flex:0 0 auto !important;
  width:44px !important;
  min-width:44px !important;
  max-width:none !important;
  height:1em !important;

  padding:0 !important;
  margin:0 !important;

  border:0 !important;
  outline:0 !important;
  background:transparent !important;

  font-size:53px !important;
  font-weight:850 !important;
  line-height:1 !important;
  letter-spacing:-1.2px !important;

  text-align:left !important;
  white-space:nowrap !important;
  overflow:visible !important;
  text-overflow:clip !important;
  box-sizing:content-box !important;
}

/* =========================================================
   FINAL AMOUNT STEP SPACING
   Keep the numeric keyboard anchored at the bottom while
   bringing the explanatory note directly above it.
   ========================================================= */
.app > #overlay .amount .note{
  margin-top:160px !important;
}

/* Ensure the Send Robux sheet always has a visible bottom-to-top entrance. */
.app > #overlay > .sheet{
  transform:translateY(105%) !important;
  transition:transform .42s cubic-bezier(.2,.9,.2,1) !important;
  will-change:transform !important;
}

.app > #overlay.open > .sheet{
  transform:translateY(0) !important;
}

/* =========================================================
   AMOUNT STEP — CUT THE LARGE EMPTY REGION
   ========================================================= */

/* Only the amount step gets the shorter sheet. The top moves down, while the
   bottom remains anchored to the iPhone, so Home becomes visible above it. */
.app > #overlay > .sheet.amount-state{
  top:230px !important;
  bottom:0 !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
}

/* The note should sit directly after Siguiente rather than creating the huge
   artificial blank region that was previously added. */
.app > #overlay .amount .note{
  margin-top:10px !important;
}

/* Ajuste solicitado: ventana de cantidad a 270px desde arriba. */
.app > #overlay > .sheet.amount-state{
  top:270px !important;
}

/* Ajuste solicitado: ventana de cantidad a 290px desde arriba. */
.app > #overlay > .sheet.amount-state{
  top:290px !important;
}

/* Next: keep the amount sheet in its shorter state after the keyboard closes. */
.app > #overlay > .sheet.amount-state{
  top:290px !important;
  bottom:0 !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
}

/* =========================================================
   NEXT — SHEET + NUMERIC KEYBOARD MOVE DOWN TOGETHER
   Reference behavior: the keyboard slides down and the
   Send Robux sheet follows it, revealing Comprar Robux.
   ========================================================= */

.app > #overlay > .sheet.amount-state{
  transition:
    top .42s cubic-bezier(.2,.9,.2,1),
    transform .42s cubic-bezier(.2,.9,.2,1) !important;
  will-change:top,transform !important;
}

.app > #overlay > .sheet.amount-state.amount-collapsed{
  top:510px !important;
}


/* =========================================================
   CONFIRMATION — REMOVE LOWER EMPTY SPACE
   The confirmation sheet is content-sized and bottom-anchored.
   Its top moves down so the underlying Comprar Robux screen
   remains visible above it, matching the amount-sheet behavior.
   ========================================================= */
.app > #overlay > .sheet.confirm-state{
  top:430px !important;
  bottom:0 !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:hidden !important;
  transition:
    top .42s cubic-bezier(.2,.9,.2,1),
    transform .42s cubic-bezier(.2,.9,.2,1) !important;
}

.app > #overlay > .sheet.confirm-state .sheet-body{
  overflow:hidden !important;
  min-height:0 !important;
  height:auto !important;
}

.app > #overlay > .sheet.confirm-state #confirmStep{
  padding:18px 20px 20px !important;
  box-sizing:border-box !important;
  min-height:0 !important;
  height:auto !important;
}


/* =========================================================
   FINAL SUCCESS — COMPACT SHEET
   Same geometry as the confirmation step: remove the large
   blank lower area and reveal the Comprar Robux screen above.
   ========================================================= */
.app > #overlay > .sheet.success-state{
  top:430px !important;
  bottom:0 !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:hidden !important;
  transition:
    top .42s cubic-bezier(.2,.9,.2,1),
    transform .42s cubic-bezier(.2,.9,.2,1) !important;
}

.app > #overlay > .sheet.success-state .sheet-body{
  overflow:hidden !important;
  min-height:0 !important;
  height:auto !important;
}

.app > #overlay > .sheet.success-state #successStep{
  padding:18px 20px 20px !important;
  box-sizing:border-box !important;
  min-height:0 !important;
  height:auto !important;
}

.app > #overlay > .sheet.success-state .success{
  padding:65px 15px 22px !important;
}


/* Recorte adicional de la ventana FINAL */
.app > #overlay > .sheet.success-state{
  top:430px !important;
  bottom:auto !important;
  height:615px !important;
  min-height:615px !important;
  max-height:615px !important;
}

.app > #overlay > .sheet.success-state .sheet-body{
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:hidden !important;
}

.app > #overlay > .sheet.success-state #successStep{
  height:auto !important;
  min-height:0 !important;
  padding-bottom:18px !important;
}


/* Último recorte de la ventana final */
.app > #overlay > .sheet.success-state{
  height:550px !important;
  min-height:550px !important;
  max-height:550px !important;
}


/* FINAL: bottom aligned with the iPhone home-indicator area */
.app > #overlay > .sheet.success-state{
  top:auto !important;
  bottom:10px !important;
  height:615px !important;
  min-height:615px !important;
  max-height:615px !important;
}


/* FINAL SUCCESS — COMPACTO: la ventana termina poco después de OK */
.app > #overlay > .sheet.success-state{
  top:auto !important;
  bottom:10px !important;
  height:430px !important;
  min-height:430px !important;
  max-height:430px !important;
}

.app > #overlay > .sheet.success-state .sheet-body{
  flex:1 1 auto !important;
  overflow:hidden !important;
  min-height:0 !important;
}

.app > #overlay > .sheet.success-state #successStep{
  height:100% !important;
  min-height:0 !important;
  box-sizing:border-box !important;
  padding:18px 20px 18px !important;
}

.app > #overlay > .sheet.success-state .success{
  height:100% !important;
  box-sizing:border-box !important;
  padding:22px 15px 10px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
}

.app > #overlay > .sheet.success-state .success-icon{
  flex:0 0 auto !important;
  margin-bottom:13px !important;
}

.app > #overlay > .sheet.success-state .success p{
  flex:0 0 auto !important;
  margin:0 !important;
}

.app > #overlay > .sheet.success-state #okBtn{
  width:100% !important;
  margin-top:auto !important;
  flex:0 0 auto !important;
}

/* FINAL FLOW: all Send Robux sheet states use the same directional motion. */
.app > #overlay > .sheet.confirm-state,
.app > #overlay > .sheet.success-state{
  will-change:transform,top !important;
}

/* Web Animations API owns the sheet movement; prevent CSS transitions
   from producing a second "ghost" movement during state changes. */
.app > #overlay > .sheet.is-animating{
  transition:none !important;
  will-change:transform !important;
}


/* Saldo funcional en la cabecera independiente */
.home-balance #homeBalanceValue{
  display:block !important;
  white-space:nowrap !important;
  min-width:0 !important;
}

/* Confirmation action layer */
.app > #overlay > .sheet.confirm-state .confirm-actions{
  position:relative !important;
  z-index:99999 !important;
  pointer-events:auto !important;
}
.app > #overlay > .sheet.confirm-state #confirmBtn{
  position:relative !important;
  z-index:100000 !important;
  pointer-events:auto !important;
  touch-action:manipulation !important;
  cursor:pointer !important;
}

/* Enviar usa el mismo modelo de interacción que Editar. */
.app > #overlay > .sheet.confirm-state .confirm-actions{
  position:relative !important;
  z-index:20 !important;
  pointer-events:auto !important;
}
.app > #overlay > .sheet.confirm-state .confirm-actions button{
  pointer-events:auto !important;
  touch-action:manipulation !important;
}

/* Native confirmation button: same event model as Editar. */
.app > #overlay > .sheet.confirm-state #confirmBtn{
  display:block !important;
  pointer-events:auto !important;
  position:relative !important;
  z-index:50 !important;
  cursor:pointer !important;
  touch-action:manipulation !important;
}

/* =========================================================
   CONFIRMATION HIT-TEST FIX
   Only the currently visible step can receive pointer events.
   This keeps hidden visual keyboard/accessory layers from
   intercepting the confirmation buttons.
   ========================================================= */
.app > #overlay .sheet .step{
  pointer-events:none !important;
}
.app > #overlay .sheet .step.active{
  pointer-events:auto !important;
  position:relative !important;
  z-index:5000 !important;
}
.app > #overlay .sheet .step.active .confirm-actions,
.app > #overlay .sheet .step.active .confirm-actions button{
  pointer-events:auto !important;
}
.app > #overlay .sheet .step.active .confirm-send,
.app > #overlay .sheet .step.active .confirm-edit{
  position:relative !important;
  z-index:6000 !important;
  pointer-events:auto !important;
  touch-action:manipulation !important;
}

/* Visual keyboard/accessory never intercept clicks unless explicitly open. */
.app > #overlay .visual-ios-keyboard:not(.open),
.app > #overlay .ios-accessory:not(.open){
  pointer-events:none !important;
}

/* Enviar usa exactamente la misma interacción que Editar. */
.app > #overlay > .sheet.confirm-state #confirmBtn{
  cursor:pointer !important;
  pointer-events:auto !important;
  touch-action:manipulation !important;
}

/* =========================================================
   AMOUNT GROUP — LOGO + NUMBER CENTERED AS ONE UNIT
   The group itself is centered; its width grows with the number.
   ========================================================= */
.app > #overlay .amount-display{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-start !important;

  width:max-content !important;
  max-width:none !important;
  min-width:0 !important;

  margin:5px auto 17px !important;
  padding:0 !important;
  gap:8px !important;

  position:relative !important;
  left:auto !important;
  right:auto !important;
  transform:none !important;

  overflow:visible !important;
  white-space:nowrap !important;
  box-sizing:content-box !important;
}

.app > #overlay .amount-display > img{
  flex:0 0 37px !important;
  width:37px !important;
  height:37px !important;
  display:block !important;
  margin:0 !important;
  position:relative !important;
  left:auto !important;
}

.app > #overlay .amount-display > .amount-input{
  flex:0 0 auto !important;
  width:auto !important;
  min-width:44px !important;
  max-width:none !important;

  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  outline:0 !important;

  font-size:53px !important;
  font-weight:850 !important;
  line-height:1 !important;
  letter-spacing:-1.2px !important;

  text-align:left !important;
  white-space:nowrap !important;
  overflow:visible !important;
  text-overflow:clip !important;
  box-sizing:content-box !important;

  position:relative !important;
  left:auto !important;
  right:auto !important;
  transform:none !important;
}

/* =========================================================
   SEND SHEET HEADER — REFERENCE CLOSE BUTTON + LEFT LOGO
   ========================================================= */
.app > #overlay > .sheet > .sheet-head{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
}

.app > #overlay > .sheet > .sheet-head > .sheet-title{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  min-width:0 !important;
}

.app > #overlay .sheet-title-logo{
  width:36px !important;
  height:36px !important;
  object-fit:contain !important;
  flex:0 0 36px !important;
}

.app > #overlay > .sheet > .sheet-head > .sheet-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:18px !important;
  flex:0 0 auto !important;
}

.app > #overlay .sheet-balance{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  white-space:nowrap !important;
}

.app > #overlay .sheet-close{
  width:58px !important;
  height:58px !important;
  min-width:58px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:50% !important;
  background:#f1f1f4 !important;
  color:#111 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-family:Arial,sans-serif !important;
  font-size:50px !important;
  font-weight:300 !important;
  line-height:1 !important;
  cursor:pointer !important;
  pointer-events:auto !important;
  touch-action:manipulation !important;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.04) !important;
}

.app > #overlay .sheet-close:active{
  transform:scale(.96) !important;
  background:#e5e5e9 !important;
}

/* CORRECCIÓN: la X del encabezado de Enviar Robux NO lleva círculo.
   La X circular es únicamente la del Home (#closeShop). */
.app > #overlay .sheet-close{
  width:58px !important;
  height:58px !important;
  min-width:58px !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#111 !important;
  font-family:Arial,sans-serif !important;
  font-size:50px !important;
  font-weight:300 !important;
  line-height:1 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
  pointer-events:auto !important;
  touch-action:manipulation !important;
  box-shadow:none !important;
}

.app > #overlay .sheet-close:active{
  transform:none !important;
  background:transparent !important;
}

/* Ocultar únicamente el saldo duplicado que aparece dentro del paso de cantidad. */
.app > #overlay #amountStep > .amount-top{
  display:none !important;
}

/* AMOUNT: logo + number form one centered group */
.app > #overlay .amount-display{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-start !important;

  width:max-content !important;
  min-width:89px !important;
  max-width:none !important;

  margin-left:auto !important;
  margin-right:auto !important;
  margin-top:5px !important;
  margin-bottom:17px !important;

  padding:0 !important;
  gap:8px !important;
  position:relative !important;
  left:auto !important;
  right:auto !important;
  transform:none !important;
  overflow:visible !important;
  box-sizing:content-box !important;
}

.app > #overlay .amount-display > img{
  flex:0 0 37px !important;
  width:37px !important;
  height:37px !important;
  margin:0 !important;
  display:block !important;
}

.app > #overlay .amount-display > #amountInput{
  flex:0 0 auto !important;
  min-width:44px !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  box-sizing:content-box !important;
  text-align:left !important;
  white-space:nowrap !important;
  overflow:visible !important;
}

/* =========================================================
   REAL SEND-STEP TRANSITION
   The previous Web Animation was overridden by the sheet's
   `transform: ... !important`. These classes own the transform
   and use a real CSS transition, so the movement is visible.
   ========================================================= */
.app > #overlay > .sheet.sheet-transitioning{
  transition:none !important;
  will-change:transform !important;
}

.app > #overlay > .sheet.sheet-transitioning.sheet-exit-down{
  transform:translateY(108%) !important;
  transition:transform .38s cubic-bezier(.55,0,1,.45) !important;
}

.app > #overlay > .sheet.sheet-transitioning.sheet-enter-up{
  transform:translateY(108%) !important;
  transition:none !important;
}

.app > #overlay > .sheet.sheet-transitioning:not(.sheet-enter-up):not(.sheet-exit-down){
  transform:translateY(0) !important;
  transition:transform .42s cubic-bezier(.2,.9,.2,1) !important;
}

/* =========================================================
   FINAL SEND — 2 SECOND PROCESSING ANIMATION
   Inspired by the Google Play purchase-processing pattern:
   lock in the center + circular progress ring + "Procesando".
   ========================================================= */
.app > #overlay .processing-view{
  width:100% !important;
  height:100% !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  padding-top:58px !important;
  box-sizing:border-box !important;
}

.app > #overlay .processing-view[hidden],
.app > #overlay .success-result[hidden]{
  display:none !important;
}

.app > #overlay .processing-ring{
  width:82px !important;
  height:82px !important;
  border:3px solid #d8d8dc !important;
  border-top-color:#555 !important;
  border-right-color:#555 !important;
  border-radius:50% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  position:relative !important;
  box-sizing:border-box !important;
  animation:robuxProcessingSpin .9s linear infinite !important;
}

.app > #overlay .processing-lock{
  width:24px !important;
  height:27px !important;
  border:2.5px solid #555 !important;
  border-radius:4px !important;
  position:relative !important;
  box-sizing:border-box !important;
  background:#fff !important;
  transform:rotate(0deg) !important;
  animation:robuxProcessingCounterSpin .9s linear infinite !important;
}

.app > #overlay .processing-lock::before{
  content:"" !important;
  position:absolute !important;
  width:13px !important;
  height:13px !important;
  left:3px !important;
  top:-11px !important;
  border:2.5px solid #555 !important;
  border-bottom:0 !important;
  border-radius:8px 8px 0 0 !important;
  box-sizing:border-box !important;
  background:transparent !important;
}

.app > #overlay .processing-lock span{
  position:absolute !important;
  width:3px !important;
  height:7px !important;
  background:#555 !important;
  border-radius:2px !important;
  left:8px !important;
  top:8px !important;
}

.app > #overlay .processing-label{
  margin-top:18px !important;
  color:#777 !important;
  font-size:15px !important;
  font-weight:500 !important;
}

.app > #overlay .success-result{
  width:100% !important;
  height:100% !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  box-sizing:border-box !important;
}

@keyframes robuxProcessingSpin{
  to{transform:rotate(360deg)}
}

@keyframes robuxProcessingCounterSpin{
  to{transform:rotate(-360deg)}
}

.app > #overlay .success-state #okBtn:disabled{
  opacity:.65 !important;
  pointer-events:none !important;
}

/* =========================================================
   FINAL PAYMENT-STYLE PROCESSING — AUTHORITATIVE OVERRIDE
   ========================================================= */
.app > #overlay .processing-view{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  width:100% !important;
  height:100% !important;
  padding-top:58px !important;
  box-sizing:border-box !important;
}

.app > #overlay .processing-view[hidden],
.app > #overlay .success-result[hidden]{
  display:none !important;
}

/* Only the ARC rotates. The lock itself never rotates. */
.app > #overlay .processing-ring{
  width:78px !important;
  height:78px !important;
  border:2.5px solid transparent !important;
  border-top-color:#555 !important;
  border-right-color:#555 !important;
  border-radius:50% !important;
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
  animation:robuxPaymentArc 1.05s linear infinite !important;
}

.app > #overlay .processing-lock{
  width:23px !important;
  height:26px !important;
  border:2px solid #555 !important;
  border-radius:3px !important;
  position:relative !important;
  box-sizing:border-box !important;
  background:transparent !important;
  transform:none !important;
  animation:none !important;
}

.app > #overlay .processing-lock::before{
  content:"" !important;
  position:absolute !important;
  width:12px !important;
  height:11px !important;
  left:3.5px !important;
  top:-10px !important;
  border:2px solid #555 !important;
  border-bottom:0 !important;
  border-radius:8px 8px 0 0 !important;
  box-sizing:border-box !important;
  background:transparent !important;
}

.app > #overlay .processing-lock span{
  position:absolute !important;
  width:3px !important;
  height:6px !important;
  left:8px !important;
  top:8px !important;
  background:#555 !important;
  border-radius:2px !important;
}

.app > #overlay .processing-label{
  margin-top:17px !important;
  color:#777 !important;
  font-size:15px !important;
  font-weight:500 !important;
}

.app > #overlay .success-result{
  width:100% !important;
  height:100% !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  box-sizing:border-box !important;
  padding-top:58px !important;
}

.app > #overlay .success-result[hidden]{
  display:none !important;
}

.app > #overlay .success-blue-check{
  width:64px !important;
  height:64px !important;
  border-radius:50% !important;
  background:#3155f5 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  transform:scale(.55) !important;
  opacity:0 !important;
}

.app > #overlay .success-blue-check span{
  width:25px !important;
  height:14px !important;
  border-left:4px solid #fff !important;
  border-bottom:4px solid #fff !important;
  transform:rotate(-45deg) translate(2px,-2px) !important;
  display:block !important;
}

.app > #overlay .success-result.success-check-in .success-blue-check{
  animation:robuxSuccessCheck .32s cubic-bezier(.2,.9,.2,1) forwards !important;
}

.app > #overlay .success-result p{
  margin:18px 0 0 !important;
  font-size:18px !important;
  font-weight:750 !important;
  color:#202124 !important;
}

@keyframes robuxPaymentArc{
  to{transform:rotate(360deg)}
}

@keyframes robuxSuccessCheck{
  0%{transform:scale(.55);opacity:0}
  70%{transform:scale(1.08);opacity:1}
  100%{transform:scale(1);opacity:1}
}

/* =========================================================
   FINAL INTEGRATED FIXES
   ========================================================= */

/* The visual search keyboard must cover the friendship list, not sit behind it. */
#overlay > .sheet > .visual-ios-keyboard{
  z-index:10000 !important;
  position:absolute !important;
  isolation:isolate !important;
  pointer-events:none !important;
}
#overlay > .sheet > .visual-ios-keyboard.open{
  z-index:10000 !important;
  pointer-events:none !important;
}
#overlay > .sheet > .ios-accessory{
  z-index:10001 !important;
}

/* Keep the search content in a lower stacking layer. */
#overlay > .sheet > .sheet-body{
  position:relative !important;
  z-index:1 !important;
}

/* =========================================================
   AMOUNT GROUP — always centered, including every new send
   ========================================================= */
#overlay #amountStep .amount-display{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  width:max-content !important;
  min-width:0 !important;
  max-width:none !important;
  margin:5px auto 17px !important;
  padding:0 !important;
  gap:8px !important;
  position:relative !important;
  left:auto !important;
  right:auto !important;
  transform:none !important;
  overflow:visible !important;
  box-sizing:content-box !important;
}
#overlay #amountStep .amount-display > img{
  width:37px !important;
  height:37px !important;
  flex:0 0 37px !important;
  margin:0 !important;
}
#overlay #amountStep #amountInput{
  flex:0 0 auto !important;
  min-width:44px !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  text-align:left !important;
  box-sizing:content-box !important;
}

/* =========================================================
   SHEET TRANSITIONS — reusable on every cycle
   ========================================================= */
#overlay > .sheet.sheet-transitioning{
  will-change:transform !important;
}
#overlay > .sheet.sheet-transitioning.sheet-exit-down{
  transform:translateY(108%) !important;
  transition:transform .39s cubic-bezier(.55,0,1,.45) !important;
}
#overlay > .sheet.sheet-transitioning.sheet-enter-up{
  transform:translateY(108%) !important;
  transition:none !important;
}
#overlay > .sheet.sheet-transitioning:not(.sheet-exit-down):not(.sheet-enter-up){
  transform:translateY(0) !important;
  transition:transform .44s cubic-bezier(.2,.9,.2,1) !important;
}

/* =========================================================
   PROCESSING / CONFIRMATION — no hidden-attribute conflicts
   ========================================================= */
#overlay .processing-view,
#overlay .success-result{
  transition:none !important;
}
#overlay .processing-view.phase-hidden{
  display:none !important;
}
#overlay .processing-view.phase-active{
  display:flex !important;
}
#overlay .success-result.phase-hidden{
  display:none !important;
}
#overlay .success-result.phase-active{
  display:flex !important;
}

/* Static lock: ONLY the surrounding arc rotates. */
#overlay .processing-ring{
  width:78px !important;
  height:78px !important;
  border:2.5px solid transparent !important;
  border-top-color:#555 !important;
  border-right-color:#555 !important;
  border-radius:50% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
  animation:robuxPaymentArc 1.05s linear infinite !important;
}
#overlay .processing-lock{
  width:23px !important;
  height:26px !important;
  border:2px solid #555 !important;
  border-radius:3px !important;
  position:relative !important;
  box-sizing:border-box !important;
  background:transparent !important;
  transform:none !important;
  animation:none !important;
}
#overlay .processing-lock::before{
  content:"" !important;
  position:absolute !important;
  width:12px !important;
  height:11px !important;
  left:3.5px !important;
  top:-10px !important;
  border:2px solid #555 !important;
  border-bottom:0 !important;
  border-radius:8px 8px 0 0 !important;
  box-sizing:border-box !important;
}
#overlay .processing-lock span{
  position:absolute !important;
  width:3px !important;
  height:6px !important;
  left:8px !important;
  top:8px !important;
  background:#555 !important;
  border-radius:2px !important;
}
#overlay .processing-label{
  margin-top:17px !important;
  color:#777 !important;
  font-size:15px !important;
  font-weight:500 !important;
}

/* Final blue confirmation check, shown only after processing. */
#overlay .success-result{
  width:100% !important;
  height:100% !important;
  flex-direction:column !important;
  align-items:center !important;
  box-sizing:border-box !important;
  padding-top:58px !important;
}
#overlay .success-blue-check{
  width:64px !important;
  height:64px !important;
  border-radius:50% !important;
  background:#3155f5 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  transform:scale(.55) !important;
  opacity:0 !important;
}
#overlay .success-blue-check span{
  width:25px !important;
  height:14px !important;
  border-left:4px solid #fff !important;
  border-bottom:4px solid #fff !important;
  transform:rotate(-45deg) translate(2px,-2px) !important;
  display:block !important;
}
#overlay .success-result.success-check-in .success-blue-check{
  animation:robuxSuccessCheck .32s cubic-bezier(.2,.9,.2,1) forwards !important;
}
#overlay .success-result p{
  margin:18px 0 0 !important;
  font-size:18px !important;
  font-weight:750 !important;
  color:#202124 !important;
}
@keyframes robuxPaymentArc{
  to{transform:rotate(360deg)}
}
@keyframes robuxSuccessCheck{
  0%{transform:scale(.55);opacity:0}
  70%{transform:scale(1.08);opacity:1}
  100%{transform:scale(1);opacity:1}
}
#overlay .success-state #okBtn:disabled{
  opacity:.65 !important;
  pointer-events:none !important;
}

/* =========================================================
   ONLY REQUESTED CHANGE — PROCESSING LOCK + FINAL CHECK
   No keyboard/layout/step transitions are changed here.
   ========================================================= */

/* Lock is static. ONLY the surrounding progress arc rotates. */
#overlay .processing-ring{
  position:relative !important;
  width:78px !important;
  height:78px !important;
  border:0 !important;
  border-radius:50% !important;
  background:transparent !important;
  animation:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
}

#overlay .processing-ring::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  border-radius:50% !important;
  border:3px solid transparent !important;
  border-top-color:#555 !important;
  border-right-color:#555 !important;
  border-bottom-color:#555 !important;
  box-sizing:border-box !important;
  animation:robuxProcessingArcOnly 1.05s linear infinite !important;
}

#overlay .processing-lock{
  position:relative !important;
  z-index:2 !important;
  width:23px !important;
  height:26px !important;
  border:2px solid #555 !important;
  border-radius:3px !important;
  background:transparent !important;
  transform:none !important;
  animation:none !important;
  box-sizing:border-box !important;
}

#overlay .processing-lock::before{
  transform:none !important;
}

#overlay .processing-lock span{
  transform:none !important;
}

@keyframes robuxProcessingArcOnly{
  to{transform:rotate(360deg)}
}

/* Supplied blue confirmation icon: small and proportionate. */
#overlay .robux-success-check-image{
  width:64px !important;
  height:64px !important;
  object-fit:contain !important;
  display:block !important;
  margin:0 auto 14px !important;
}

/* Hide the final result completely until the 2-second processing phase ends. */
#overlay .success-result[hidden]{
  display:none !important;
}

/* =========================================================
   PROCESSING LOCK — USER-SUPPLIED STATIC ICON
   Only the surrounding progress arc rotates.
   ========================================================= */
#overlay .processing-ring{
  position:relative !important;
  width:78px !important;
  height:78px !important;
  border:0 !important;
  background:transparent !important;
  animation:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
}

#overlay .processing-ring::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  border-radius:50% !important;
  border:3px solid transparent !important;
  border-top-color:#555 !important;
  border-right-color:#555 !important;
  border-bottom-color:#555 !important;
  box-sizing:border-box !important;
  animation:robuxProcessingArcOnly 1.05s linear infinite !important;
  z-index:1 !important;
}

#overlay .processing-lock-image{
  position:relative !important;
  z-index:2 !important;
  width:30px !important;
  height:30px !important;
  display:block !important;
  object-fit:contain !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  transform:none !important;
  animation:none !important;
  flex:0 0 30px !important;
}

@keyframes robuxProcessingArcOnly{
  to{transform:rotate(360deg)}
}

/* =========================================================
   PROCESSING VISUAL — TWO COMPLETELY INDEPENDENT LAYERS
   Lock = static image.
   Arc = the ONLY rotating element.
   ========================================================= */
#overlay .processing-visual{
  position:relative !important;
  width:82px !important;
  height:82px !important;
  flex:0 0 82px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
  transform:none !important;
  animation:none !important;
}

#overlay .processing-arc{
  position:absolute !important;
  inset:0 !important;
  width:82px !important;
  height:82px !important;
  border-radius:50% !important;
  border:0 !important;
  border-top:3px solid #555 !important;
  border-right:3px solid #555 !important;
  border-bottom:3px solid #555 !important;
  border-left:3px solid transparent !important;
  box-sizing:border-box !important;
  transform-origin:50% 50% !important;
  animation:robuxArcSpin 1.05s linear infinite !important;
  z-index:1 !important;
}

#overlay .processing-lock-image{
  position:relative !important;
  width:30px !important;
  height:30px !important;
  min-width:30px !important;
  min-height:30px !important;
  max-width:30px !important;
  max-height:30px !important;
  object-fit:contain !important;
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  transform:none !important;
  animation:none !important;
  z-index:2 !important;
  flex:0 0 30px !important;
}

@keyframes robuxArcSpin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}

/* Prevent any older selector from rotating or styling the image itself. */
#overlay .processing-lock-image,
#overlay .processing-lock-image::before,
#overlay .processing-lock-image::after{
  transform:none !important;
  animation:none !important;
}

/* FINAL CHECK VISIBILITY FIX — do not use native [hidden] for successResult. */
#overlay .success-result.phase-hidden{
  display:none !important;
}
#overlay .success-result.phase-active{
  display:flex !important;
}
#overlay .robux-success-check-image{
  width:64px !important;
  height:64px !important;
  object-fit:contain !important;
  display:block !important;
  margin:0 auto 14px !important;
}

/* FINAL ARC FIX: animation controls transform; no static transform override. */
#overlay .processing-visual .processing-arc{
  transform-origin:50% 50% !important;
  animation:robuxArcSpin 1.05s linear infinite !important;
  will-change:transform !important;
}

#overlay .processing-visual .processing-lock-image{
  transform:none !important;
  animation:none !important;
  will-change:auto !important;
}

/* Temporary: hide only the Dynamic Island. */
.dynamic-island{
  display:none !important;
}
.dynamic-island span{
  display:none !important;
}

/* Android real keyboard: never render the former fake iPhone search keyboard. */
#overlay .visual-ios-keyboard,
#overlay .ios-accessory{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}


/* =========================================================
   TECLADO REAL DEL TELEFONO
   Se elimino el teclado falso de la app. La ventana de
   cantidad ya no necesita reservar el espacio vacio que
   ocupaba ese teclado: ahora se ajusta al alto de su
   contenido y queda anclada abajo, igual que confirmacion.
   ========================================================= */
.app > #overlay > .sheet.amount-state{
  top:584px !important;
  bottom:0 !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
}

.app > #overlay > .sheet.amount-state .amount{
  padding-bottom:24px !important;
}