/* === Marvel RPG – UserCP Profile (edit_profile) === */
:root{
  --main:#343528;                 /* Pane/Lines */
  --boxes:rgba(30,31,17,.90);     /* Box-Hintergrund */
  --panel:#1E1F11;                /* dunkle Panels */
  --text:#A4998A;                 /* Text */
  --accent:#A4998A;               /* Akzent */
  --ui:'Antonio',system-ui,sans-serif;
  --ub:'Gilda Display',serif;
  --font:'Jomolhari',serif;
  --line: color-mix(in srgb, var(--main) 70%, #000);
  --radius:16px; --gap:14px;
}

.ucp-pro{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; position:relative;}
.ucp-pro:before,.ucp-pro:after{content:"";position:absolute;border:2px solid var(--accent);opacity:.45;}
.ucp-pro:before{inset:12px auto auto 12px;width:120px;height:42px;border-right:none;border-bottom:none;border-radius:12px 0 0 0;}
.ucp-pro:after{inset:auto 12px 12px auto;width:160px;height:46px;border-left:none;border-top:none;border-radius:0 0 12px 0;}

.ucp-head{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));}
.ucp-title{font:700 26px/1 var(--ub); color:var(--accent);}
.ucp-errors{color:#ffb4b4; font:600 13px/1.4 var(--ui);}

.ucp-grid{display:grid;gap:var(--gap);grid-template-columns:1fr 1fr;padding:16px;}
@media (max-width:900px){.ucp-grid{grid-template-columns:1fr;}}

.ucp-card{background:var(--panel); 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);}
.ucp-card + .ucp-card{margin-top:var(--gap);}
.ucp-card .head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  font:700 16px/1 var(--ui);letter-spacing:2px;text-transform:uppercase;color:var(--accent);margin-bottom:10px;}
.ucp-card .sub{font:600 11px/1 var(--ui);color:var(--text);opacity:.9}

/* Tabellen innerhalb der Variablen hübsch darstellen */
.ucp-fields table{width:100%; border-collapse:separate; border-spacing:0 10px;}
.ucp-fields tr td{background:#12130c;border:1px solid var(--main);padding:10px 12px;vertical-align:middle;}
.ucp-fields tr td:first-child{width:260px;border-right:none;border-radius:10px 0 0 10px;
  font:700 14px/1 var(--ui);text-transform:uppercase;letter-spacing:1px;color:var(--accent);}
.ucp-fields tr td:last-child{border-left:none;border-radius:0 10px 10px 0;}
/* Falls {$requiredfields}/{$customfields} ohne table kommen, trotzdem gut aussehen */
.ucp-fields > *:not(table){display:block;background:#12130c;border:1px solid var(--main);
  border-radius:10px;padding:10px 12px;margin-bottom:10px;}

/* Inputs */
.ucp-pro input[type=text], .ucp-pro input[type=email], .ucp-pro input[type=password],
.ucp-pro input[type=url], .ucp-pro input[type=number], .ucp-pro select,
.ucp-pro textarea{
  width:100%; background:#0f100b; color:var(--text);
  border:1px solid var(--main); border-radius:10px; padding:9px 10px;
  font:15px/1.4 var(--font); outline:none; transition:border-color .15s, box-shadow .15s;
}
.ucp-pro textarea{min-height:120px; resize:vertical;}
.ucp-pro input:focus, .ucp-pro select:focus, .ucp-pro textarea:focus{
  border-color:var(--accent); box-shadow:0 0 0 3px rgba(164,153,138,.18);
}
.ucp-pro input[type=checkbox], .ucp-pro input[type=radio]{accent-color:var(--accent);}

/* Hinweis/kleine Texte */
.ucp-pro .smalltext, .ucp-pro .description, .ucp-pro label.smalltext{
  color:var(--text); opacity:.85; font:600 12px/1.3 var(--ui);
}

/* Aktionen */
.ucp-actions{display:flex;gap:10px;justify-content:center;padding:14px;border-top:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.04));}
.btn{display:inline-block;font:700 12px/1 var(--ui);letter-spacing:1px;text-transform:uppercase;
  border:1px solid var(--main);color:var(--text);background:#2a2b20;padding:10px 14px;border-radius:10px;
  cursor:pointer;text-decoration:none;transition:transform .15s, box-shadow .15s, border-color .15s;}
.btn:hover{transform:translateY(-1px);border-color:var(--accent);box-shadow:0 8px 24px rgba(164,153,138,.22);}
.btn.primary{background:var(--accent);color:#1E1F11;border-color:var(--accent);}

/* Legenden/Fieldsets (falls MyBB sie ausgibt) */
.ucp-pro fieldset{border:0;padding:0;margin:0}
.ucp-pro legend{display:none}