/* BookSignal — Profile Panel.
   Theme tokens inherited from /styles.css. */
*{box-sizing:border-box;margin:0;padding:0}
[x-cloak]{display:none!important}
body{background:var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif;font-size:14px;min-height:100vh}

/* Topbar */
.profile-topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;background:var(--card);border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
.profile-brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--head)}
.profile-logo{height:28px;width:auto}
.profile-badge{font-size:11px;background:var(--teal-soft);color:var(--teal);padding:2px 8px;border-radius:4px;margin-left:4px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;align-self:flex-end;margin-bottom:3px}
.profile-topright{display:flex;align-items:center;gap:16px}
.profile-topright .theme-btn{visibility:hidden;width:0;padding:0;border:0;overflow:hidden}
.profile-back{color:var(--muted);text-decoration:none;font-size:13px}
.profile-back:hover{color:var(--head)}

/* Loading */
.profile-loading{text-align:center;padding:80px 20px;color:var(--muted);font-size:16px}

/* Layout */
.profile-wrap{max-width:520px;margin:0 auto;padding:32px 16px}

/* Card */
.profile-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:24px;margin-bottom:20px}
.profile-card h2{font-size:16px;color:var(--head);margin-bottom:16px;font-weight:600}

/* Account fields */
.profile-field{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.profile-field:last-child{border-bottom:none}
.profile-label{color:var(--muted);font-weight:500}
/* Plan badges — see css/plan-badge.css (linked in HTML) */

/* Password form */
.pw-form{display:flex;flex-direction:column;gap:12px}
.pw-field{position:relative;display:flex}
.pw-field input{width:100%;background:var(--card);border:1px solid var(--line2);color:var(--text);padding:10px 40px 10px 12px;border-radius:6px;font-size:14px;font-family:inherit}
.pw-field input::placeholder{color:var(--muted)}
.pw-field input:focus{outline:none;border-color:var(--teal)}
.pw-toggle{position:absolute;right:2px;top:2px;bottom:2px;width:36px;background:none;border:none;cursor:pointer;color:var(--muted);font-size:14px;display:flex;align-items:center;justify-content:center;border-radius:0 5px 5px 0}
.pw-toggle:hover{color:var(--text)}
.pw-toggle.visible{color:var(--teal)}
.btn-save{background:var(--teal);border:none;color:#fff;padding:10px 24px;border-radius:6px;font-size:14px;font-weight:600;font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;align-self:flex-start}
.btn-save:hover{filter:brightness(1.1)}
.btn-save:disabled{opacity:.6;cursor:not-allowed}
.pw-error{color:#dc2626;font-size:13px;margin-top:8px}
.pw-success{color:#16a34a;font-size:13px;margin-top:8px}

/* Spinner */
.spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Responsive */
@media(max-width:768px){
  .profile-wrap{padding:16px 12px}
  .profile-card{padding:16px}
}