/*!************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[3]!./styles/globals.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************/
:root{
  --bg:#f2f4f7;
  --card:#ffffff;
  --text:#121417;
  --muted:#7b8794;
  --blue:#2f7cf6;
  --shadow: 0 12px 30px rgba(16,24,40,.10);
  --radius: 22px;
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: var(--bg);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Arial;
  color:var(--text);
}
.appShell{ max-width:520px; margin:0 auto; min-height:100vh; padding-bottom:90px; }
.page{ padding:14px 16px 18px; }

.topRow{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; }
.titleBlock{ display:flex; flex-direction:column; align-items:center; gap:2px; flex:1 1; }
.titleBlock .title{ font-weight:800; font-size:20px; }
.titleBlock .subtitle{ font-size:13px; color:var(--muted); margin-top:-2px; }

.iconBtn{ width:38px;height:38px; border-radius:12px; background:rgba(255,255,255,.9); box-shadow:var(--shadow); border:0; }

.closeBtn{ border:0; background:transparent; font-weight:800; font-size:18px; color:var(--text); padding:6px 6px; }

.pill{ background:rgba(255,255,255,.9); border-radius:18px; padding:10px 12px; box-shadow:var(--shadow); display:flex; align-items:center; justify-content:space-between; gap:10px; }
.pillLeft{ display:flex; align-items:center; gap:10px; }

.pillBtn{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; cursor:pointer; border:1px solid #e7ebf0; background:#f1f3f7; }
.pillBtnSquare{ border-radius:14px; }
.pillBtnRound{ border-radius:16px; }
.pillBtn.active{ background:var(--blue); border-color:transparent; }
.balanceText{ font-weight:900; font-size:26px; letter-spacing:.2px; }
.balanceText span{ color:#9aa6b2; font-weight:800; margin-left:6px; }


.profilePill{ margin-top:10px; width:-moz-fit-content; width:fit-content; padding:8px 12px; border-radius:18px; background:rgba(255,255,255,.85); box-shadow:var(--shadow); display:flex; align-items:center; gap:10px; }
.avatar{ width:26px;height:26px;border-radius:999px; background:#dfe7ef; border:1px solid #e7ebf0; overflow:hidden; flex:0 0 auto; }
.avatar img{ width:100%; height:100%; object-fit:cover; display:block; }

.card{ background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:14px; }
.h2{ font-size:26px; font-weight:900; margin:14px 0 10px; }

.btnPrimary{ width:100%; border:0; border-radius:18px; height:56px; font-weight:900; font-size:18px; color:#fff; background:#111; }
.btnBlue{ width:100%; border:0; border-radius:18px; height:56px; font-weight:900; font-size:18px; color:#fff; background:var(--blue); }
.btnGhost{ width:100%; border:1px solid #e7ebf0; border-radius:18px; height:54px; font-weight:900; font-size:18px; background:transparent; color:#111; }

.seg{ display:flex; gap:8px; padding:6px; border-radius:18px; background:#f1f3f7; border:1px solid #e7ebf0; width:-moz-fit-content; width:fit-content; }
.seg button{ border:0; border-radius:14px; padding:10px 14px; font-weight:800; background:transparent; color:#9aa6b2; }
.seg button.active{ background:#fff; box-shadow:0 6px 14px rgba(16,24,40,.08); color:#111; }

.bottomNav{ position:fixed; left:0; right:0; bottom:0; display:flex; justify-content:center; padding:10px 12px; }
.bottomNavInner{ width:min(520px, 100%); background:rgba(255,255,255,.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-radius:22px; box-shadow:var(--shadow); display:flex; justify-content:space-around; padding:10px 12px; border:1px solid #e7ebf0; }
.navItem{ width:64px; height:46px; border-radius:16px; display:flex; align-items:center; justify-content:center; color:#8a97a5; text-decoration:none; font-weight:900; }
.navItem.active{ color:var(--blue); background:rgba(47,124,246,.08); }

.smallMuted{ color:var(--muted); font-weight:700; }
.row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.mt12{ margin-top:12px; }
.mt16{ margin-top:16px; }