.account-settings-page { padding-top: 60px; }
.account-settings-page > div { width: min(1040px, calc(100% - 96px)); gap: 24px; }
.account-settings-content { min-width: 0; }
.account-settings-content .user-management-heading { margin-bottom: 24px; }
.account-settings-content .user-management-heading h1 { font-size: 36px; }
.account-settings-form { display: grid; gap: 20px; width: 100%; margin-top: 20px; }
.account-settings-field { display: grid; gap: 7px; }
.account-settings-field label { font-size: 13px; font-weight: 600; }
.account-settings-field input,.account-settings-field textarea { width: 100%; border: 1px solid var(--border); border-radius: 6px; padding: 11px 13px; background: var(--background); color: var(--foreground); font: inherit; font-size: 14px; }
.account-settings-field textarea { min-height: 120px; resize: vertical; }
.account-settings-field input:focus,.account-settings-field textarea:focus { border-color: var(--primary); outline: 2px solid color-mix(in oklch,var(--primary) 28%,transparent); outline-offset: 1px; }
.account-settings-field small { color: var(--muted-foreground); font-size: 12px; }
.account-settings-security-card { width: 100%; margin-top: 20px; padding: 22px; border: 1px solid var(--border); border-radius: 6px; background: color-mix(in oklch,var(--secondary) 35%,var(--card)); }
.account-settings-security-card .account-settings-form { margin-top: 0; }
.account-settings-form button:disabled { cursor: wait; opacity: .75; }
.account-settings-avatar-preview { display: flex; align-items: center; gap: 16px; padding: 16px; border: 1px solid var(--border); border-radius: 6px; background: color-mix(in oklch,var(--secondary) 45%,var(--card)); }
.account-settings-avatar-preview img { width: 72px; height: 72px; border: 1px solid var(--border); border-radius: 8px; background: var(--secondary); object-fit: cover; }
.account-settings-avatar-preview div,.account-connection-copy { display: grid; gap: 4px; }
.account-settings-avatar-preview strong,.account-connection-copy strong { font-size: 14px; }
.account-settings-avatar-preview span,.account-connection-copy span { color: var(--muted-foreground); font-size: 12px; }
.account-settings-avatar-form { margin-top: 12px; }
.account-settings-banner-preview { position:relative; display:grid; aspect-ratio:5 / 1; min-height:100px; margin-top:24px; overflow:hidden; place-items:center; border:1px solid var(--border); border-radius:6px; background:linear-gradient(112deg,color-mix(in oklch,var(--lilac) 12%,var(--card)),var(--secondary)); color:var(--muted-foreground); font-size:12px; font-weight:600; }
.account-settings-banner-preview img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.account-settings-banner-preview.has-profile-banner::after { position:absolute; inset:0; background:linear-gradient(105deg,rgb(0 0 0 / 48%),rgb(0 0 0 / 25%)); content:''; }
.account-settings-banner-preview span { position:relative; z-index:1; }
.account-settings-banner-form { margin-top:12px; }
.account-settings-crop-dialog { width: min(520px, calc(100% - 32px)); max-width: none; max-height: min(90vh, 760px); padding: 0; border: 1px solid var(--border); border-radius: 10px; color: var(--foreground); background: var(--card); box-shadow: 0 24px 80px #0008; }
.account-settings-crop-dialog.is-wide-crop { width: min(800px, calc(100% - 32px)); }
.account-settings-crop-dialog::backdrop { background: #000a; backdrop-filter: blur(3px); }
.account-settings-crop-controls { display: grid; justify-items: start; gap: 14px; padding: 22px; }
.account-settings-crop-dialog-heading h2 { margin: 0; font-size: 19px; }
.account-settings-crop-dialog-heading p { margin: 5px 0 0; color: var(--muted-foreground); font-size: 12px; }
.account-settings-crop-stage[hidden] { display: none; }
.account-settings-crop-stage { position: relative; width: min(100%, 440px); aspect-ratio: 1; overflow: hidden; border: 1px solid var(--border); border-radius: 6px; background: #111; cursor: grab; touch-action: none; }
.is-wide-crop .account-settings-crop-stage,.is-wide-crop .account-settings-crop-controls .account-settings-field { width: min(100%, 720px); }
.account-settings-crop-stage:active { cursor: grabbing; }
.account-settings-crop-stage img { position: absolute; max-width: none; max-height: none; user-select: none; pointer-events: none; }
.account-settings-crop-message { margin: 0; color: var(--muted-foreground); font-size: 12px; }
.account-settings-crop-message.is-error { color: #f08b92; }
.account-settings-crop-controls .account-settings-field { width: min(100%, 440px); }
.account-settings-crop-controls input[type="range"] { padding: 0; accent-color: var(--primary); }
.account-settings-crop-controls button:disabled { cursor: not-allowed; opacity: .6; }
.account-settings-crop-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; }
.account-settings-crop-actions [data-crop-apply] { margin-left: auto; }
.account-settings-notice { margin: 0 0 20px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; }
.account-settings-notice.is-success { border-color: color-mix(in oklch,#47a878 45%,var(--border)); color: #59bd8d; background: color-mix(in oklch,#47a878 10%,var(--card)); }
.account-settings-notice.is-error { border-color: color-mix(in oklch,#d35f68 45%,var(--border)); color: #f08b92; background: color-mix(in oklch,#d35f68 10%,var(--card)); }
.account-settings-description { color: var(--muted-foreground); font-size: 13px; line-height: 1.7; }
.account-settings-footnote { margin-top: 20px; }
.account-connection-card { display: flex; align-items: center; gap: 14px; width: 100%; margin-top: 22px; padding: 16px; border: 1px solid var(--border); border-radius: 6px; background: color-mix(in oklch,var(--secondary) 45%,var(--card)); }
.account-connection-icon { display: grid; width: 44px; height: 44px; flex: 0 0 auto; place-items: center; border: 1px solid var(--border); border-radius: 6px; color: var(--primary); background: var(--card); }
.account-connection-copy { min-width: 0; flex: 1; }
.account-connection-status { flex: 0 0 auto; padding: 4px 9px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted-foreground); font-size: 11px; font-weight: 700; }
.account-connection-status.is-connected { border-color: color-mix(in oklch,#47a878 45%,var(--border)); color: #59bd8d; }
.account-connection-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.account-connection-actions form { margin: 0; }
.account-connection-refresh-button { padding-inline: 12px; font-size: 12px; white-space: nowrap; }
.account-connection-refresh-button:disabled { cursor: not-allowed; opacity: .6; }
.account-connection-cooldown { color: var(--muted-foreground); font-size: 11px; white-space: nowrap; }
.account-minecraft-link { display: grid; gap: 10px; width: 100%; margin-top: 24px; padding: 20px; border: 1px solid var(--border); border-radius: 6px; background: color-mix(in oklch,var(--secondary) 35%,var(--card)); }
.account-minecraft-link h2 { font-size: 16px; }
.account-minecraft-link p { margin: 0; color: var(--muted-foreground); font-size: 13px; line-height: 1.7; }
.account-minecraft-link label { font-size: 12px; font-weight: 600; }
.account-minecraft-link input { width: 100%; border: 1px solid var(--border); border-radius: 6px; padding: 11px 13px; background: var(--background); color: var(--foreground); font: 13px ui-monospace,monospace; }
.account-minecraft-link small { color: var(--muted-foreground); font-size: 12px; }
.account-minecraft-link form { margin-top: 4px; }
.public-profile-content { justify-content: space-between; align-items: flex-start; gap: 36px; }
.public-profile-about { min-width: 0; flex: 1; padding: 22px 24px; border: 1px solid var(--border); border-top: 3px solid var(--primary); border-radius: 6px; background: var(--card); }
.public-profile-about h2 { font-family: var(--font-display); font-size: 20px; font-weight: 600; }
.public-profile-about p { margin-top: 12px; color: var(--muted-foreground); font-size: 14px; line-height: 1.75; overflow-wrap: anywhere; }
.public-profile-about p.text-muted-foreground { font-size: 13px; }

@media(max-width:700px) {
  .account-settings-page { padding-top: 32px; }
  .account-settings-page > div { width: calc(100% - 40px); }
  .account-settings-content .user-management-heading h1 { font-size: 29px; }
  .account-settings-security-card { padding: 16px; }
  .account-minecraft-link { padding: 16px; }
  .account-connection-card { align-items: flex-start; flex-wrap: wrap; }
  .account-connection-actions { width: calc(100% - 58px); flex-wrap: wrap; margin-left: 58px; }
  .public-profile-content { flex-direction: column; gap: 16px; }
  .public-profile-about,.public-profile-sidebar { width: 100%; }
}