/* Basic reset and variables */
:root{
  --bg:#0f1115;
  --card:#121318;
  --muted:#9aa4b2;
  --accent-from: #ff7a59;
  --accent-to: #7b61ff;
  --radius:14px;
  --gap:12px;
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

.mdp-frame{
  max-width:420px;margin:20px auto;border-radius:20px;overflow:hidden;
  background:linear-gradient(180deg,var(--bg),#08090b);
  border:1px solid rgba(255,255,255,0.03);
  box-shadow:0 20px 40px rgba(2,6,23,0.65);
  color:#e6eef8;padding:16px;box-sizing:border-box;
}

.mdp-header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.mdp-profile{display:flex;gap:12px;align-items:center}
.mdp-avatar{width:50px;height:50px;border-radius:12px;background:linear-gradient(135deg,var(--accent-to),var(--accent-from));display:flex;align-items:center;justify-content:center;font-weight:700}
.mdp-name{font-weight:600}
.mdp-small{color:var(--muted);font-size:13px}
.mdp-actions{display:flex;gap:8px}
.mdp-icon{background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.02);padding:8px;border-radius:10px;cursor:pointer}

/* balance */
.mdp-balance{display:flex;justify-content:space-between;align-items:center;padding:12px;margin-top:12px;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);border:1px solid rgba(255,255,255,0.02)}
.mdp-amount{font-weight:700;font-size:20px}
.mdp-bactions{display:flex;gap:8px}
.mdp-btn{background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.03);padding:8px 10px;border-radius:10px;cursor:pointer}
.mdp-btn-primary{background:linear-gradient(90deg,var(--accent-from),var(--accent-to));border:none;color:white;padding:8px 12px;border-radius:10px;cursor:pointer}

/* features grid */
.mdp-features{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.mdp-tile{background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.015));padding:12px;border-radius:12px;min-height:88px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:transform .15s ease}
.mdp-tile:hover{transform:translateY(-6px)}
.mdp-tile-ico{font-size:20px;margin-bottom:8px}
.mdp-hidden{opacity:0.28;pointer-events:none}

/* media posts */
.mdp-media{margin-top:14px;padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,0.02);background:linear-gradient(90deg, rgba(123,97,255,0.03), rgba(255,122,89,0.02))}
.mdp-media-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.mdp-posts{display:flex;flex-direction:column;gap:10px}
.mdp-post{display:flex;gap:10px;align-items:center}
.mdp-thumb{width:86px;height:60px;border-radius:8px;background-size:cover;background-position:center;flex-shrink:0}
.mdp-post-meta h3{margin:0;font-size:14px}
.muted{color:var(--muted);font-size:12px}

/* bottom nav */
.mdp-spacer{height:12px}
.mdp-nav{display:flex;align-items:center;justify-content:space-around;height:72px;border-top:1px solid rgba(255,255,255,0.02);position:relative;margin-top:8px}
.mdp-nav-item{font-size:12px;color:var(--muted);cursor:pointer}
.mdp-nav-item.active{color:#fff}
.mdp-fab-wrap{position:absolute;left:50%;transform:translateX(-50%);top:-28px}
.mdp-fab{width:64px;height:64px;border-radius:18px;background:linear-gradient(135deg,var(--accent-from),var(--accent-to));display:flex;align-items:center;justify-content:center;color:white;border:4px solid rgba(255,255,255,0.03);cursor:pointer;font-size:26px}

/* modal */
.mdp-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.5);z-index:9999}
.mdp-modal[aria-hidden="false"]{display:flex}
.mdp-modal-panel{background:var(--card);padding:16px;border-radius:12px;max-width:420px;width:92%;box-shadow:0 12px 30px rgba(0,0,0,0.6)}
.mdp-modal-close{float:right;background:none;border:none;color:var(--muted);cursor:pointer;font-size:18px}
.mdp-modal-panel label{display:block;margin-bottom:8px}
.mdp-modal-panel input, .mdp-modal-panel textarea{width:100%;padding:8px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:rgba(255,255,255,0.01);color:inherit}

/* small */
.mdp-loading{color:var(--muted)}
.mdp-feedback{margin-top:10px;color:var(--muted)}

/* responsive */
@media (max-width:420px){
  .mdp-frame{margin:8px;border-radius:16px;padding:12px}
  .mdp-avatar{width:44px;height:44px}
  .mdp-fab{width:56px;height:56px}
}