:root{
  --pe-brand:#ff7a00;
  --pe-brand-2:#ff8c1a;
  --pe-ink:#0f172a;
  --pe-sub:#64748b;
  --pe-bd:#e6eef6;
  --pe-shadow:0 6px 24px rgba(15,23,42,.06);
  --pe-radius:18px;
}
html,body{
  margin:0; padding:0; background:#fffaf2; color:var(--pe-ink);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Segoe UI",Roboto,Arial,sans-serif;
}

.pe-container{max-width:1100px;margin:18px auto;padding:0 18px}
.pe-card{background:#fff;border:1px solid var(--pe-bd);border-radius:var(--pe-radius);box-shadow:var(--pe-shadow);padding:18px}
.pe-title{margin:0 0 12px}

.pe-avatar{display:flex;align-items:center;gap:16px;margin-bottom:12px}
.pe-avatar img{width:96px;height:96px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 2px 10px rgba(0,0,0,.08)}
.pe-avatar-right{flex:1}

.pe-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pe-grid .full{grid-column:1/-1}
.pe-field.full-row{grid-column:1/-1}
.stats-grid .pe-field{min-height:150px}
.pe-field{display:flex;flex-direction:column;gap:6px}
.pe-label{font-weight:700}
.pe-input{
  width:100%;
  border:1.6px solid #cfd9e3;
  border-radius:12px;
  padding:12px 14px;
  background:#fff;
  font-size:15px;
  line-height:1.4;
  min-height:46px;
  box-sizing:border-box;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.pe-input:focus{
  outline:none;
  border-color:#ff9b4a;
  box-shadow:0 0 0 3px rgba(255,123,0,.18);
}
select.pe-input{
  appearance:none;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3e%3cpath fill='%2394a3b8' d='M1.41.58 6 5.17 10.59.58 12 2l-6 6-6-6z'/%3e%3c/svg%3e");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:12px 8px;
  padding-right:42px;
  font-size:16px;
}
input[type="file"].pe-input{
  padding:8px 12px;
  min-height:auto;
}
.pe-input[readonly], .pe-input:disabled{
  background:#f6f8fb;
  color:#5b6878;
  border-color:#d8e1ec;
  cursor:not-allowed;
}
.pe-help{
  color:var(--pe-sub);
  font-size:12px;
  line-height:1.5;
}
.pe-field--readonly .pe-help{margin-top:2px;}
.pe-tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:8px;
  padding:2px 8px;
  border-radius:999px;
  background:#fff3e6;
  color:#d97706;
  font-size:12px;
  font-weight:700;
}

.mt12{margin-top:12px}

.pe-chips{display:flex;flex-wrap:wrap;gap:8px}
.pe-chips .chip{
  border:1px solid #dbe4ff;background:#eef2ff;padding:6px 10px;border-radius:999px;cursor:pointer
}
.pe-chips .chip.active{background:#cfe0ff;border-color:#cfe0ff}

.pe-section{margin-top:18px;padding:18px;border:1px solid var(--pe-bd);border-radius:16px;background:#fffaf7}
.pe-section:first-of-type{margin-top:0}
.pe-section-head{margin-bottom:12px}
.pe-section-head h3{margin:0;font-size:18px;color:#c2410c}
.pe-section-head p{margin:4px 0 0;font-size:13px;color:#64748b}
.pe-section.ability-section h4{
  margin:0 0 10px;
  color:#c2410c;
  font-size:15px;
}
.pe-subblock{
  border:1px solid #ffe0c2;
  border-radius:14px;
  padding:14px;
  margin-top:14px;
  background:#fffdf9;
  box-shadow:0 4px 16px rgba(253,186,116,.2);
}
.pe-subblock:first-of-type{margin-top:0}
.pe-chip-input{
  margin-top:10px;
  display:flex;
  align-items:center;
  gap:10px;
}
.pe-chip-input input{flex:1}
.pe-btn--mini{
  padding:8px 12px;
  font-size:13px;
  line-height:1;
}
.pe-hobby-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px;
}
.pe-hobby-grid .pe-subblock{
  min-height:140px;
}
.language-select-row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:12px;
  align-items:end;
}
.language-select-row .language-add-btn{
  align-self:flex-end;
  height:46px;
}
.language-entry-list{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.language-entry-card{
  border:1px solid #ffe0c2;
  border-radius:12px;
  padding:10px 12px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.language-entry-card strong{color:#b45309}
.language-entry-card span{color:#9a3412;font-weight:700}
.language-entry-card button{
  border:none;
  background:transparent;
  color:#ef4444;
  cursor:pointer;
  font-weight:700;
}

.pe-actions{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  margin-top:14px;
}
.pe-actions .pe-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.pe-actions .pe-btn--primary{
  width:100%;
}
.pe-actions .pe-btn--cancel{
  width:auto;
}
.pe-btn{
  background:var(--pe-brand); color:#fff; border:none; border-radius:10px;
  padding:10px 14px; font-weight:800; cursor:pointer;
}
.pe-btn:hover{background:var(--pe-brand-2)}
.pe-btn--cancel{
  background:transparent;
  color:#64748b;
  border:none;
  padding:6px 10px;
  font-weight:600;
}
.pe-btn--cancel:hover{
  color:#475569;
  text-decoration:underline;
}

@media(max-width:768px){
  .pe-grid{grid-template-columns:1fr}
  .pe-actions{align-items:stretch}
  .pe-actions .pe-btn--primary{width:100%}
}
input.readonly{
  background:#f8fafc;
  color:#94a3b8;
  cursor:not-allowed;
}