/* ==========================================
   SETTINGS — Velvet Premium
========================================== */

/* ----- Section Base ----- */
.settings-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  margin-top: 24px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* ----- Header padrão Velvet ----- */
.settings-section .mlc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-bottom: 22px;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.settings-section .mlc-header-left h2 {
  font-family: "Playfair Display", serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 8px;
  text-shadow: 0 0 10px rgba(212,175,55,.5);
}
.settings-section .mlc-header-right { display:flex; gap:10px; }

/* ----- Form principal ----- */
.settings-form { display:flex; flex-direction:column; gap:20px; }
.settings-group { display:flex; flex-direction:column; gap:8px; }
.settings-group label { font-weight:700; font-size:.95rem; color:var(--gold); }
.settings-group input,
.settings-group select {
  padding: 7px 14px;
  border-radius: var(--radius-md);
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  font-size:.95rem;
  transition: border-color .25s, box-shadow .25s;
}
.settings-group input:focus,
.settings-group select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 8px rgba(212,175,55,.35);
  outline:none;
}

/* ----- Avatar & Banner ----- */
.settings-avatar, .settings-banner { display:flex; align-items:center; gap:18px; }
.avatar-preview { width:96px; height:96px; border-radius:50%; object-fit:cover; border:2px solid var(--gold); background:var(--surface-2); box-shadow:var(--shadow-sm); }
.banner-preview { width:220px; height:100px; border-radius:var(--radius-md); object-fit:cover; border:2px solid var(--gold); background:var(--surface-2); box-shadow:var(--shadow-sm); }

.btn-upload {
  display:inline-block;  border:1px solid var(--gold);
  color:var(--gold); padding:8px 16px; border-radius:var(--radius-md);
  font-weight:600; font-size:.9rem; cursor:pointer; transition:all .25s;
}
.btn-upload:hover { background:var(--gold); color:#000; transform:translateY(-2px); box-shadow:0 3px 10px rgba(212,175,55,.35); }

/* ----- Actions ----- */
.settings-actions { margin-top:16px; }
.model-btn-gold {
  background: var(--button-primary-bg); color: var(--button-primary-text);
  font-weight: var(--button-weight); border:none; padding: var(--button-padding);
  border-radius: var(--button-radius); font-size: var(--button-font-size);
  cursor:pointer; transition: filter .25s, transform .25s;
}
.model-btn-gold:hover { filter:brightness(1.1); transform:translateY(-2px); }

/* ----- Danger Zone ----- */
.danger-zone { margin-top:28px; border-top:1px solid var(--border); padding-top:20px; }
.danger-zone h3 { color:#ff4d4f; font-size:1rem; font-weight:700; margin-bottom:14px; }
.btn-danger { background:#ff4d4f; color:#fff; border:none; padding:12px 18px; border-radius:var(--radius-md); cursor:pointer; font-weight:700; transition:filter .25s, transform .25s; }
.btn-danger:hover { filter:brightness(1.1); transform:translateY(-2px); }

/* ----- Modal Idiomas ----- */
.dash-lang-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:14px; margin-top:18px; }
.dash-lang-item {
  display:flex; align-items:center; gap:10px; padding:10px 14px;
  border:1px solid var(--border); border-radius:var(--radius-md);
  background:var(--surface); cursor:pointer; font-size:.9rem;
  transition:all .25s;
}
.dash-lang-item img { width:22px; height:16px; border-radius:3px; object-fit:cover; }
.dash-lang-item:hover { border-color:var(--gold); color:var(--gold); }
.dash-lang-item.checked {
  border-color:var(--gold); background:rgba(212,175,55,.08); color:var(--gold);
  box-shadow:0 0 8px rgba(212,175,55,.3);
}

/* ----- Responsividade ----- */
@media (max-width:768px) {
  .settings-section { padding:16px; gap:20px; }
  .avatar-preview { width:72px; height:72px; }
  .banner-preview { width:180px; height:84px; }
}