body{margin:0;background:#0b1320;color:#c7d5e0;font-family:Arial}
      .wrap{max-width:820px;margin:110px auto;padding:0 18px}
      .card{background:#1b2838;border:1px solid #22324a;border-radius:14px;padding:18px}
      a{color:#7fff7f;text-decoration:none;font-weight:bold}
      .row{display:flex;gap:12px;align-items:center}
      .avatar{width:84px;height:84px;border-radius:16px;border:1px solid #22324a;object-fit:cover;background:#0f1a2b}
      h1{margin:0;color:#7fff7f}
      .small{opacity:.85;font-size:12px;margin-top:6px}
      
/* ===== Mobile tweaks ===== */
@media(max-width:640px){
  .navbar{padding:10px 12px; gap:10px; flex-wrap:wrap;}
  .navbar a{display:inline-flex; align-items:center; padding:8px 10px; border-radius:10px;}
  .container,.wrap{padding:14px;}
  .tools{gap:10px;}
  .box{min-width:0;}
  input[type="text"], input{min-width:0;width:100%;max-width:100%;}
  .searchRow{width:100%;}
  button,.btn{width:100%;}
  .card{min-height:auto;}
  .card img{align-self:center; width:120px; height:120px;}
  .pop{top:20px; max-height:80vh;}
}

*{box-sizing:border-box}
body{margin:0;background:#0b1320;color:#c7d5e0;font-family:Arial}
.navbar{background:#0f1a2b;padding:12px 20px;display:flex;gap:18px;align-items:center;border-bottom:1px solid #22324a;  flex-wrap:wrap;
}
.navbar a{color:#7fff7f;text-decoration:none;font-weight:bold}
.navbar .spacer{margin-left:auto}
.wrap{max-width:1100px;margin:auto;padding:24px}
.h1{font-size:22px;color:#7fff7f;font-weight:bold;margin:0 0 14px}

.panel{background:#1b2838;border:1px solid #22324a;border-radius:14px;padding:14px;box-shadow:0 10px 26px rgba(0,0,0,.25)}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.avatar{width:96px;height:96px;border-radius:16px;border:1px solid #22324a;object-fit:cover;background:#0f1a2b}
.small{font-size:12px;opacity:.85}
.stats{display:grid;grid-template-columns: repeat(4,1fr); gap:10px; margin-top:12px}
@media(max-width:980px){ .stats{grid-template-columns: repeat(2,1fr)} }
.stat{background:#0f1a2b;border:1px solid #22324a;border-radius:12px;padding:12px;min-width:0}
.stat .n{font-size:22px;color:#7fff7f;font-weight:bold;margin-top:6px}
.hr{height:1px;background:#22324a;margin:12px 0}
.linkList a{color:#7fff7f;text-decoration:none;font-weight:bold;word-break:break-word}
.sigBox{background:#0f1a2b;border:1px solid #22324a;border-radius:12px;padding:12px;margin-top:12px}
.sigPreview{background:#0b1b2a;border:1px dashed #22324a;border-radius:12px;padding:12px;overflow:hidden}
.sigImg{width:500px;height:100px;max-width:100%;object-fit:contain;display:block}

/* Buttons (used on public profile for PM link) */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:8px 12px;
  border-radius:12px;
  border:1px solid #22324a;
  background:#0f1a2b;
  color:#c7d5e0;
  text-decoration:none;
  font-weight:700;
}
.btn:hover{ background:#15243a; }