/* ==========================================================================
   Account settings, in the studio system
   ========================================================================== */

.profile-main { padding: 20px 0 60px; }
.profile-container { width: min(100% - 40px, 760px); margin: 0 auto; }
.profile-title { font: 400 clamp(34px, 5vw, 48px) / 1.02 var(--font-display); letter-spacing: -.025em; margin: 12px 0 24px; }
.profile-section { background: var(--surface-raised); border: 1px solid var(--line); border-radius: 8px; padding: 20px; margin-bottom: 16px; }
.profile-section .section-title { font: 400 26px/1.05 var(--font-display); letter-spacing: -.02em; margin-bottom: 16px; }
.section-description { color: var(--muted); font-size: 14px; margin-bottom: 14px; }
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.info-item, .detail-item { display: flex; flex-direction: column; gap: 4px; }
.info-label, .detail-label { font: 500 10px/1.5 var(--font-ibm-plex-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.info-value, .detail-value { font-weight: 600; font-size: 15px; word-break: break-word; }
.subscription-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 16px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); }
.subscription-info { display: flex; flex-direction: column; gap: 12px; }
.subscription-plan { display: flex; align-items: center; gap: 10px; }
.subscription-plan .plan-badge { position: static; }
.subscription-plan .plan-badge.plan-free { background: var(--surface-inset); }
.subscription-plan .plan-badge.plan-cancelled { background: #fcebe4; border-color: #d7a393; color: var(--error); }
.subscription-plan .plan-name { font: 400 22px/1 var(--font-display); margin: 0; }
.subscription-details { display: flex; gap: 24px; }
.subscription-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.profile-form { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.profile-form .form-group { width: 100%; }
.form-message { width: 100%; padding: 12px 16px; border-radius: 8px; font-size: 14px; }
.form-message.success { color: var(--success); background: #e9eddf; border: 1px solid #b7c4a6; }
.form-message.error { color: var(--error); background: #fcebe4; border: 1px solid #d7a393; }
.danger-zone { border-color: #d7a393; }
.danger-zone .section-title { color: var(--error); }
.danger-text { color: var(--muted); font-size: 14px; margin-bottom: 14px; }
.modal { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 16px; }
.modal.active { display: flex; }
.modal-overlay { position: absolute; inset: 0; background: #29231cb3; }
.modal-content { position: relative; width: 100%; max-width: 440px; background: var(--paper); border: 1px solid var(--ink); border-radius: 8px; padding: 24px; }
.modal-title { font: 400 30px/1.05 var(--font-display); letter-spacing: -.02em; margin-bottom: 10px; }
.modal-text { color: var(--muted); font-size: 14px; margin-bottom: 18px; }
.modal-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }

@media (max-width: 600px) {
  .info-grid { grid-template-columns: 1fr; }
  .subscription-details { flex-direction: column; gap: 10px; }
  .subscription-actions .btn, .modal-actions .btn { width: 100%; }
}