/* ===============================
   PROFILE CREATOR – 52HzMisfit
   =============================== */

.profile-wrapper{
  max-width:1200px;
  margin:30px auto;
  display:grid;
  grid-template-columns:420px 1fr;
  gap:24px;
}

/* ===== CONTROLS ===== */
.profile-controls{
  /* Đổi sang trắng xanh cực nhẹ */
  background:#ffffff;
  border-radius:18px;
  padding:22px;
  /* Shadow ánh xanh dương dịu */
  box-shadow:0 14px 30px rgba(59,130,246,0.1);
}

.profile-title{
  margin-bottom:18px;
  /* Chữ xanh dương đậm sang trọng */
  color:#1e40af;
  font-size:22px;
  font-weight:800;
}

/* ===== LABEL ===== */
.profile-controls label{
  display:flex;
  flex-direction:column;
  font-size:14px;
  font-weight:600;
  margin-bottom:14px;
  /* Chữ xanh navy trầm */
  color:#1e3a8a;
}

.profile-controls input,
.profile-controls select{
  margin-top:6px;
  padding:10px 12px;
  border-radius:10px;
  /* Viền xanh phấn nhạt */
  border:1px solid #bae6fd;
  font-size:14px;
  background:#fff;
  outline:none;
}

.profile-controls input:focus,
.profile-controls select:focus{
  border-color:#60a5fa;
  box-shadow:0 0 0 3px rgba(96,165,250,0.1);
}

/* ===== SWITCH ===== */
.switch-line{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:16px;
}

.switch{
  position:relative;
  width:48px;
  height:26px;
}

.switch input{ display:none; }

.slider{
  position:absolute;
  inset:0;
  /* Nền switch khi tắt - Xanh lơ nhạt */
  background:#bae6fd;
  border-radius:99px;
  cursor:pointer;
  transition:.25s;
}

.slider::before{
  content:"";
  position:absolute;
  width:20px;
  height:20px;
  background:#fff;
  border-radius:50%;
  top:3px;
  left:3px;
  transition:.25s;
}

.switch input:checked + .slider{
  /* Nền switch khi bật - Xanh dương chính */
  background:#3b82f6;
}

.switch input:checked + .slider::before{
  transform:translateX(22px);
}

/* ===== AVATAR ===== */
.avatar-box{
  /* Nền box upload xanh nhạt pastel */
  background:#f0f9ff;
  padding:12px;
  border-radius:14px;
  margin-bottom:16px;
}

/* ===== BUTTON ===== */
.btn-primary{
  margin-top:10px;
  /* Gradient xanh dương rực rỡ */
  background:linear-gradient(135deg,#60a5fa,#2563eb);
  color:#fff;
  border:none;
  padding:12px;
  border-radius:999px;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(37,99,235,0.3);
  transition: .25s;
}

.btn-primary:hover{
  transform: translateY(-2px);
  box-shadow:0 12px 28px rgba(37,99,235,0.45);
}

.btn-secondary{
  margin-top:10px;
  /* Nút phụ xanh nhạt chữ dương đậm */
  background:#e0f2fe;
  color:#1d4ed8;
  border:none;
  padding:12px;
  border-radius:999px;
  font-weight:700;
  cursor:pointer;
  transition: .25s;
}

.btn-secondary:hover{
  background:#bae6fd;
}

/* ===== PREVIEW ===== */
.profile-preview{
  /* Nền preview xanh trong suốt */
  background:rgba(59, 130, 246, 0.05);
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  /* Shadow xanh đen sâu */
  box-shadow:0 20px 40px rgba(30, 58, 138, 0.2);
}

.profile-preview canvas{
  max-width:100%;
  border-radius:12px;
}

/* ===== LOADING ===== */
.loading{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:700;
  /* Overlay màu xanh navy mờ */
  background:rgba(30, 58, 138, 0.75);
  border-radius:18px;
}

/* ===== RANGE (UY TÍN) ===== */
.uytin-wrapper{
  display:flex;
  flex-direction:column;
}

#uytinDisplay{
  margin-top:6px;
  font-weight:800;
  /* Chữ số màu xanh dương đậm */
  color:#2563eb;
}

/* Thanh kéo range màu xanh dương */
input[type=range] {
  accent-color: #2563eb;
}

/* =========================
   AVATAR CROP
========================= */

#avatarInput{
  width:100%;
  padding:10px;
  border-radius:10px;
  /* Viền nét đứt xanh */
  border:1px dashed #60a5fa;
  background:#f8fafc;
  cursor:pointer;
}

/* ===== AVATAR SIMPLE ===== */
#avatarCropContainer{
  margin-top:12px;
  width:180px;
  height:180px;
  border-radius:16px;
  border:2px dashed #bae6fd;
  background:#f0f9ff;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

#avatarPreview{
  width:100%;
  height:100%;
  object-fit:cover;
  display:none;
}

.avatar-placeholder{
  font-size:13px;
  /* Chữ hướng dẫn màu xanh xám */
  color:#1e40af;
  opacity: 0.7;
  text-align:center;
}

/* ===============================
   MOBILE – PROFILE CREATOR
=============================== */

/* Tablet & nhỏ hơn */
@media (max-width:900px){
  .profile-wrapper{
    grid-template-columns:1fr;
  }
}

/* Mobile */
@media (max-width:768px){

  .profile-controls{
    width:100%;
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:12px;
  }

  .profile-controls label{
    font-size:15px;
    margin-bottom:8px;
    min-width:0;
  }

  .profile-controls input,
  .profile-controls select{
    font-size:15px;
    padding:12px;
  }

  /* các block chiếm full hàng */
  .profile-title,
  .avatar-box,
  .switch-line,
  .profile-block,
  .uytin-wrapper,
  #createBtn,
  #saveBtn,
  p,
  h2,
  h3{
    grid-column:1 / -1;
  }
}

/* Mobile rất nhỏ */
@media (max-width:420px){
  .profile-controls{
    grid-template-columns:1fr;
  }
}