/* ============ Marvel RPG – Modernes User CP ============ */
:root{
  --main:#343528;                 /* Panels / Rahmen */
  --boxes:rgba(30,31,17,.90);     /* Box-Hintergrund */
  --text:#A4998A;                 /* Text */
  --contrast:#A4998A;             /* Akzent */
  --ui:'Antonio',system-ui,sans-serif;
  --ub:'Gilda Display',serif;
  --font:'Jomolhari',serif;
  --line:#2a2b20;                 /* dünne Linien */
  --radius:16px;
  --gap:14px;
}

.usercp{
  max-width:min(1200px,96vw);
  margin:26px auto 40px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.02)), var(--boxes);
  border:1px solid var(--main);
  border-radius:20px;
  box-shadow:0 30px 70px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.03);
  overflow:hidden;
}

/* Top-Leiste */
.usercp .ucp-top{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.06));
}
.usercp .ucp-user{ display:flex; align-items:center; gap:12px; }
.usercp .ucp-user .name{ font:700 28px/1 var(--ub); color:var(--contrast); }
.usercp .ucp-user .role{
  font:700 11px/1 var(--ui); letter-spacing:2px; text-transform:uppercase;
  color:var(--text); border:1px solid var(--main); border-radius:999px;
  padding:4px 10px; background:rgba(52,53,40,.35);
}
.usercp .ucp-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.usercp .tag{
  font:700 11px/1 var(--ui); letter-spacing:2px; text-transform:uppercase;
  border:1px solid var(--contrast); color:#1E1F11; background:var(--contrast);
  border-radius:999px; padding:4px 10px;
}
.usercp .tag.ghost{ background:transparent; color:var(--text); border-color:var(--main); }

/* Grid statt Floats */
.usercp .grid{
  display:grid; gap:var(--gap);
  grid-template-columns: 280px 1fr 260px;
  padding:16px;
}
@media (max-width:1000px){ .usercp .grid{ grid-template-columns:260px 1fr; } .usercp .col-right{ grid-column:1 / -1; } }
@media (max-width:720px){ .usercp .grid{ grid-template-columns:1fr; } }

/* Karten */
.usercp .card{
  background:var(--boxes);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px;
  position:relative;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 10px 30px rgba(0,0,0,.25);
}
.usercp .card .head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font:700 12px/1 var(--ui); letter-spacing:2px; text-transform:uppercase;
  color:var(--contrast); margin-bottom:10px;
}
.usercp .card .head .sub{ font:600 11px/1 var(--ui); color:var(--text); }

/* Avatarbox links */
.usercp .avatar-box{ display:grid; gap:12px; text-align:center; }
.usercp .avatar{
  width:200px; height:200px; margin:0 auto; border-radius:14px;
  border:1px solid var(--main); overflow:hidden; box-shadow:0 14px 30px rgba(0,0,0,.35);
}
.usercp .avatar img{ width:100%; height:100%; object-fit:cover; }

/* Buttons / Links */
.usercp .btn{
  display:inline-block; font:700 12px/1 var(--ui); letter-spacing:1px; text-transform:uppercase;
  border:1px solid var(--main); border-radius:10px; padding:8px 12px;
  color:var(--text); background:#2a2b20; text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.usercp .btn:hover{ transform:translateY(-1px); border-color:var(--contrast); box-shadow:0 8px 24px rgba(164,153,138,.22); }
.usercp .btn.primary{ background:var(--contrast); color:#1E1F11; border-color:var(--contrast); }

/* Linklisten */
.usercp .list{ display:grid; gap:6px; }
.usercp .list a{
  display:block; text-decoration:none; color:var(--text);
  padding:8px 10px; border:1px solid var(--main); border-radius:10px; background:#2a2b20;
  font:700 12px/1 var(--ui);
}
.usercp .list a:hover{ border-color:var(--contrast); }

/* Schnell-Aktionen (Kacheln) */
.usercp .tiles{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:12px; }
.usercp .tile{
  background:var(--main); border:1px solid var(--line); border-radius:14px; padding:12px;
  display:grid; grid-template-columns:46px 1fr; gap:12px; align-items:center;
  transition: transform .15s ease, box-shadow .15s ease;
}
.usercp .tile:hover{ transform:translateY(-2px); box-shadow:0 16px 40px rgba(0,0,0,.25); }
.usercp .tile .ic{ display:grid; place-items:center; width:46px; height:46px; border-radius:12px; background:#1E1F11; font-size:18px; }
.usercp .tile .t{ font:700 12px/1 var(--ui); letter-spacing:2px; text-transform:uppercase; color:var(--contrast); }
.usercp .tile .s{ font:600 12px/1.2 var(--ui); color:var(--text); }

/* Notizen */
.usercp textarea{
  width:100%; min-height:140px; background:#1E1F11; color:var(--text);
  border:1px solid var(--main); border-radius:10px; padding:10px;
  font:16px/1.5 var(--font);
}