:root{--bg:#f4f7fb;--card:#ffffff;--muted:#6b7280;--accent:#0b63ff;--radius:16px}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial;background:var(--bg);color:#071223}
.app{min-height:100vh;display:flex;flex-direction:column}
header{padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;gap:12px;align-items:center}
.logo{width:56px;height:56px;border-radius:14px;background:linear-gradient(135deg,var(--accent),#3aa0ff);display:grid;place-items:center;color:#fff;font-weight:800;font-size:18px;box-shadow:0 8px 30px rgba(11,99,255,0.12)}
.titles{line-height:1}
.titles .title{font-weight:800;font-size:18px}
.titles .sub{color:var(--muted);font-size:13px}

main{flex:1;padding:16px;max-width:920px;margin:0 auto;width:100%;display:grid;grid-template-columns:1fr;gap:14px}
.card{background:var(--card);border-radius:var(--radius);padding:16px;box-shadow:0 10px 30px rgba(6,18,48,0.06)}
.wallet{background:linear-gradient(135deg,#0b63ff,#2f8eff);color:white;border-radius:20px;padding:18px;box-shadow:0 18px 40px rgba(11,99,255,0.14)}
.wallet-top{display:flex;justify-content:space-between;align-items:center}
.chip{width:50px;height:34px;border-radius:8px;background:rgba(255,255,255,0.12)}
.card-num{margin-top:12px;font-weight:700;letter-spacing:3px}
.holder{display:flex;justify-content:space-between;align-items:center;margin-top:12px}
.holder .name{font-weight:700}
.balance{font-weight:900;font-size:22px}

.actions{display:flex;gap:10px;margin-top:14px}
.btn{flex:1;padding:12px;border-radius:12px;border:none;font-weight:800;background:white;color:var(--accent);cursor:pointer}
.btn.ghost{flex:0;padding:10px;border-radius:12px;border:1px solid rgba(255,255,255,0.12);background:transparent;color:white}
.controls{display:flex;gap:10px;align-items:center}
.input{padding:10px;border-radius:10px;border:1px solid #e8eef8;font-size:14px}
.coins{display:flex;gap:12px;overflow:auto;padding-top:10px}
.coin{min-width:140px;background:linear-gradient(180deg,#fff,#fbfdff);padding:12px;border-radius:12px;border:1px solid #eef6ff;box-shadow:0 8px 20px rgba(6,18,48,0.04)}

.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.design{position:relative;border-radius:12px;overflow:hidden;height:120px;cursor:pointer}
.design img{width:100%;height:100%;object-fit:cover;display:block}
.design .meta{position:absolute;left:10px;bottom:10px;color:white;font-weight:800;text-shadow:0 6px 18px rgba(0,0,0,0.4)}
.showhide{position:absolute;top:8px;right:8px;background:rgba(255,255,255,0.95);padding:6px 8px;border-radius:9px;font-weight:700;color:#071223}

nav.bottom{position:fixed;left:0;right:0;bottom:0;height:76px;background:#fff;display:flex;align-items:center;justify-content:space-around;padding:8px 18px;box-shadow:0 -10px 30px rgba(6,18,48,0.06)}
.nav-item{font-size:13px;color:#18304a;text-align:center}

.modal{position:fixed;inset:0;background:rgba(4,12,32,0.55);display:none;align-items:center;justify-content:center;padding:16px}
.modal .panel{width:100%;max-width:520px;background:white;border-radius:12px;padding:14px}
.small{font-size:13px;color:var(--muted)}

@media(min-width:820px){main{grid-template-columns:1fr 360px;align-items:start}}
@media(min-width:1100px){main{max-width:1100px}}