/* Modern mobile UI. Presentation-only layer; loaded after existing payment styles. */
.miniapp-body {
    --bg:#0b1019; --surface:#141c29; --surface-strong:#182231;
    --line:rgba(185,204,234,.12); --text:#f4f7fc; --muted:#95a3b8;
    --ui-mint:#b3f1d9; --ui-mint-ink:#143329; --ui-gold:#e7c694;
    background:radial-gradient(ellipse at 95% -10%,#21324466,transparent 42%),#0b1019;
    color:var(--text); -webkit-font-smoothing:antialiased;
}
.miniapp-body .app-shell { width:min(100%,520px); padding:12px 18px calc(110px + env(safe-area-inset-bottom)); }
.miniapp-body .app-header {
    grid-template-columns:minmax(0,1fr) 42px 42px; gap:8px;
    padding:10px 0 16px; margin-bottom:4px; background:rgba(11,16,25,.93);
    border:0; box-shadow:none; -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
}
.miniapp-body .user-chip { gap:10px; border:0; background:none; padding:0; border-radius:0; }
.miniapp-body .user-chip img { width:42px; height:42px; border-radius:15px; border:1px solid #ffffff26; }
.miniapp-body .user-chip small { font-size:.75rem; color:var(--muted); line-height:1.4; margin-bottom:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.miniapp-body .user-chip strong { font-size:.9375rem; line-height:1.3; font-weight:650; }
.miniapp-body .icon-btn { display:grid; place-items:center; width:42px; height:42px; min-height:42px; border-radius:14px; background:#ffffff05; border:1px solid var(--line); color:#d3deed; }
.miniapp-body .with-badge b { min-width:24px; height:20px; padding:0 4px; font-size:.75rem; line-height:1; background:#c7edda; color:#132a23; right:-3px; top:-4px; border:2px solid var(--bg); }
.miniapp-body .ui-icon { width:22px; height:22px; flex-shrink:0; vertical-align:middle; }
.miniapp-body .ui-page-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:10px 0 18px; }
.miniapp-body .ui-page-heading h1 { font-size:1.75rem; line-height:1.2; margin:0; font-weight:750; letter-spacing:-.04em; }
.miniapp-body .ui-eyebrow { font-size:.75rem; letter-spacing:.13em; font-weight:700; color:#9aaac0; }
.miniapp-body .banner-slider { border-radius:20px; border:1px solid #b5c7e51a; box-shadow:none; }
.miniapp-body .banner-slider img { transform:none; }
.miniapp-body .ticker { margin:10px 0 18px; border:0; background:transparent; border-radius:0; font-size:.8125rem; }
.miniapp-body .ticker span { padding:4px 0; line-height:1.5; }
.miniapp-body .ui-task-card {
    padding:20px; border-radius:24px; background:linear-gradient(125deg,#c7f2e0,#aaddd3);
    color:#15392f; border:1px solid #edfff266; box-shadow:0 12px 32px #0002;
}
.miniapp-body .ui-card-top { display:flex; align-items:center; gap:10px; }
.miniapp-body .ui-task-card .ui-eyebrow { color:#35584c; }
.miniapp-body .ui-icon-tile { display:grid; place-items:center; width:36px; height:36px; flex-shrink:0; border-radius:11px; background:#133c2e12; color:#254b3c; }
.miniapp-body .ui-task-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:12px; margin:17px 0; }
.miniapp-body .ui-task-heading h2 { margin:0; font-size:1.8rem; line-height:1.06; letter-spacing:-.045em; font-weight:800; }
.miniapp-body .ui-task-count { min-width:0; text-align:right; padding-bottom:2px; }
.miniapp-body .ui-task-count strong { display:block; font-size:1.35rem; line-height:1.2; font-weight:800; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.miniapp-body .ui-task-count span { display:block; font-size:.75rem; color:#345c4d; margin-top:5px; }
.miniapp-body #dailyTaskProgress { appearance:none; -webkit-appearance:none; display:block; width:100%; height:6px; border:0; overflow:hidden; border-radius:99px; background:#174b3224; accent-color:#214f3f; }
.miniapp-body #dailyTaskProgress::-webkit-progress-bar { background:#174b3224; border-radius:99px; }
.miniapp-body #dailyTaskProgress::-webkit-progress-value { background:#214f3f; border-radius:99px; }
.miniapp-body #dailyTaskProgress::-moz-progress-bar { background:#214f3f; border-radius:99px; }
.miniapp-body .ui-task-bottom { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; }
.miniapp-body .ui-task-bottom > span { font-size:.8125rem; color:#315646; }
.miniapp-body .ui-start-button { display:flex; align-items:center; justify-content:center; gap:10px; min-height:44px; padding:0 15px; border-radius:13px; color:#effff8; background:#163b2d; box-shadow:0 4px 10px #173e2720; font-size:.875rem; font-weight:700; }
.miniapp-body .ui-start-button .ui-icon { width:17px; height:17px; }
.miniapp-body .ui-section-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:24px 0 12px; }
.miniapp-body .ui-section-heading h2 { margin:0; font-size:.9375rem; font-weight:650; letter-spacing:-.015em; }
.miniapp-body .ui-status { display:flex; align-items:center; gap:5px; color:#a7c8b9; font-size:.75rem; }
.miniapp-body .ui-status strong { font-weight:500; text-transform:capitalize; }
.miniapp-body .ui-status .ui-icon { width:14px; height:14px; }
.miniapp-body .ui-stats-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.miniapp-body .ui-stat-card { position:relative; display:flex; flex-direction:column; align-items:flex-start; padding:16px; gap:7px; border-radius:18px; background:#151e2b; border:1px solid var(--line); color:var(--text); min-width:0; text-align:left; }
.miniapp-body .ui-stat-icon { display:grid; place-items:center; width:29px; height:29px; margin-bottom:3px; }
.miniapp-body .ui-stat-card > span:not(.ui-stat-icon) { font-size:.8125rem; color:#99a9be; }
.miniapp-body .ui-stat-card strong { font-size:1.2rem; font-weight:700; line-height:1.3; overflow-wrap:anywhere; }
.miniapp-body .ui-stat-arrow { position:absolute; top:21px; right:13px; width:16px; height:16px; color:#708199; }
.miniapp-body .ui-gold { color:#e3c694; }
.miniapp-body .ui-coral { color:#f0b199; }
.miniapp-body .ui-violet { color:#c4b8ed; background:#9f8ed419; }
.miniapp-body .ui-mint { color:#a7ddc3; }
.miniapp-body .ui-checkin-card { display:flex; align-items:center; gap:12px; padding:16px; margin-top:12px; border-radius:18px; border:1px solid var(--line); background:#141d2a; }
.miniapp-body .ui-checkin-card > div { min-width:0; flex:1; }
.miniapp-body .ui-checkin-card h2 { margin:0; font-size:.875rem; font-weight:650; }
.miniapp-body .ui-checkin-card p { margin:4px 0 0; color:#9bacbf; font-size:.75rem; line-height:1.4; }
.miniapp-body .ui-checkin-card button { min-height:42px; padding:0 13px; border-radius:12px; border:1px solid #c7c4ee30; color:#e3dffc; background:#bbb1eb10; font-size:.8125rem; font-weight:700; }
.miniapp-body .ui-profile-identity { display:grid; grid-template-columns:64px minmax(0,1fr); gap:15px; align-items:center; padding:20px; border:1px solid #aac1e21a; background:linear-gradient(130deg,#1b283b,#131c2b); border-radius:22px; }
.miniapp-body #profilePhoto { width:64px; height:64px; border-radius:21px; object-fit:cover; border:2px solid #e1eafa35; }
.miniapp-body .ui-profile-details { min-width:0; }
.miniapp-body .ui-profile-details h2 { font-size:1.0625rem; line-height:1.3; letter-spacing:-.02em; overflow-wrap:anywhere; margin:0; }
.miniapp-body .ui-profile-details p { font-size:.8125rem; color:#99abc2; margin:4px 0 8px; overflow-wrap:anywhere; }
.miniapp-body .ui-plan-pill { display:inline-block; padding:3px 9px; font-size:.75rem; color:#e7cc9b; border:1px solid #e7cc9b26; border-radius:6px; background:#e7cc9b0b; }
.miniapp-body .ui-profile-id { display:flex; align-items:center; justify-content:space-between; gap:12px; grid-column:1 / -1; border-top:1px solid var(--line); padding-top:12px; font-size:.75rem; }
.miniapp-body .ui-profile-id span { color:#92a3b9; }
.miniapp-body .ui-profile-id strong { font-size:.8125rem; font-weight:500; font-variant-numeric:tabular-nums; color:#ccd8e8; overflow-wrap:anywhere; }
.miniapp-body .ui-text-button { display:inline-flex; align-items:center; justify-content:flex-end; gap:6px; min-height:36px; padding:4px 0 4px 8px; background:none; color:#b6e3ce; font-size:.8125rem; font-weight:600; }
.miniapp-body .ui-text-button .ui-icon { width:16px; height:16px; }
.miniapp-body .ui-profile-balances { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.miniapp-body .ui-balance-card { display:flex; align-items:flex-start; flex-direction:column; padding:17px 14px; gap:8px; border-radius:19px; min-width:0; }
.miniapp-body .ui-balance-account { background:#b8e9d4; border:1px solid #d6f9e68a; color:#14382b; }
.miniapp-body .ui-balance-withdraw { background:#1c2738; border:1px solid #a4bdd528; color:#f0f5fc; }
.miniapp-body .ui-balance-icon { display:grid; place-items:center; width:29px; height:29px; margin-bottom:5px; border-radius:9px; background:#15432b12; }
.miniapp-body .ui-balance-withdraw .ui-balance-icon { background:#c3d6ee12; color:#c3d6ee; }
.miniapp-body .ui-balance-card > span:not(.ui-balance-icon) { font-size:.8125rem; font-weight:500; line-height:1.3; }
.miniapp-body .ui-balance-card strong { font-size:clamp(1.0625rem,4.5vw,1.4rem); line-height:1.35; font-weight:750; letter-spacing:-.035em; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.miniapp-body .ui-balance-card small { font-size:.75rem; opacity:.72; }
.miniapp-body .ui-menu-list { padding:0 16px; border:1px solid var(--line); border-radius:20px; background:#151f2e; }
.miniapp-body .ui-menu-list button { display:flex; align-items:center; width:100%; padding:17px 0; gap:12px; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--text); text-align:left; }
.miniapp-body .ui-menu-list button:last-child { border-bottom:0; }
.miniapp-body .ui-menu-icon { display:grid; place-items:center; width:36px; height:36px; flex-shrink:0; border-radius:11px; background:#c9daec08; }
.miniapp-body .ui-menu-copy { display:block; flex:1; min-width:0; }
.miniapp-body .ui-menu-copy strong { display:block; font-size:.875rem; font-weight:600; }
.miniapp-body .ui-menu-copy small { display:block; font-size:.75rem; color:#97a7bb; margin-top:3px; }
.miniapp-body .ui-menu-list button > .ui-icon { color:#6f829b; width:17px; height:17px; }
.miniapp-body .ui-profile-banner { margin-top:22px; }
/* Shared surfaces keep the new style consistent with the working wallet. */
.miniapp-body .section-heading { margin:20px 0; }
.miniapp-body .section-heading > span { color:#93a5bb; font-size:.75rem; }
.miniapp-body .section-heading h2 { font-size:1.75rem; }
.miniapp-body .section-heading p { font-size:.875rem; color:var(--muted); }
.miniapp-body .plan-balance-grid article { background:#162132; border:1px solid var(--line); border-radius:18px; }
.miniapp-body #walletView .plan-balance-grid article:first-child { background:#b8e9d4; }
.miniapp-body #walletView .plan-balance-grid article:first-child span, .miniapp-body #walletView .plan-balance-grid article:first-child strong { color:#14382b; }
.miniapp-body .wallet-panel { background:#131d2b; border:1px solid var(--line); border-radius:20px; }
.miniapp-body .primary-btn { background:#b8e9d4; color:#15392c; border-radius:13px; box-shadow:none; min-height:46px; }
.miniapp-body .tabs { background:#080e18; border:1px solid #b5c7e50c; }
.miniapp-body .tabs button { color:#a5b5c8; font-size:.8125rem; font-weight:600; }
.miniapp-body .tabs button.active { background:#243246; color:#f3f7fc; box-shadow:none; }
.miniapp-body input, .miniapp-body select, .miniapp-body textarea { background:#0b1421; border-color:#9ab0cf28; }
.miniapp-body .bottom-nav {
    width:min(calc(100% - 28px),484px); bottom:calc(12px + env(safe-area-inset-bottom));
    padding:6px; gap:3px; border-radius:25px; border:1px solid #bfd0ea29;
    background:linear-gradient(120deg,#2b3a4ee0,#152235ed);
    -webkit-backdrop-filter:blur(22px) saturate(150%); backdrop-filter:blur(22px) saturate(150%);
    box-shadow:inset 0 1px 0 #f3f8ff24,0 10px 32px #0007;
}
.miniapp-body .bottom-nav button { min-height:55px; gap:5px; padding:6px 1px; border-radius:19px; font-size:.75rem; color:#9faec2; font-weight:500; }
.miniapp-body .bottom-nav svg { width:21px; height:21px; }
.miniapp-body .bottom-nav button.active { background:linear-gradient(135deg,#c7f2e02a,#c7f2e00c); border:1px solid #d4f3e62e; color:#ccf0df; box-shadow:inset 0 1px 0 #edfff31a; }
.miniapp-body button:focus-visible, .miniapp-body input:focus-visible, .miniapp-body select:focus-visible { outline:2px solid #b8e9d4; outline-offset:3px; }
@media (min-width:600px) { .miniapp-body .app-shell { padding-top:20px; } }
@media (max-width:359px) {
    .miniapp-body .app-shell { padding-left:12px; padding-right:12px; }
    .miniapp-body .ui-task-card { padding:17px; }
    .miniapp-body .ui-task-heading h2 { font-size:1.6rem; }
    .miniapp-body .ui-task-count strong { font-size:1.125rem; }
    .miniapp-body .ui-balance-card { padding:14px 11px; }
    .miniapp-body .ui-profile-identity { padding:16px; }
}
@media (prefers-reduced-transparency:reduce) {
    .miniapp-body .bottom-nav { background:#1d2a3c; backdrop-filter:none; -webkit-backdrop-filter:none; }
}
@media (prefers-reduced-motion:reduce) {
    .miniapp-body *, .miniapp-body *::before, .miniapp-body *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition:none !important; }
}