*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #f2f2f7;--surface: #ffffff;--primary: #2563eb;--primary-light: #eff6ff;--text: #111827;--text-muted: #6b7280;--border: #e5e7eb;--nav-h: 68px;--radius: 16px;--shadow: 0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.04)}@media(prefers-color-scheme:dark){:root{--bg: #1c1c1e;--surface: #2c2c2e;--text: #f2f2f7;--text-muted: #8e8e93;--border: #3a3a3c;--primary-light: #1e3a5f}}html,body,#root{height:100%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}.app{display:flex;flex-direction:column;height:100%;max-width:480px;margin:0 auto}.main-content{flex:1;overflow-y:auto;padding-bottom:var(--nav-h)}.page{padding:20px 16px 0}.page-title{font-size:22px;font-weight:700;letter-spacing:-.3px;margin-bottom:16px}.card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;margin-bottom:12px}.profile-card{display:flex;align-items:center;gap:16px}.avatar{width:56px;height:56px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}.avatar img{width:100%;height:100%;object-fit:cover}.avatar span{color:#fff;font-size:20px;font-weight:600}.profile-name{font-size:17px;font-weight:600}.profile-username{font-size:13px;color:var(--text-muted);margin-top:2px}.balance-card{text-align:left}.balance-label{font-size:13px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}.balance-amount{font-size:40px;font-weight:700;letter-spacing:-1px;line-height:1;margin-bottom:20px}.balance-amount.skeleton{color:var(--border)}.currency{font-size:28px;font-weight:500;color:var(--text-muted)}.balance-error{font-size:14px;color:#ef4444;margin-bottom:20px}.topup-btn{width:100%;padding:14px;background:var(--primary);color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:opacity .15s}.topup-btn:active{opacity:.8}.topup-amounts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px}.topup-amount-btn{padding:12px;background:var(--primary);color:#fff;border:none;border-radius:10px;font-size:15px;font-weight:600;cursor:pointer;transition:opacity .15s}.topup-amount-btn:active{opacity:.8}.topup-amount-btn:disabled{opacity:.5;cursor:default}.topup-cancel-btn{grid-column:1 / -1;padding:10px;background:transparent;color:var(--text-secondary, #888);border:1px solid var(--border, #e0e0e0);border-radius:10px;font-size:14px;cursor:pointer;transition:opacity .15s}.topup-cancel-btn:active{opacity:.7}.stats-card{display:flex;align-items:center;justify-content:space-between}.stats-label{font-size:14px;color:var(--text-muted)}.stats-value{font-size:15px;font-weight:600}.gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.gallery-item{border-radius:12px;overflow:hidden;cursor:pointer;aspect-ratio:1 / 1;background:var(--surface);box-shadow:var(--shadow)}.gallery-img-wrap{width:100%;height:100%;opacity:0;transition:opacity .3s}.gallery-img-wrap.loaded{opacity:1}.gallery-img-wrap img{width:100%;height:100%;object-fit:cover;display:block}.loader-sentinel{display:flex;justify-content:center;padding:16px;min-height:40px}.spinner{width:24px;height:24px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.empty-msg,.error-msg{text-align:center;color:var(--text-muted);margin-top:48px;font-size:15px}.error-msg{color:#ef4444}.modal-backdrop{position:fixed;inset:0;background:#0009;display:flex;align-items:flex-end;z-index:100;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-card{background:var(--surface);border-radius:var(--radius) var(--radius) 0 0;width:100%;max-height:90vh;overflow-y:auto;position:relative;animation:slideUp .25s ease}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.modal-img{width:100%;display:block;border-radius:var(--radius) var(--radius) 0 0}.modal-info{padding:16px 20px 40px}.modal-prompt{font-size:14px;line-height:1.5;color:var(--text);margin-bottom:8px}.modal-meta{font-size:13px;color:var(--text-muted)}.modal-share{margin-top:14px;width:100%;padding:10px;background:var(--primary);color:#fff;border:none;border-radius:var(--radius);font-size:14px;font-weight:600;cursor:pointer}.modal-close{position:absolute;top:12px;right:12px;background:#0006;color:#fff;border:none;border-radius:50%;width:32px;height:32px;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center}.bottom-nav{position:fixed;bottom:0;left:50%;transform:translate(-50%);width:100%;max-width:480px;height:var(--nav-h);background:var(--surface);border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-around;z-index:50;padding-bottom:env(safe-area-inset-bottom)}.nav-item{display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:none;color:var(--text-muted);font-size:11px;font-weight:500;cursor:pointer;padding:8px 24px;border-radius:12px;transition:color .15s,background .15s}.nav-item svg{width:24px;height:24px}.nav-item--active{color:var(--primary)}.nav-item:active{background:var(--primary-light)}