/* Settings (settings.html, js/settings.js), and the Terms and Privacy pages (legal.html's look):
   white rounded cards on the lavender page, the site's violet buttons. */
body.person { background: #f7f6ff; }
.set-main { width: min(100% - 32px, 680px); margin: 26px auto 64px; color: #150e5e; }
.set-wrap { display: grid; gap: 16px; }
.set-wrap > h1 { margin: 0; font-size: 32px; }
.set-sub { margin: -8px 0 4px; color: #5d5a7d; font-size: 14px; }
.set-card { display: grid; gap: 12px; padding: 20px 22px; border-radius: 24px; background: #fff; box-shadow: var(--card-shadow, 0 2px 4px rgba(38, 27, 143, .05), 0 10px 26px rgba(38, 27, 143, .10)); }
.set-card h2 { margin: 0; font-size: 18px; }
.set-empty { justify-items: center; text-align: center; }
.set-empty h1 { margin: 0; }
.set-field { display: grid; gap: 6px; font-size: 13px; font-weight: 700; }
.set-field input, .set-field textarea, .set-field select { box-sizing: border-box; width: 100%; padding: 11px 13px; border: 0; border-radius: 13px; background: #f1eefe; color: #150e5e;
  font: 500 15px var(--font-read); }
.set-field textarea { resize: vertical; }
.set-field :is(input, textarea, select):focus { outline: 3px solid #a98bff; background: #fff; }
/* (the @username box: the ring and white go on the whole box, not the field inside it) */
.set-at:focus-within { outline: 3px solid #a98bff; background: #fff; }
.set-at input, .set-at input:focus { flex: 1; min-width: 0; outline: 0; background: transparent; }
.set-at input[readonly] { color: #6b6890; cursor: not-allowed; }
.set-at:has(input[readonly]):focus-within { outline: 0; background: #f1eefe; }
.set-field small { font-weight: 500; color: #6b6890; }
.set-note.is-ok, .set-msg.is-ok { color: #0a7d4f; font-weight: 700; }
.set-note.is-bad, .set-msg.is-bad { color: #b3261e; font-weight: 700; }
.set-at { display: flex; align-items: center; border-radius: 13px; background: #f1eefe; }
.set-at > span { padding-left: 13px; color: #6b6890; }
.set-at input { padding-left: 4px; }
.set-p { margin: 0; color: #3d3a6b; font-size: 14px; line-height: 1.5; }
.set-small { color: #6b6890; font-size: 12.5px; }
.set-switch { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: #f7f5ff; cursor: pointer; }
.set-switch input { margin: 0; flex: none; }
.set-switch b { display: block; font-size: 14px; } .set-switch small { color: #6b6890; font-size: 12.5px; }
.set-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.set-go { padding: 10px 18px; border: 0; border-radius: 13px; background: #21167c; color: #fff; font: 800 14px var(--font-read); cursor: pointer; }
.set-go:hover { background: #3424b8; } .set-go:disabled { opacity: .5; cursor: default; }
.set-go.is-danger { background: #c0262d; } .set-go.is-danger:hover:not(:disabled) { background: #9b1c22; }
.set-msg { font-size: 13px; color: #6b6890; }
.set-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.set-btn { padding: 10px 16px; border: 0; border-radius: 13px; background: #efedfd; color: #21167c; font: 700 14px var(--font-read); text-decoration: none; cursor: pointer; }
.set-btn:hover { background: #e2ddfc; }
.set-danger { box-shadow: inset 0 0 0 2px #f6c9cc, 0 10px 26px rgba(38, 27, 143, .06); }
.set-legal { margin: 4px 0 0; text-align: center; font-size: 13px; } .set-legal a { color: #4232d4; }

/* the Terms and Privacy pages */
.legal-main { width: min(100% - 32px, 760px); margin: 26px auto 64px; padding: 26px 30px; border-radius: 24px; background: #fff; color: #1b1840; line-height: 1.6;
  box-shadow: var(--card-shadow, 0 10px 26px rgba(38, 27, 143, .10)); }
.legal-main h1 { margin: 0 0 4px; font-size: 32px; color: #150e5e; }
.legal-main .legal-caps { font-size: 13.5px; }
.legal-main h3 { margin: 18px 0 6px; font-size: 16px; font-style: italic; color: #150e5e; }
.legal-main h2 { margin: 28px 0 8px; font-size: 20px; color: #150e5e; }
.legal-main table { width: 100%; border-collapse: collapse; font-size: 14px; }
.legal-main th, .legal-main td { padding: 8px 10px; border-bottom: 1px solid #ece9fc; text-align: left; vertical-align: top; }
.legal-main th { color: #150e5e; }
.legal-draft { margin: 0 0 18px; padding: 10px 14px; border-radius: 12px; background: #fff4d6; color: #7a5200; font-size: 14px; font-weight: 600; }
.legal-date { color: #6b6890; font-size: 14px; }
@media (max-width: 560px) { .legal-main { padding: 20px 18px; } .legal-main table { font-size: 13px; } }
.legal-main address.legal-agent { margin: 0 0 14px; padding: 10px 14px; border-left: 3px solid #c39cfa; border-radius: 8px; background: #f8f5ff; font-style: normal; }
.legal-main mark { padding: 0 3px; border-radius: 4px; background: #fff0b8; color: inherit; }

/* the Contact page (contact.html) */
.ct-card { scroll-margin-top: 16px; }
.ct-card[hidden], .ct-card [hidden] { display: none !important; }
.ct-card .set-p a { color: #4232d4; }
.ct-mail { margin: 0; font-size: 17px; font-weight: 800; }
.ct-mail a { color: #21167c; text-decoration: none; border-bottom: 2px solid #c9c2f5; }
.ct-mail a:hover { border-color: #21167c; }
/* Profile photo (js/settings.js photoBox): their circle, and the framing box (drag, zoom) */
.set-photo-row { display: flex; gap: 18px; align-items: center; }
.set-photo-now .acct-av.is-lg { width: 88px; height: 88px; font-size: 30px; box-shadow: 0 0 0 4px #efedfd; }
.set-photo-text { display: grid; gap: 10px; min-width: 0; }
.set-photo-wait { color: #7a5300; }
.set-photo-pick { display: inline-flex; align-items: center; gap: 6px; }
.set-photo-pick:focus-within { outline: 3px solid #a98bff; }
.set-crop { display: grid; gap: 12px; justify-items: center; padding: 16px; border-radius: 18px; background: #f7f5ff; }
.set-crop[hidden] { display: none; }
.set-crop-frame { width: min(100%, 260px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 4px #fff, 0 6px 18px rgba(38, 27, 143, .18); touch-action: none; }
.set-crop-frame canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.set-crop-frame canvas:active { cursor: grabbing; }
.set-crop-zoom { width: min(100%, 260px); }
.set-crop-zoom input[type=range] { all: revert; width: 100%; margin: 0; accent-color: #21167c; }
@media (max-width: 520px) { .set-photo-row { flex-direction: column; align-items: flex-start; } }