/* profile.css — refined, professional look to match Home */
:root{
  /* palette สว่าง นิ่งตา */
  --bg:#f8fafc; --card:#ffffff; --text:#0f172a; --muted:#64748b;
  --ring:#e5e7eb; --ring-2:#d9e2ee;
  --brand:#3b82f6; --brand-600:#2563eb; --accent:#22c55e;
  --shadow: 0 10px 30px rgba(2,6,23,.06), 0 2px 8px rgba(2,6,23,.04);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:'Prompt',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:var(--bg)}
a{color:inherit;text-decoration:none}

/* Layout */
.container{max-width:1060px;margin:0 auto;padding:0 16px}

/* Header (ไม่มีเมนูแล้ว → จัดซ้าย) */
/* Header — match Home exactly */
.site-header{
  position: sticky;
  top: 0;
  z-index: 1200 !important;  /* ให้อยู่บนสุดเหนือการ์ดทั้งหมด */
  background: #fff;
  border-bottom: 1px solid var(--ring);
}
.header-inner{
  display: flex;
  align-items: center;
  gap: 14px;                 /* เดิม 12 */
  padding: 10px 0;           /* ให้สูงเท่ากัน */
  /* เอา justify-content ออกเพื่อให้เหมือน Home */
}
.brand{
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  color: #2563eb;
}
.brand .brand-name{
  color: #2563eb;
  text-decoration: none;
}


/* Page head — ขนาด/ระยะเข้ากับการ์ด */
.page{padding:22px 0 36px}
.page-head{max-width:760px;margin:10px auto 12px}
.page-head h1{font-size:26px;line-height:1.25;margin:0 0 6px}
.muted{color:var(--muted)}
.small{font-size:.9rem}

/* Card */
.form-card{
  max-width:760px;margin:0 auto;background:var(--card);
  border:1px solid var(--ring);border-radius:18px;padding:0 18px 18px;box-shadow:var(--shadow)
}
.card-head{display:flex;align-items:center;gap:10px;padding:16px 6px 10px}
.card-head .dot{width:10px;height:10px;border-radius:999px;background:linear-gradient(135deg,var(--brand),var(--accent))}
.card-head .title{font-weight:700}

/* Form */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:6px}
.field{display:flex;flex-direction:column;gap:6px;margin:10px 0}
.label{font-weight:700;font-size:14px;letter-spacing:.1px}
.help{margin-top:3px;display:block}

.input{
  height:48px;padding:12px 14px;border:1.5px solid var(--ring);border-radius:14px;background:#fff;font:inherit;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease
}
.input:hover{border-color:var(--ring-2);background:#fbfdff}
.input:focus{
  outline:0;border-color:var(--brand-600);
  box-shadow:0 0 0 4px rgba(37,99,235,.15)
}
.input::placeholder{color:#9aa6b2}

/* Actions ชิดขวา ให้ความรู้สึก "จบฟอร์ม" */
.actions{display:flex;gap:10px;margin-top:8px;justify-content:flex-end}

/* Buttons — โทนกราเดียนต์แบบ Home */
.btn{
  padding:10px 14px;border-radius:14px;border:1px solid var(--ring);font-weight:700;cursor:pointer;
  background:#fff;transition:transform .02s ease, filter .15s ease, box-shadow .15s ease
}
.btn:hover{filter:brightness(0.98)}
.btn:active{transform:translateY(1px)}
.btn.primary{
  color:#fff;border:none;
  background:linear-gradient(135deg,var(--brand),var(--accent));
  box-shadow:0 8px 22px rgba(59,130,246,.25)
}

/* Toast (เรียบ สะอาด) */
.toast{
  position:fixed;right:18px;top:18px;z-index:50;min-width:220px;max-width:60vw;
  background:#f0fdf4;color:#064e3b;border:1px solid #bbf7d0;border-radius:12px;padding:10px 14px;
  box-shadow:var(--shadow);display:none;font-weight:600
}

/* Responsive */
@media (max-width:760px){
  .form-row{grid-template-columns:1fr}
  .page-head h1{font-size:22px}
}

/* Mobile: side padding only; remove extra top gaps */
@media (max-width: 1024.98px){
  .page.container{ padding-left:20px; padding-right:20px; }
  /* คง scroll-offset เผื่อมี anchor/โฟกัส แต่ไม่เพิ่มช่องว่างปกติ */
  .page-head, .form-card, .card-head{ scroll-margin-top: calc(var(--mh-height, 54px) + 12px); }
}

/* ===== Soft gradient background (match Home vibe) ===== */
body{
  background-color: var(--bg);
  background-image:
    radial-gradient(1200px 520px at 50% -240px, rgba(59,130,246,.18), transparent 70%),
    radial-gradient(880px 360px at 88% 80px,   rgba(16,185,129,.14), transparent 75%),
    radial-gradient(920px 360px at 12% 120px,  rgba(2,132,199,.12),  transparent 75%);
  background-repeat: no-repeat;
}

/* ปรับสเกลบนจอเล็ก ให้ยังดูนุ่มตา */
@media (max-width: 760px){
  body{
    background-image:
      radial-gradient(900px 400px at 50% -220px,  rgba(59,130,246,.18), transparent 70%),
      radial-gradient(620px 280px at 92% 80px,    rgba(16,185,129,.14), transparent 75%),
      radial-gradient(650px 260px at 8%  110px,   rgba(2,132,199,.12),  transparent 75%);
  }
}