<style>
:root{
--bg:#0e0f12; --card:#16181d; --deep:#111316; --panel:#14171c; --stroke:rgba(255,255,255,.06);
--text:#e7eef6; --muted:#9aa9bd; --blue:#2e6f95; --blue2:#2a95d1; --good:#1ad16b;
--r:10px; --shadow:0 10px 26px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.03);
}
#container, body, html{background:var(--bg)}
.profile-wrap{max-width:1260px;margin:18px auto;padding:0 16px}
/* header/cover */
.profile-cover{
  background:var(--bg);
  height:120px;
}.profile-head{display:flex;gap:14px;align-items:flex-end;padding:0 18px 14px;margin-top:-60px}
.avatar{width:96px;height:96px;border-radius:6px;background:linear-gradient(180deg,#2a3448,#0d1118);border:1px solid var(--stroke);box-shadow:0 10px 22px rgba(0,0,0,.5);overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
.nameblock h1{margin:0;font-size:24px;font-weight:800}
.nameblock .role{color:var(--muted);margin-top:4px}




/* grid */
.grid{display:grid;gap:14px;margin-top:14px;grid-template-columns:350px 1fr 360px}
@media (max-width:1200px){.grid{grid-template-columns:1fr}}


.card{background:var(--card);border:1px solid var(--stroke);border-radius:var(--r);box-shadow:var(--shadow)}
.card .hd{background:linear-gradient(180deg,#2a455a,#22384a);color:#e9f6ff;border-bottom:1px solid var(--stroke);padding:8px 12px;font-size:12px;text-transform:uppercase;letter-spacing:.3px;border-top-left-radius:var(--r);border-top-right-radius:var(--r);position:relative}
.card .hd:after{content:"";position:absolute;right:0;top:0;bottom:0;width:38%;background:linear-gradient(135deg,rgba(255,255,255,.06),transparent)}
.card .bd{padding:12px}


/* stat tiles */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tile{background:var(--deep);border:1px solid var(--stroke);border-radius:8px;padding:14px;text-align:center}
.tile b{display:block;font-size:18px;margin-bottom:2px}
.tile .muted{color:var(--muted);font-size:12px}


/* info list */
.infobox{display:grid;gap:10px}
.infobox .row{display:flex;justify-content:space-between;gap:10px;align-items:center;background:var(--deep);border:1px solid var(--stroke);border-radius:8px;padding:10px 12px}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;background:rgba(26,209,107,.1);border:1px solid rgba(26,209,107,.35);color:#b4ffd9;font-size:12px}
.small{color:var(--muted);font-size:12px}


/* groups (center card) */
.groups{display:flex;justify-content:center}
.groups .btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--stroke);background:linear-gradient(180deg,#1b2430,#0e141c);padding:8px 14px;border-radius:6px}


/* right sidebar lists */
.vlist{display:grid;gap:10px}
.vitem{display:flex;align-items:center;gap:10px;background:var(--deep);border:1px solid var(--stroke);border-radius:8px;padding:8px 10px}
.vava{width:28px;height:28px;border-radius:50%;overflow:hidden;border:1px solid var(--stroke)}


/* latest threads */
.threadlist{display:grid;gap:8px}
.threadlist .trow{display:flex;justify-content:space-between;gap:8px;background:var(--deep);border:1px solid var(--stroke);border-radius:8px;padding:8px 10px}
/* ---- push the whole profile further down ---- */
:root { --profile-offset: 40px; }   /* hier Wert anpassen: 20–80px */

.profile-wrap { 
  margin-top: var(--profile-offset) !important;
}

/* falls dein Cover den Header überlappt: kein Negativ-Offset mehr */
.profile-head { 
  margin-top: 0 !important; 
  padding-top: 8px;
}

/* optional: zusätzlich gesamten Inhaltsbereich etwas nach unten */
#content .wrapper,
.inner-container {
  padding-top: 10px;   /* bei Bedarf erhöhen/verkleinern */
}

</style>