/* ── Settings & Edit Profile ── */
/* Tambahkan style edit profile di sini */

/* ── Theme Editor ── */
.te-wrap { max-width: 560px; margin: 0 auto; padding: 16px }
.te-header { padding: 14px 16px; border-bottom: 1px solid var(--b); display: flex; align-items: center; gap: 10px; position: sticky; top: 48px; z-index: 40; background: var(--w) }
.te-back { display: flex; align-items: center; color: var(--i3); background: none; border: none; cursor: pointer; font-size: .8rem; gap: 5px; padding: 0 }
.te-title { font-size: .88rem; font-weight: 600; color: var(--ink) }
.te-section { background: var(--w); border: 1px solid var(--b); border-radius: 12px; padding: 16px; margin-bottom: 12px }
.te-section-title { font-size: .72rem; font-weight: 700; color: var(--i3); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 12px }
.te-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--bs); gap: 12px }
.te-row:last-child { border-bottom: none; padding-bottom: 0 }
.te-row:first-of-type { padding-top: 0 }
.te-label { font-size: .8rem; color: var(--i2); font-weight: 500; flex: 1 }
.te-desc { font-size: .68rem; color: var(--i4); margin-top: 1px }
.te-input-wrap { display: flex; align-items: center; gap: 6px }
.te-swatch { width: 28px; height: 28px; border-radius: 6px; border: 1.5px solid var(--b); cursor: pointer; flex-shrink: 0; position: relative; overflow: hidden }
.te-swatch input[type="color"] { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); opacity: 0; cursor: pointer; border: none; padding: 0 }
.te-hex { width: 80px; border: 1px solid var(--b); border-radius: 7px; padding: 5px 8px; font-size: .76rem; color: var(--ink); background: var(--bs); font-family: monospace; outline: none; transition: border-color .15s }
.te-hex:focus { border-color: var(--a) }
.te-preview { border-radius: 12px; border: 1px solid var(--b); overflow: hidden; margin-bottom: 12px }
.te-preview-header { padding: 10px 14px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--b) }
.te-preview-body { padding: 14px }
.te-preview-ava { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .8rem; color: #fff; font-weight: 600 }
.te-preview-name { font-size: .82rem; font-weight: 600 }
.te-preview-handle { font-size: .7rem }
.te-preview-q { font-size: .8rem; font-style: italic; padding: 8px 10px; border-radius: 7px; border-left: 2px solid; margin-bottom: 10px; line-height: 1.5 }
.te-preview-a { font-size: .82rem; line-height: 1.7; margin-bottom: 10px }
.te-preview-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 14px; border-radius: 99px; font-size: .72rem; font-weight: 600; border: none; cursor: pointer; color: #fff }
.te-actions { display: flex; gap: 8px; margin-bottom: 24px }
.te-save { flex: 1; padding: 10px; background: var(--a); color: #fff; border: none; border-radius: 99px; font-size: .82rem; font-weight: 600; cursor: pointer; transition: opacity .15s }
.te-save:hover { opacity: .85 }
.te-reset { padding: 10px 18px; background: none; color: var(--i3); border: 1.5px solid var(--b); border-radius: 99px; font-size: .82rem; cursor: pointer; transition: border-color .15s }
.te-reset:hover { border-color: var(--i3) }
.te-toast { position: fixed; bottom: 70px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 7px 18px; border-radius: 99px; font-size: .74rem; z-index: 9999; opacity: 0; transition: opacity .2s; pointer-events: none }
.te-toast.show { opacity: 1 }