:root{
  --primary:#6A1B9A;
  --primary-dark:#4A126E;
  --primary-light:#F4EAFB;
  --primary-mid:#9C4DCC;

  --bg:#FAF8FC;
  --card:#FFFFFF;

  --ink:#2A2332;
  --ink-soft:#6F657A;

  --line:#E9DEF3;
  --radius:12px;
  --font-display:'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg);
  min-height:100vh;
}

a{color:var(--primary);}

.page{
  max-width:1180px;
  margin:0 auto;
  padding:3rem 2rem 4rem;
}

/* ---------- flash / completion banner ---------- */
.form-message{
  font-size:0.9rem; padding:0.75rem 1rem; border-radius:var(--radius);
  margin-bottom:1.25rem; background:var(--primary-light); color:var(--primary-dark);
}
.complete-banner{
  background:var(--primary-light); border:1px solid var(--line); border-radius:var(--radius);
  padding:1rem 1.25rem; margin-bottom:1.25rem;
}
.complete-banner p{margin:0; font-size:0.9rem; color:var(--primary-dark);}
.complete-banner .progress{font-size:0.78rem; color:var(--ink-soft); margin-top:0.2rem;}

/* ---------- two column layout ---------- */
.profile-layout{
  display:grid;
  grid-template-columns:1.6fr 1fr;
  gap:2.5rem;
  align-items:start;
}

/* ---------- header ---------- */
.profile-header{
  display:flex;
  align-items:center;
  gap:1.75rem;
  margin-bottom:1.5rem;
}

.photo-wrap{position:relative; width:140px; height:140px; flex-shrink:0;}
.profile-photo{
  width:140px;
  height:140px;
  border-radius:50%;
  background:var(--primary-light);
  border:2px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-display);
  font-weight:700;
  font-size:2.2rem;
  color:var(--primary);
  overflow:hidden;
}
.profile-photo img{width:100%; height:100%; object-fit:cover; display:block;}

.photo-input{position:absolute; width:1px; height:1px; opacity:0;}
.photo-edit-btn{
  position:absolute; bottom:2px; right:2px; width:36px; height:36px; border-radius:50%;
  background:var(--primary); border:2px solid var(--card); display:flex; align-items:center;
  justify-content:center; cursor:pointer; color:#fff;
}
.photo-edit-btn svg{width:16px; height:16px;}

.profile-name{
  font-family:var(--font-display);
  font-weight:700;
  font-size:2.2rem;
  color:var(--ink);
  margin:0 0 0.3rem;
  line-height:1.1;
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
}

.verified-badge{
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--primary);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.verified-badge svg{
  width:13px;
  height:13px;
  color:#fff;
}

.profile-username{
  font-size:0.9rem;
  color:var(--ink-soft);
  margin:0 0 0.6rem;
}

.quick-info p{
  font-size:1rem;
  color:var(--ink);
  margin:0 0 0.25rem;
  line-height:1.4;
}

.profile-bio{
  font-size:0.98rem;
  color:var(--ink-soft);
  line-height:1.6;
  max-width:640px;
  margin:0 0 1.5rem;
}

/* ---------- tabs (underline style) ---------- */
.tab-input{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
}

.tab-switch{
  display:flex;
  gap:2rem;
  border-bottom:1px solid var(--line);
  margin-bottom:1.5rem;
}

.tab-label{
  padding:0 0 0.85rem;
  font-size:0.98rem;
  font-weight:600;
  color:var(--ink-soft);
  cursor:pointer;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
}

#tab-profile:checked ~ .tab-switch label[for="tab-profile"],
#tab-post:checked ~ .tab-switch label[for="tab-post"],
#tab-activities:checked ~ .tab-switch label[for="tab-activities"],
#tab-courses:checked ~ .tab-switch label[for="tab-courses"]{
  color:var(--primary);
  border-bottom-color:var(--primary);
}

.panel{display:none;}
#tab-profile:checked ~ .tab-content .profile-panel{display:block;}
#tab-post:checked ~ .tab-content .post-panel{display:block;}
#tab-activities:checked ~ .tab-content .activities-panel{display:block;}
#tab-courses:checked ~ .tab-content .courses-panel{display:block;}

/* ---------- detail sections ---------- */
.detail-section{
  padding:1.1rem 0;
  border-top:1px solid var(--line);
}
.detail-section:first-child{border-top:none; padding-top:0;}

.detail-section-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:0.65rem;}

.detail-label{
  font-family:var(--font-display);
  font-size:0.8rem;
  font-weight:700;
  color:var(--primary);
  text-transform:uppercase;
  letter-spacing:0.04em;
  margin:0;
}

.detail-text{
  font-size:0.95rem;
  color:var(--ink);
  line-height:1.55;
  margin:0;
}

.section-edit{
  font-size:0.82rem; font-weight:600; color:var(--primary);
  cursor:pointer; background:none; border:none; padding:0; font-family:inherit;
}

.tag-row{display:flex; flex-wrap:wrap; gap:0.5rem;}

.tag{
  display:inline-flex; align-items:center; gap:0.4rem; font-size:0.88rem;
  padding:0.4rem 0.9rem; border-radius:999px; background:var(--primary-light);
  color:var(--primary-dark); border:1px solid var(--line);
}
.tag-level{font-weight:600; font-size:0.78rem; opacity:0.85;}
.tag.interest{background:var(--bg); color:var(--ink-soft);}
.tag.certificate{background:#fff; color:var(--primary-dark); border:1px solid var(--primary-light);}

.empty-state{
  border:1.5px dashed var(--line); border-radius:var(--radius);
  padding:0.85rem 1rem; font-size:0.9rem; color:var(--ink-soft);
}

/* ---------- activity / post feed items ---------- */
.activity-item{display:flex; gap:0.85rem; padding:1rem 0; border-top:1px solid var(--line);}
.activity-item:first-child{border-top:none; padding-top:0;}
.activity-icon{
  flex-shrink:0; width:36px; height:36px; border-radius:50%; background:var(--primary-light);
  display:flex; align-items:center; justify-content:center; color:var(--primary);
}
.activity-icon svg{width:18px; height:18px;}
.activity-body{flex:1; min-width:0;}
.activity-meta{font-size:0.85rem; color:var(--ink-soft); margin:0 0 0.3rem;}
.activity-meta strong{color:var(--ink); font-weight:600;}
.activity-text{font-size:0.95rem; color:var(--ink); line-height:1.5; margin:0 0 0.3rem;}
.activity-time{font-size:0.8rem; color:var(--ink-soft);}

/* ---------- courses panel ---------- */
.course-card{
  display:flex; justify-content:space-between; align-items:center;
  padding:1rem 1.1rem; border:1px solid var(--line); border-radius:var(--radius); margin-bottom:0.85rem;
}
.course-name{font-weight:600; font-size:0.95rem; margin:0 0 0.25rem;}
.course-meta{font-size:0.82rem; color:var(--ink-soft); margin:0;}
.course-price{font-weight:700; color:var(--primary); font-size:1rem; white-space:nowrap;}

/* ---------- sidebar ---------- */
.side-card{
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:1.5rem; margin-bottom:1.5rem;
}
.side-card-header{
  display:flex; align-items:center; gap:0.6rem; font-family:var(--font-display);
  font-weight:700; font-size:1.05rem; color:var(--ink); margin:0 0 1.1rem;
}
.side-card-header svg{width:20px; height:20px; color:var(--primary);}

.lang-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:0.75rem 0; border-top:1px solid var(--line);
}
.lang-row:first-of-type{border-top:none; padding-top:0;}
.lang-name{font-weight:600; font-size:0.95rem;}
.lang-level{font-size:0.9rem; color:var(--ink-soft);}

/* ---------- inline edit forms ---------- */
.edit-panel{display:none;}
.edit-panel.open{display:block;}
.view-panel.hidden{display:none;}

.input, .select, textarea{
  font-family:var(--font-body); font-size:0.92rem; padding:0.6rem 0.75rem;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--card); color:var(--ink); width:100%;
}
textarea{resize:vertical; min-height:90px; font-family:inherit;}
.field-hint{font-size:0.78rem; color:var(--ink-soft); margin:0.35rem 0 0;}

.form-row{display:flex; gap:0.75rem; margin-bottom:0.75rem;}
.form-row .form-field{flex:1;}
.form-field{margin-bottom:0.75rem;}
.form-field label{font-size:0.82rem; font-weight:500; display:block; margin-bottom:0.35rem;}

.lang-input-row{display:flex; gap:0.75rem; margin-bottom:0.75rem;}
.lang-input-row .input{flex:2;}
.lang-input-row .select{flex:1;}

.edit-actions{display:flex; gap:0.6rem; margin-top:0.9rem;}
.btn-save, .btn-cancel{
  font-family:var(--font-body); font-weight:600; font-size:0.85rem; padding:0.5rem 1rem;
  border-radius:10px; cursor:pointer;
}
.btn-save{background:var(--primary); color:#fff; border:1.5px solid var(--primary);}
.btn-cancel{background:#fff; color:var(--ink-soft); border:1.5px solid var(--line);}

@media (max-width:900px){
  .profile-layout{grid-template-columns:1fr;}
}

@media (max-width:600px){
  .page{padding:2rem 1.1rem 3rem;}
  .profile-header{flex-direction:column; align-items:flex-start; gap:1.1rem;}
  .photo-wrap, .profile-photo{width:110px; height:110px;}
  .profile-name{font-size:1.7rem;}
  .tab-switch{gap:1.1rem; overflow-x:auto;}
}