.edit-profile-modal { position: absolute; top: 0; left: 0; z-index: 110; width: 100%; height: 100%; margin: 0; padding: 0; visibility: hidden; pointer-events: none; }
    .edit-profile-modal.show { visibility: visible; pointer-events: auto; }
    .edit-profile-modal.closing { visibility: visible; pointer-events: none; }
    .edit-profile-scrim { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: rgba(0,0,0,.16); opacity: 0; cursor: pointer; transition: opacity .22s; }
    .edit-profile-modal.show .edit-profile-scrim { opacity: 1; }
    .edit-profile-sheet { --bg-primary: #F2F4F7; --bg-page-alt: #F2F4F7; position: absolute; top: 0; right: 0; left: auto; z-index: 1; width: min(84%, 365px); height: 100%; min-height: 0; margin: 0; padding: var(--safe-top) 0 0; overflow: hidden; isolation: isolate; border-radius: 0; display: flex; flex-direction: column; color: var(--text-primary); background: var(--bg-primary); box-shadow: -14px 0 35px rgba(0,0,0,.12); transform: translateX(102%); transition: transform .28s cubic-bezier(.2,.8,.2,1), background-color .2s ease, color .2s ease; }
    .edit-profile-modal.show .edit-profile-sheet { transform: translateX(0); }
    .edit-profile-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .edit-profile-scroll { position: relative; z-index: 1; flex: 1 1 auto; min-height: 0; padding: 0 20px calc(28px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; pointer-events: auto; scrollbar-width: none; }
    .edit-profile-scroll::-webkit-scrollbar { display: none; }
    [data-me-page="profile"][data-profile-theme-root] { color: var(--text-primary); }
    html[data-profile-theme="dark"] [data-me-page="profile"].active { background: var(--bg-primary); }
    html[data-profile-theme="dark"] [data-me-page="profile"] .page-back,
    html[data-profile-theme="dark"] [data-me-page="profile"] .page-heading { color: var(--text-primary); }
    html[data-profile-theme="dark"] #meQuickContent:has(.profile-page) { padding: 0 10px 12px; border-radius: 22px; background: var(--bg-primary); }
    .edit-avatar-button { position: relative; flex: none; width: 72px; height: 72px; padding: 0; border: 0; border-radius: 0; overflow: visible; background: transparent; cursor: pointer; }
    .edit-avatar-button .story-ring { width: 72px; height: 72px; }
    .edit-public-name { display: block; width: 100%; min-width: 0; height: 23px; min-height: 23px; padding: 0; border: 0; outline: 0; resize: none; field-sizing: fixed; overflow: hidden; overflow-wrap: anywhere; white-space: pre-wrap; background: transparent; color: #0f172a; font-size: 20px; font-weight: 800; line-height: 1.15; letter-spacing: -.03em; }
    .edit-me-card .edit-public-work-row { min-width: 0; margin-top: 2px; display: flex; align-items: baseline; gap: 6px; color: #94a3b8; }
    .edit-public-work-input { width: auto; flex: 0 1 auto; min-width: 0; max-width: 48%; field-sizing: content; }
    .edit-public-work-input, .edit-public-tagline { height: auto; padding: 0; border: 0; outline: 0; background: transparent; color: #94a3b8; font-size: 13px; font-weight: 500; }
    .edit-public-tagline { display: block; width: 100%; min-width: 0; margin-top: 6px; resize: none; field-sizing: content; overflow: visible; text-overflow: unset; white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word; color: #64748b; font-weight: 400; line-height: 1.55; }
    .edit-public-name::placeholder, .edit-public-work-input::placeholder, .edit-public-tagline::placeholder { color: #94a3b8; }
    .edit-public-name:focus, .edit-public-work-input:focus, .edit-public-tagline:focus { box-shadow: inset 0 -1px 0 #18181B; }
    html[data-profile-theme="dark"] .edit-public-name { color: #f4f4f5; }
    html[data-profile-theme="dark"] .edit-public-work-input, html[data-profile-theme="dark"] .edit-public-tagline { color: #94a3b8; }
    html[data-profile-theme="dark"] .edit-public-name:focus, html[data-profile-theme="dark"] .edit-public-work-input:focus, html[data-profile-theme="dark"] .edit-public-tagline:focus { box-shadow: inset 0 -1px 0 #E4E4E7; }
    .edit-me-card { cursor: default; }
    .edit-me-card .story-name-row { height: auto; margin-bottom: 2px; }
    .edit-profile-sheet .edit-me-card { margin-top: 20px; margin-bottom: 0; }
    .edit-profile-sheet .edit-profile-context-tabs {
      position: sticky;
      top: 0;
      z-index: 50;
      margin: 0 -20px 8px;
      padding: 8px 25px 5px;
      border: 0;
      border-radius: 0;
      background: var(--bg-primary, #F2F4F7);
      box-shadow: none;
    }
    html[data-profile-theme="dark"] .edit-profile-sheet .edit-profile-context-tabs { background: var(--bg-primary, #09090B); }
    .edit-context-panel { display: none; }
    .edit-context-panel.active { display: block; }
    .edit-profile-modal.is-spotlight-only .edit-me-card .story-identity,
    .edit-profile-modal.is-spotlight-only .edit-me-card .me-profile-strip {
      display: none;
    }
    .edit-profile-modal.is-spotlight-only .edit-me-card .me-card-toolbar {
      margin-top: 0;
    }
    .edit-profile-modal.is-personal-only .edit-context-panel:not([data-edit-context-panel="profile"]),
    .edit-profile-modal.is-personal-only .edit-me-card .me-profile-strip,
    .edit-profile-modal.is-personal-only .edit-me-card .me-card-toolbar,
    .edit-profile-modal.is-personal-only .edit-me-card .edit-avatar-wrap {
      display: none;
    }
    .edit-profile-fields-form { min-width: 0; }
    .edit-profile-modal:not(.is-personal-only) .edit-profile-field-label {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      padding: 0;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
    .edit-profile-personal-head {
      display: none;
      flex: 0 0 auto;
      align-items: center;
      gap: 8px;
      margin: 0;
      padding: max(8px, env(safe-area-inset-top, 0px)) 12px 8px;
      border-bottom: 1px solid var(--border-card);
      background: var(--bg-primary);
    }
    .edit-profile-modal.is-personal-only .edit-profile-personal-head {
      display: grid;
      grid-template-columns: minmax(72px, 1fr) minmax(0, 2fr) minmax(72px, 1fr);
      align-items: center;
    }
    .edit-profile-personal-cancel {
      justify-self: start;
      min-width: 44px;
      min-height: 44px;
      padding: 0 8px;
      border: 0;
      border-radius: 10px;
      color: var(--text-primary);
      background: transparent;
      cursor: pointer;
      font-size: 16px;
      font-weight: 600;
      line-height: 1.2;
    }
    .edit-profile-personal-head-title {
      overflow: hidden;
      text-align: center;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--text-primary);
      font-size: 16px;
      font-weight: 750;
      letter-spacing: -.02em;
    }
    .edit-profile-personal-head-spacer {
      justify-self: end;
      min-width: 44px;
      min-height: 44px;
    }
    html:not(.is-desktop-board) .edit-profile-modal.is-personal-only .edit-profile-scrim {
      display: none;
    }
    html:not(.is-desktop-board) .edit-profile-modal.is-personal-only .edit-profile-sheet {
      left: 0;
      width: 100%;
      max-width: none;
      box-shadow: none;
    }
    html:not(.is-desktop-board) .edit-profile-modal.is-personal-only .edit-profile-scroll {
      padding: 8px 16px calc(24px + env(safe-area-inset-bottom));
    }
    html:not(.is-desktop-board) .edit-profile-modal.is-personal-only .edit-profile-sheet .edit-me-card {
      margin: 0;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }
    html:not(.is-desktop-board) .edit-profile-modal.is-personal-only .edit-me-card .story-identity {
      display: block;
    }
    html:not(.is-desktop-board) .edit-profile-modal.is-personal-only .edit-profile-fields-form {
      display: grid;
      gap: 14px;
      padding: 18px 16px 16px;
      border-radius: 20px;
      background: #fff;
      box-shadow: 0 1px 0 rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06);
    }
    html:not(.is-desktop-board) .edit-profile-modal.is-personal-only .edit-profile-field {
      display: grid;
      gap: 6px;
    }
    html:not(.is-desktop-board) .edit-profile-modal.is-personal-only .edit-profile-field-label {
      color: #64748b;
      font-size: 13px;
      font-weight: 650;
      letter-spacing: -.01em;
    }
    html:not(.is-desktop-board) .edit-profile-modal.is-personal-only .edit-public-work-row {
      display: grid;
      gap: 14px;
      margin: 0;
    }
    html:not(.is-desktop-board) .edit-profile-modal.is-personal-only .edit-public-work-sep {
      display: none;
    }
    html:not(.is-desktop-board) .edit-profile-modal.is-personal-only .edit-public-name,
    html:not(.is-desktop-board) .edit-profile-modal.is-personal-only .edit-public-work-input,
    html:not(.is-desktop-board) .edit-profile-modal.is-personal-only .edit-public-tagline {
      width: 100%;
      max-width: none;
      min-height: 44px;
      padding: 10px 12px;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      background: #fff;
      color: #0f172a;
      font-size: 16px;
      font-weight: 500;
      line-height: 1.35;
      box-shadow: none;
    }
    html:not(.is-desktop-board) .edit-profile-modal.is-personal-only .edit-public-name {
      height: auto;
      min-height: 44px;
      font-size: 16px;
      font-weight: 600;
    }
    html:not(.is-desktop-board) .edit-profile-modal.is-personal-only .edit-public-tagline {
      min-height: 72px;
      resize: vertical;
      field-sizing: normal;
    }
    html:not(.is-desktop-board) .edit-profile-modal.is-personal-only .edit-public-name:focus,
    html:not(.is-desktop-board) .edit-profile-modal.is-personal-only .edit-public-work-input:focus,
    html:not(.is-desktop-board) .edit-profile-modal.is-personal-only .edit-public-tagline:focus {
      outline: 0;
      border-color: #18181b;
      box-shadow: 0 0 0 3px rgba(24, 24, 27, .08);
    }
    html:not(.is-desktop-board) .edit-profile-modal.is-personal-only .edit-profile-personal-save-bottom {
      display: block;
      width: 100%;
      min-height: 48px;
      margin-top: 4px;
      padding: 0 16px;
      border: 0;
      border-radius: 14px;
      color: #fff;
      background: #18181b;
      cursor: pointer;
      font-size: 16px;
      font-weight: 750;
      letter-spacing: -.01em;
    }
    html:not(.is-desktop-board) .edit-profile-modal.is-personal-only .edit-profile-personal-save-bottom:disabled {
      opacity: .55;
      cursor: default;
    }
    html:not(.is-desktop-board) .edit-profile-modal.is-personal-only .edit-profile-personal-save-bottom[hidden] {
      display: none;
    }
    .applied-template-frame { overflow: hidden; margin-bottom: 14px; border-radius: 24px; background: var(--bg-card); box-shadow: var(--shadow-card); border: 1px solid var(--border-card); }
    .applied-template-frame[hidden], [data-default-profile-copy][hidden], [data-profile-page][hidden] { display: none; }
    .applied-template-frame .tpl-preview { min-height: 420px; }
    .applied-template-frame.jiggle-mode { overflow: visible; }
    .edit-profile-sheet.jiggle-mode .edit-profile-scroll { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
    .jiggle-done-bar { position: absolute; left: 16px; right: 16px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 9; display: none; }
    .jiggle-done-bar.show, .jiggle-done-bar:not([hidden]) { display: block; }
    .jiggle-done-bar[hidden] { display: none; }
    .jiggle-done-bar button { width: 100%; height: 46px; padding: 0; border: 0; border-radius: 16px; color: var(--accent-fg); background: var(--accent); box-shadow: 0 12px 28px rgba(24, 24, 27, .16); cursor: pointer; font-size: 15px; font-weight: 850; }
    .jiggle-mode [data-jiggle-item] { position: relative; overflow: visible; animation: jiggle .32s ease-in-out infinite; transform-origin: center center; }
    .jiggle-mode [data-jiggle-item]:nth-child(2n) { animation-duration: .36s; animation-delay: -80ms; }
    .jiggle-mode [data-jiggle-item]:nth-child(3n) { animation-duration: .28s; animation-delay: -140ms; }
    .jiggle-mode [data-jiggle-item]:focus-within, .jiggle-mode [data-jiggle-item].jiggle-dragging { animation: none; transform: none; z-index: 6; }
    .jiggle-mode [data-jiggle-item][data-item-kind="tag"], .jiggle-mode [data-jiggle-item][data-item-kind="photo"], .jiggle-mode [data-jiggle-item][data-item-kind="card"], .jiggle-mode [data-jiggle-item][data-item-kind="text"] { outline: 1px dashed rgba(40,108,85,.22); }
    .jiggle-chrome { position: absolute; top: -9px; left: -9px; right: -9px; z-index: 7; display: none; align-items: flex-start; justify-content: space-between; pointer-events: none; }
    .jiggle-mode .jiggle-chrome { display: flex; }
    .jiggle-chrome-left { display: flex; gap: 4px; }
    .jiggle-chrome button { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 4px 10px rgba(0,0,0,.16); cursor: pointer; pointer-events: auto; font-size: 11px; font-weight: 850; line-height: 1; }
    .jiggle-delete { color: #fff; background: #e11d48; }
    .jiggle-copy { color: #1d2823; background: #fff; }
    .jiggle-handle { color: #1d2823; background: #fff; cursor: grab; touch-action: none; }
    .jiggle-handle:active { cursor: grabbing; }
    .jiggle-mode [data-inline-edit] { cursor: text; caret-color: #18181B; }
    .jiggle-mode [data-inline-edit]:focus { outline: 2px solid rgba(40,108,85,.35); outline-offset: 2px; border-radius: 8px; background: rgba(255,255,255,.18); }
    @keyframes jiggle {
      0% { transform: rotate(-0.5deg); }
      50% { transform: rotate(0.5deg); }
      100% { transform: rotate(-0.5deg); }
    }
    .profile-page { display: grid; gap: 16px; width: 100%; min-width: 0; margin-bottom: 14px; overflow: visible; }
    .profile-page > .interest-card + .interest-card { margin-top: -8px; }
    .profile-page:empty { display: none; }
    .profile-hero { display: flex; flex-direction: column; width: 100%; min-width: 0; overflow: visible; }
    .profile-cover-wrap { position: relative; width: 100%; height: auto; aspect-ratio: 16 / 10; flex: 0 0 auto; overflow: hidden; border-radius: 24px; background: linear-gradient(145deg, #d7e4dc, #9fb6aa); }
    .profile-cover-wrap.is-empty { background: var(--media-empty); box-shadow: inset 0 0 0 1.5px var(--border-card); }
    .profile-cover { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
    .profile-cover-caption,
    .history button.profile-cover-caption,
    #visitorMeDrawer .history button.profile-cover-caption {
      position: absolute;
      top: 12px;
      left: 12px;
      right: auto;
      z-index: 2;
      display: inline-flex;
      align-items: center;
      width: max-content;
      max-width: calc(100% - 24px);
      margin: 0;
      padding: 6px 12px;
      border: 0;
      border-radius: 999px;
      color: #fff;
      background: rgba(0,0,0,.38);
      box-shadow: 0 1px 3px rgba(0,0,0,.12);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      cursor: pointer;
      font: inherit;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .02em;
      line-height: 1.3;
      white-space: nowrap;
      pointer-events: auto;
      touch-action: manipulation;
    }
    .profile-cover-caption:hover,
    .profile-cover-caption:focus-visible,
    .history button.profile-cover-caption:hover,
    .history button.profile-cover-caption:focus-visible,
    #visitorMeDrawer .history button.profile-cover-caption:hover,
    #visitorMeDrawer .history button.profile-cover-caption:focus-visible { background: rgba(0,0,0,.5); }
    .profile-cover-cam { position: absolute; top: 12px; right: 12px; z-index: 2; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; color: var(--text-primary); background: var(--bg-card); box-shadow: 0 8px 18px rgba(22,27,34,.18); cursor: pointer; font-size: 15px; font-weight: 700; line-height: 1; pointer-events: auto; touch-action: manipulation; }
    .profile-cover-wrap:not(.is-empty) .profile-cover-cam {
      top: 50%;
      left: 50%;
      right: auto;
      width: 40px;
      height: 40px;
      color: #fff;
      background: rgba(0,0,0,.3);
      box-shadow: none;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      transform: translate(-50%, -50%);
      opacity: .78;
      font-size: 16px;
      font-weight: 500;
      transition: background-color .18s ease, opacity .18s ease;
    }
    .profile-cover-wrap:not(.is-empty) .profile-cover-cam:hover,
    .profile-cover-wrap:not(.is-empty) .profile-cover-cam:focus-visible { background: rgba(0,0,0,.5); opacity: 1; }
    .profile-cover-wrap.is-empty .profile-cover-cam { display: none; }
    .profile-cover-delete { position: absolute; top: 8px; right: 8px; left: auto; z-index: 2; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; color: #fff; background: rgba(0,0,0,.3); box-shadow: 0 1px 3px rgba(0,0,0,.12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); cursor: pointer; font-size: 12px; font-weight: 500; line-height: 1; pointer-events: auto; touch-action: manipulation; transition: background-color .18s ease; }
    .profile-cover-delete:hover, .profile-cover-delete:focus-visible { background: rgba(0,0,0,.5); }
    .profile-cover-prompt { position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; justify-items: center; gap: 8px; margin: 0; padding: 0; border: 0; color: var(--accent); background: transparent; cursor: pointer; }
    .profile-cover-prompt span { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; color: var(--accent-fg); background: var(--accent); box-shadow: 0 8px 18px rgba(24, 24, 27, .16); font-size: 22px; }
    .profile-cover-prompt small { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
    .profile-bio-card {
      position: relative;
      z-index: 10;
      margin: 0 12px;
      padding: 20px;
      border-radius: 16px;
      background: #fff;
      border: 1px solid #f1f5f9;
      box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    }
    .profile-bio-card.is-edit { padding-top: 38px; }
    .profile-hero.has-cover.has-bio .profile-bio-card { margin-top: -1rem; }
    .profile-bio-delete { position: absolute; top: 8px; right: 8px; z-index: 2; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; color: #fff; background: rgba(0,0,0,.38); box-shadow: 0 1px 3px rgba(0,0,0,.12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); cursor: pointer; font-size: 12px; font-weight: 500; line-height: 1; transition: background-color .18s ease; }
    .profile-bio-delete:hover, .profile-bio-delete:focus-visible { background: rgba(0,0,0,.5); }
    .profile-bio-add { width: calc(100% - 24px); height: 46px; margin: 12px 12px 0; border: 1.5px dashed var(--border-card); border-radius: 16px; color: var(--accent); background: var(--accent-soft); cursor: pointer; font-size: 14px; font-weight: 800; }
    html[data-profile-theme="dark"] .profile-bio-card {
      background: #171717;
      border-color: #262626;
      box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.35);
    }
    .profile-bio-text, .profile-bio-input {
      margin: 0;
      width: 100%;
      padding: 0;
      color: #262626;
      font-size: 16px;
      font-weight: 600;
      letter-spacing: -0.025em;
      line-height: 1.375;
      text-align: center;
    }
    html[data-profile-theme="dark"] .profile-bio-text,
    html[data-profile-theme="dark"] .profile-bio-input { color: #f5f5f5; }
    .profile-bio-card.is-edit .profile-bio-input {
      min-height: 4.5rem;
      height: 4.5rem;
      padding: 0 0 6px;
      border: 0;
      border-bottom: 1px solid transparent;
      border-radius: 0;
      outline: none;
      resize: none;
      overflow: hidden;
      background: transparent;
      color: #525252;
      font-size: 14px;
      font-weight: 400;
      letter-spacing: 0;
      line-height: 1.5rem;
      text-align: left;
    }
    html[data-profile-theme="dark"] .profile-bio-card.is-edit .profile-bio-input { color: #d4d4d4; }
    .profile-bio-card.is-edit .profile-bio-input::placeholder { color: var(--text-secondary); font-weight: 500; }
    .profile-bio-card.is-edit .profile-bio-input:focus { box-shadow: none; border-bottom-color: #e4e4e7; }
    html[data-profile-theme="dark"] .profile-bio-card.is-edit .profile-bio-input:focus { border-bottom-color: #3f3f46; }
    .profile-bio-input { min-height: 72px; border: 0; outline: 0; resize: none; background: transparent; }
    .profile-bio-input::placeholder { color: var(--text-secondary); font-weight: 500; }
    @media (min-width: 768px) {
      .profile-bio-text { font-size: 18px; }
    }
    .interest-card { position: relative; padding: 20px; border-radius: 16px; background: #fff; border: 1px solid #f1f5f9; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
    html[data-profile-theme="dark"] .interest-card { background: #171717; border-color: #262626; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.28); }
    .interest-card-delete { position: absolute; top: 8px; right: 8px; z-index: 2; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; color: #fff; background: rgba(0,0,0,.38); box-shadow: 0 1px 3px rgba(0,0,0,.12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); cursor: pointer; font-size: 12px; font-weight: 500; line-height: 1; transition: background-color .18s ease; }
    .interest-card-delete:hover, .interest-card-delete:focus-visible { background: rgba(0,0,0,.5); }
    .interest-heading, .interest-heading-input { margin: 0; width: 100%; color: #171717; font-size: 24px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; text-align: center; }
    .interest-heading + .interest-media,
    .interest-heading-input + .interest-media { margin-top: 20px; }
    .interest-heading-input { box-sizing: border-box; padding: 0 36px; border: 0; outline: 0; background: transparent; }
    html[data-profile-theme="dark"] .interest-heading,
    html[data-profile-theme="dark"] .interest-heading-input { color: #fff; }
    .interest-heading-input:focus { box-shadow: 0 0 0 2px var(--accent-soft); border-radius: 8px; }
    .interest-story, .interest-story-input { margin: 14px 0 0; width: 100%; color: #525252; font-size: 14px; line-height: 1.5rem; }
    .interest-card:has(> .interest-media:not(.is-edit)[data-filled="0"]) .interest-story { margin-top: 0; }
    html[data-profile-theme="dark"] .interest-story,
    html[data-profile-theme="dark"] .interest-story-input { color: #d4d4d4; }
    .interest-story-input { height: 4.5rem; padding: 0 0 6px; border: 0; border-bottom: 1px solid transparent; border-radius: 0; outline: none; resize: none; overflow: hidden; background: transparent; }
    .interest-story-input:focus { box-shadow: none; border-bottom-color: #e4e4e7; }
    html[data-profile-theme="dark"] .interest-story-input:focus { border-bottom-color: #3f3f46; }
    .interest-heading-input::placeholder, .interest-story-input::placeholder { color: var(--text-secondary); }
    .interest-tags { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 0; }
    .interest-tag-list { display: flex; flex-wrap: wrap; gap: 4px; }
    .interest-tag {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      max-width: 100%;
      padding: 3px 6px 3px 4px;
      border-radius: 10px;
      color: var(--accent);
      background: var(--accent-soft);
      font-size: 10px;
      font-weight: 750;
      line-height: 1.15;
    }
    .interest-tag-icon { font-size: 11px; line-height: 1; }
    .interest-tag.is-icon {
      width: 100%;
      height: auto;
      aspect-ratio: 1;
      padding: 0;
      justify-content: center;
      border-radius: 50%;
    }
    .interest-tag.is-icon .interest-tag-icon { font-size: 16px; }
    .interest-tags.is-saved { margin: 12px 0 0; }
    /* The icons themselves sit in one row of 8 (the list is the grid, not
       one cell of it, which stacked them one per line). */
    .interest-tags.is-saved .interest-tag-list {
      display: grid;
      grid-template-columns: repeat(8, minmax(0, 1fr));
      gap: 6px;
    }
    html[data-profile-theme="dark"] .interest-tag { color: #E4E4E7; background: rgba(228, 228, 231, .16); }
    .interest-tag-remove {
      width: 12px;
      height: 12px;
      padding: 0;
      border: 0;
      border-radius: 50%;
      color: inherit;
      background: transparent;
      cursor: pointer;
      font-size: 8px;
      line-height: 1;
    }
    .interest-tag-add {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      width: 100%;
      height: 34px;
      margin-top: 0;
      padding: 0 12px;
      border: 1.5px dashed var(--border-card);
      border-radius: 16px;
      color: var(--accent);
      background: var(--accent-soft);
      cursor: pointer;
      font-size: 12px;
      font-weight: 800;
    }
    .interest-tag-add:disabled { opacity: .45; cursor: default; }
    .interest-tag-sheet {
      position: absolute;
      inset: 0;
      z-index: 80;
      overflow: hidden;
      pointer-events: none;
    }
    .interest-tag-sheet.show { pointer-events: auto; }
    .interest-tag-sheet[hidden] { display: none; }
    .interest-tag-sheet-scrim {
      position: absolute;
      inset: 0;
      border: 0;
      background: rgba(20,25,22,.18);
      opacity: 0;
      pointer-events: none;
      transition: opacity .22s ease;
    }
    .interest-tag-sheet.show .interest-tag-sheet-scrim { opacity: 1; pointer-events: auto; }
    .edit-profile-sheet:has(#interestTagSheet.show) .edit-profile-scroll {
      overflow: hidden;
    }
    .interest-tag-sheet-panel {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1;
      height: 90%;
      max-height: none;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      isolation: isolate;
      padding: 15px 16px calc(16px + env(safe-area-inset-bottom));
      border-radius: 28px 28px 0 0;
      background: #F2F4F7;
      box-shadow: 0 -14px 40px rgba(0,0,0,.16);
      transform: translateY(103%);
      transition: transform .3s cubic-bezier(.2,.8,.2,1);
    }
    .interest-tag-sheet.show .interest-tag-sheet-panel { transform: translateY(0); }
    html[data-profile-theme="dark"] .interest-tag-sheet-panel { background: #09090B; }
    .interest-tag-sheet-grabber { flex: 0 0 auto; width: 38px; height: 4px; margin: 0 auto 12px; border-radius: 5px; background: #d8dcda; }
    .interest-tag-sheet-head { flex: 0 0 auto; display: grid; grid-template-columns: 70px 1fr 70px; align-items: center; margin-bottom: 8px; }
    .interest-tag-sheet-head strong { text-align: center; font-size: 15px; }
    .interest-tag-sheet-head button { min-height: 36px; border: 0; border-radius: 13px; background: transparent; cursor: pointer; font-size: 12px; font-weight: 750; }
    #interestTagSheetClose { color: #3f4843; }
    #interestTagSheetDone { color: #fff; background: #1a1d1b; }
    .interest-tag-sheet-count { display: block; margin: 0 0 10px; color: #8b938e; font-size: 10px; text-align: center; }
    .interest-tag-sheet-search {
      flex: 0 0 auto;
      height: 42px;
      margin: 0 0 12px;
      padding: 0 12px;
      border-radius: 16px;
      display: flex;
      align-items: center;
      gap: 8px;
      background: #fff;
      box-shadow: 0 1px 2px rgb(0 0 0 / .05);
    }
    .interest-tag-sheet-search span { color: #71717A; font-size: 20px; }
    .interest-tag-sheet-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; }
    html[data-profile-theme="dark"] .interest-tag-sheet-search { background: #171717; }
    .interest-tag-sheet-groups { min-height: 0; flex: 1; overflow: auto; padding-bottom: 8px; overflow-anchor: none; scrollbar-width: none; }
    .interest-tag-sheet-groups::-webkit-scrollbar { display: none; }
    .interest-tag-group {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      margin: 0 0 12px;
      padding: 22px 20px 18px;
      border: 1px solid #f1f5f9;
      border-radius: 32px;
      background: #fff;
      box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
    }
    html[data-profile-theme="dark"] .interest-tag-group {
      background: #171717;
      border-color: #262626;
      box-shadow: 0 1px 2px 0 rgb(0 0 0 / .28);
    }
    .interest-tag-group-name,
    .interest-tag-group h4 {
      margin: 0 0 16px;
      color: #0f172a;
      font-size: 20px;
      font-weight: 800;
      letter-spacing: -.03em;
      line-height: 1.15;
      text-align: center;
    }
    html[data-profile-theme="dark"] .interest-tag-group-name,
    html[data-profile-theme="dark"] .interest-tag-group h4 { color: #f4f4f5; }
    .interest-tag-choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
    .interest-tag-choices button {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      padding: 4px 7px 4px 5px;
      border: 0;
      border-radius: 10px;
      color: var(--text-primary);
      background: #F4F4F5;
      cursor: pointer;
      font-size: 10px;
      font-weight: 750;
      box-shadow: 0 1px 2px rgb(0 0 0 / .05);
    }
    .interest-tag-choices .interest-tag-icon { font-size: 11px; }
    .interest-tag-choices button.is-on { color: #fff; background: #1a1d1b; }
    html[data-profile-theme="dark"] .interest-tag-choices button { background: #262626; }
    html[data-profile-theme="dark"] .interest-tag-choices button.is-on { color: #18181B; background: #E4E4E7; }
    .interest-tag-empty { margin: 8px 0 0; color: #71717A; font-size: 13px; text-align: center; }
    .interest-layout-switch { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 6px; margin: 10px 0 12px; }
    .interest-layout-switch button { height: 32px; padding: 0 4px; border: 0; border-radius: 10px; color: var(--text-secondary); background: var(--bg-page-alt); cursor: pointer; font-size: 11px; font-weight: 800; }
    .interest-layout-switch button.is-active { color: var(--accent-fg); background: var(--accent); }
    .interest-media { display: grid; gap: 12px; width: 100%; min-width: 0; }
    .interest-media:not(.is-edit)[data-filled="0"] { display: none; margin: 0; }
    .interest-media[data-layout="single"] { grid-template-columns: 1fr; }
    .interest-media[data-layout="single"][data-filled="0"] .interest-photo.is-empty { min-height: 108px; }
    .interest-media[data-layout="single"][data-filled="1"] .interest-photo { min-height: 0; height: auto; aspect-ratio: 4 / 3; }
    .interest-media[data-layout="duo"] { grid-template-columns: 1fr 1fr; aspect-ratio: 2 / 1; }
    .interest-media[data-layout="more"] { display: block; }
    .interest-media[data-layout="more"] .circle-photo-pager,
    .interest-more-pager {
      height: auto;
      aspect-ratio: 3 / 4;
      margin: 0;
    }
    .interest-media[data-layout="more"] .circle-photo-pager-slide img,
    .interest-media[data-layout="more"] .circle-photo-pager-slide video {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      pointer-events: none;
      -webkit-user-drag: none;
    }
    .interest-media[data-layout="more"] .circle-photo-pager-scroller,
    .interest-media[data-layout="more"] .circle-photo-pager-scroller * {
      touch-action: pan-x pan-y;
    }
    .interest-more-pager {
      position: relative;
      width: 100%;
      overflow: hidden;
      border-radius: 16px;
    }
    .interest-more-scroller {
      display: flex;
      width: 100%;
      min-width: 0;
      height: 100%;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }
    .interest-more-scroller::-webkit-scrollbar { display: none; }
    .interest-more-slide {
      position: relative;
      flex: 0 0 100%;
      width: 100%;
      min-width: 100%;
      max-width: 100%;
      height: 100%;
      box-sizing: border-box;
      scroll-snap-align: start;
      background: #f4f5f7;
    }
    html[data-profile-theme="dark"] .interest-more-slide { background: #171717; }
    .interest-more-slide .interest-photo,
    .interest-more-add { width: 100%; height: 100%; min-height: 0; border-radius: 0; }
    .interest-more-add {
      padding: 0;
      border: 2px dashed #d8dcda;
      display: grid;
      place-items: center;
      color: inherit;
      background: #f8fafc;
      cursor: pointer;
    }
    html[data-profile-theme="dark"] .interest-more-add { background: #171717; border-color: #3f3f46; }
    .interest-more-dots {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 10px;
      z-index: 2;
      display: flex;
      justify-content: center;
      gap: 6px;
      pointer-events: none;
    }
    .interest-more-dots button {
      width: 6px;
      height: 6px;
      padding: 0;
      border: 0;
      border-radius: 50%;
      background: rgba(255,255,255,.45);
      box-shadow: 0 0 0 1px rgba(0,0,0,.12);
      pointer-events: auto;
      cursor: pointer;
    }
    .interest-more-dots button.is-on { width: 16px; border-radius: 99px; background: #fff; }
    /* A fixed shape (not a fixed height) so a photo's Adjust framing looks the same on every phone. */
    .interest-media[data-layout="trio"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; height: auto; aspect-ratio: 16 / 15; min-height: 0; }
    .interest-media[data-layout="trio"] > .interest-photo { height: 100%; min-height: 0; }
    .interest-media-stack { display: grid; grid-template-rows: 1fr 1fr; gap: 12px; height: 100%; min-height: 0; }
    .interest-media-stack .interest-photo { height: 100%; min-height: 0; }
    .interest-photo { position: relative; overflow: hidden; min-height: 0; height: 100%; width: 100%; border-radius: 16px; background-size: cover; background-position: center; }
    .interest-media.is-edit .interest-photo { touch-action: none; cursor: grab; }
    .interest-media.is-edit .interest-photo.is-empty { touch-action: manipulation; cursor: pointer; }
    .interest-media.is-edit .interest-photo img,
    .interest-media.is-edit .interest-photo video { pointer-events: none; -webkit-user-drag: none; }
    .interest-media.is-edit .interest-photo.is-selected,
    .interest-media.is-edit .interest-photo.is-drop-target { box-shadow: 0 0 0 3px var(--accent); }
    .interest-media.is-edit .interest-photo.is-dragging { opacity: .55; cursor: grabbing; }
    .interest-photo img, .interest-photo video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
    .interest-photo.is-empty { display: grid; place-items: center; padding: 0; border: 2px dashed #e2e8f0; color: inherit; background: #f8fafc; box-shadow: none; cursor: pointer; }
    html[data-profile-theme="dark"] .interest-photo.is-empty { background: #171717; border-color: #3f3f46; }
    .interest-media:not(.is-edit) .interest-photo.is-empty { display: none; }
    .interest-photo-plus { width: 100%; height: 100%; min-height: inherit; padding: 8px; border: 0; border-radius: 16px; display: grid; place-content: center; justify-items: center; gap: 6px; color: #94a3b8; background: transparent; }
    .interest-photo-plus span { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #94a3b8; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .06); font-size: 22px; font-weight: 400; line-height: 1; }
    .interest-photo-plus small { color: #94a3b8; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
    html[data-profile-theme="dark"] .interest-photo-plus,
    html[data-profile-theme="dark"] .interest-photo-plus small { color: #a1a1aa; }
    html[data-profile-theme="dark"] .interest-photo-plus span { color: #a1a1aa; background: #262626; box-shadow: 0 1px 2px rgb(0 0 0 / .4); }
    .interest-photo-replace, .interest-photo-remove {
      position: absolute;
      z-index: 1;
      padding: 0;
      border: 0;
      border-radius: 50%;
      color: #fff;
      background: rgba(0,0,0,.3);
      box-shadow: none;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      cursor: pointer;
      line-height: 1;
      transition: background-color .18s ease, opacity .18s ease;
    }
    .interest-photo-replace {
      top: 50%;
      left: 50%;
      width: 40px;
      height: 40px;
      font-size: 16px;
      opacity: .78;
      transform: translate(-50%, -50%);
    }
    .interest-photo-remove { top: 8px; left: 8px; right: auto; width: 24px; height: 24px; font-size: 12px; font-weight: 500; }
    .interest-photo-adjust, .circle-photo-cell-adjust, .profile-cover-adjust {
      position: absolute; z-index: 2; top: 8px; right: 8px; left: auto; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%;
      display: grid; place-items: center; color: #fff; background: rgba(0,0,0,.3);
      backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); cursor: pointer; line-height: 1; touch-action: manipulation; pointer-events: auto;
    }
    .circle-photo-cell-adjust { top: 6px; right: 6px; width: 22px; height: 22px; background: rgba(0,0,0,.4); }
    /* Spotlight edit: ✕ top-left, crop top-right (Circle composer keeps its own ✕ spot). */
    .profile-cover-wrap .profile-cover-delete { left: 8px; right: auto; }
    .interest-more-pager .circle-photo-cell-remove { left: 6px; right: auto; }
    .interest-photo-adjust:hover, .interest-photo-adjust:focus-visible,
    .circle-photo-cell-adjust:hover, .circle-photo-cell-adjust:focus-visible,
    .profile-cover-adjust:hover, .profile-cover-adjust:focus-visible { background: rgba(0,0,0,.5); }
    .photo-adjust-measure { position: absolute; left: -10000px; top: 0; visibility: hidden; pointer-events: none; }
    .photo-adjust {
      position: fixed; inset: 0; z-index: 2460; display: flex; flex-direction: column;
      padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
      color: #fff; background: #0b0d0c; touch-action: none; overscroll-behavior: contain;
      opacity: 0; transition: opacity .16s ease; -webkit-user-select: none; user-select: none;
    }
    .photo-adjust[hidden] { display: none; }
    .photo-adjust.show { opacity: 1; }
    .photo-adjust-top { flex: 0 0 auto; padding: 14px 16px 6px; display: grid; justify-items: center; gap: 3px; text-align: center; position: relative; }
    .photo-adjust-corner { position: absolute; top: 8px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; }
    .photo-adjust-corner[hidden] { display: none; }
    .photo-adjust-corner.is-back { left: 12px; }
    .photo-adjust-corner.is-delete { right: 12px; color: #ff6b5e; }
    .photo-adjust-top:has(.photo-adjust-corner:not([hidden])) { padding-left: 64px; padding-right: 64px; }
    .photo-adjust-top strong { font-size: 16px; font-weight: 750; }
    .photo-adjust-top span { color: rgba(255,255,255,.62); font-size: 12px; }
    .photo-adjust-stage { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; touch-action: none; cursor: grab; }
    .photo-adjust-stage:active { cursor: grabbing; }
    .photo-adjust-ghost { position: absolute; max-width: none; opacity: .32; pointer-events: none; -webkit-user-drag: none; }
    .photo-adjust-box { position: absolute; overflow: hidden; border-radius: 16px; box-shadow: 0 0 0 2px #fff, 0 10px 40px rgba(0,0,0,.45); pointer-events: none; }
    .photo-adjust.is-round .photo-adjust-box { border-radius: 50%; }
    /* Crop mode (Circle composer): square-cornered frame with 8 handles,
       like Apple Photos; a 3x3 grid shows while dragging. */
    .photo-adjust.is-crop .photo-adjust-box { border-radius: 0; box-shadow: 0 0 0 1.5px #fff, 0 0 0 9999px rgba(11,13,12,.55); }
    .photo-adjust.is-crop .photo-adjust-ghost { opacity: 1; }
    .photo-adjust-crop { position: absolute; pointer-events: none; }
    .photo-adjust-crop[hidden] { display: none; }
    .photo-adjust.is-cropping .photo-adjust-crop {
      background:
        linear-gradient(to right, transparent calc(33.333% - .5px), rgba(255,255,255,.5) calc(33.333% - .5px), rgba(255,255,255,.5) calc(33.333% + .5px), transparent calc(33.333% + .5px), transparent calc(66.666% - .5px), rgba(255,255,255,.5) calc(66.666% - .5px), rgba(255,255,255,.5) calc(66.666% + .5px), transparent calc(66.666% + .5px)),
        linear-gradient(to bottom, transparent calc(33.333% - .5px), rgba(255,255,255,.5) calc(33.333% - .5px), rgba(255,255,255,.5) calc(33.333% + .5px), transparent calc(33.333% + .5px), transparent calc(66.666% - .5px), rgba(255,255,255,.5) calc(66.666% - .5px), rgba(255,255,255,.5) calc(66.666% + .5px), transparent calc(66.666% + .5px));
    }
    .photo-adjust-handle { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; pointer-events: auto; touch-action: none; }
    .photo-adjust-handle::before { content: ""; position: absolute; left: 50%; top: 50%; border: 0 solid #fff; }
    .photo-adjust-handle.is-nw { left: 0; top: 0; cursor: nwse-resize; }
    .photo-adjust-handle.is-ne { left: 100%; top: 0; cursor: nesw-resize; }
    .photo-adjust-handle.is-se { left: 100%; top: 100%; cursor: nwse-resize; }
    .photo-adjust-handle.is-sw { left: 0; top: 100%; cursor: nesw-resize; }
    .photo-adjust-handle.is-n { left: 50%; top: 0; cursor: ns-resize; }
    .photo-adjust-handle.is-s { left: 50%; top: 100%; cursor: ns-resize; }
    .photo-adjust-handle.is-e { left: 100%; top: 50%; cursor: ew-resize; }
    .photo-adjust-handle.is-w { left: 0; top: 50%; cursor: ew-resize; }
    /* Corners: thick L marks just inside the frame. */
    .photo-adjust-handle.is-nw::before { width: 20px; height: 20px; margin: -2px 0 0 -2px; border-width: 4px 0 0 4px; }
    .photo-adjust-handle.is-ne::before { width: 20px; height: 20px; margin: -2px 0 0 -22px; border-width: 4px 4px 0 0; }
    .photo-adjust-handle.is-se::before { width: 20px; height: 20px; margin: -22px 0 0 -22px; border-width: 0 4px 4px 0; }
    .photo-adjust-handle.is-sw::before { width: 20px; height: 20px; margin: -22px 0 0 -2px; border-width: 0 0 4px 4px; }
    /* Sides: short bars on the middle of each edge. */
    .photo-adjust-handle.is-n::before, .photo-adjust-handle.is-s::before { width: 24px; height: 0; margin-left: -12px; border-top-width: 4px; }
    .photo-adjust-handle.is-n::before { margin-top: -2px; }
    .photo-adjust-handle.is-s::before { margin-top: -2px; }
    .photo-adjust-handle.is-e::before, .photo-adjust-handle.is-w::before { width: 0; height: 24px; margin-top: -12px; border-left-width: 4px; }
    .photo-adjust-handle.is-e::before { margin-left: -2px; }
    .photo-adjust-handle.is-w::before { margin-left: -2px; }
    .photo-adjust-img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
    .photo-adjust-zoom { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; width: min(320px, calc(100% - 64px)); margin: 6px auto 0; color: rgba(255,255,255,.7); font-size: 18px; }
    .photo-adjust-zoom input { flex: 1 1 auto; min-width: 0; accent-color: #fff; touch-action: pan-x; }
    .photo-adjust-actions { flex: 0 0 auto; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; padding: 14px 16px 16px; }
    .photo-adjust-actions button { height: 44px; border: 0; border-radius: 14px; color: #fff; background: rgba(255,255,255,.12); font-size: 15px; font-weight: 700; cursor: pointer; touch-action: manipulation; }
    .photo-adjust-actions button.is-primary { color: #111; background: #fff; }
    .interest-photo-replace:hover, .interest-photo-replace:focus-visible,
    .interest-photo-remove:hover, .interest-photo-remove:focus-visible { background: rgba(0,0,0,.5); opacity: 1; }
    .interest-add { width: 100%; height: 46px; border: 1.5px dashed var(--border-card); border-radius: 18px; color: var(--accent); background: var(--accent-soft); cursor: pointer; font-size: 14px; font-weight: 800; }
    .customize-canvas { display: grid; gap: 12px; min-height: 120px; }
    .customize-empty { padding: 28px 16px; border: 1px dashed var(--border-card); border-radius: 22px; color: var(--text-secondary); background: var(--accent-soft); font-size: 13px; line-height: 1.45; text-align: center; }
    .cblock { position: relative; overflow: hidden; border-radius: 22px; transition: min-height .28s ease; }
    .cblock.is-new { animation: blockIn .28s ease both; }
    .cblock.is-dragging { opacity: .55; }
    .cblock.cblock-drop { box-shadow: 0 0 0 2px var(--accent); }
    .cblock.tone-white { color: var(--text-primary); background: var(--bg-card); border: 1px solid var(--border-card); box-shadow: var(--shadow-card); }
    .cblock.tone-cream { color: var(--text-primary); background: var(--bg-card-muted); border: 1px solid var(--border-card); box-shadow: var(--shadow-card); }
    .cblock.tone-slate { color: #e8edf2; background: #161B22; }
    .cblock.is-active.tone-white, .cblock.is-active.tone-cream { box-shadow: 0 0 0 2px var(--accent), var(--shadow-card); }
    .cblock.is-active.tone-slate { box-shadow: 0 0 0 2px rgba(161, 161, 170, .45); }
    .cblock.layout-wide, .cblock.layout-tall { min-height: 420px; }
    .cblock-body { display: flex; flex-direction: column; padding: 0; min-height: inherit; }
    .cblock-head { padding: 16px 88px 8px 16px; }
    .cblock-stack { display: grid; align-content: start; align-items: stretch; grid-auto-rows: min-content; gap: 0; padding: 0 16px 16px; flex: 1 1 auto; min-width: 0; }
    .citem { position: relative; z-index: 0; isolation: isolate; overflow: hidden; min-width: 0; padding: 12px 0 2px; }
    .citem-media, .citem-audio { min-width: 0; }
    .citem + .citem { border-top: 1px solid var(--border-card); }
    .cblock.tone-slate .citem + .citem { border-top-color: rgba(255,255,255,.1); }
    .citem.is-new { animation: blockIn .28s ease both; }
    .citem-kicker { margin: 0 0 8px; opacity: .5; font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
    .citem-tools { position: absolute; top: 8px; right: 0; z-index: 2; display: none; gap: 2px; padding: 2px; border-radius: 10px; background: rgba(22,27,34,.82); }
    .citem:hover .citem-tools, .citem:focus-within .citem-tools { display: flex; }
    .citem-tools button { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 7px; color: #e8edf2; background: transparent; cursor: pointer; font-size: 10px; }
    .citem-tools button:hover { background: var(--accent); }
    .cblock-kicker { margin: 0 0 8px; opacity: .62; font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--text-secondary); }
    .cblock-title, .cblock-quote, .cblock-copy { margin: 0; }
    .cblock-title { font-size: 22px; font-weight: 800; letter-spacing: -.3px; }
    .cblock-copy { margin-top: 0; font-size: 14px; line-height: 1.5; }
    .cblock-quote { font-family: "Cormorant Garamond", Georgia, serif; font-size: 24px; font-style: italic; line-height: 1.25; }
    .cblock [contenteditable="true"] { border-radius: 8px; outline: none; }
    .cblock [contenteditable="true"]:focus { box-shadow: 0 0 0 2px var(--accent-soft); }
    .cblock-media { position: relative; z-index: 0; isolation: isolate; display: grid; gap: 6px; width: 100%; min-width: 0; overflow: hidden; min-height: 160px; }
    .cblock-media.hero, .cblock-media.single { grid-template-columns: 1fr; min-height: 210px; }
    .cblock-media.hero .cblock-photo, .cblock-media.single .cblock-photo { min-height: 210px; }
    .cblock-media.split, .cblock-media.duo { grid-template-columns: 1fr 1fr; }
    .cblock-media.split .cblock-photo, .cblock-media.duo .cblock-photo { min-height: 140px; }
    .cblock-media.collage, .cblock-media.trio { grid-template-columns: 1.45fr .85fr; grid-template-rows: 1fr 1fr; min-height: 200px; }
    .cblock-media.collage .cblock-photo:first-child, .cblock-media.trio .cblock-photo:first-child { grid-row: 1 / 3; min-height: 200px; }
    .cblock-media.grid { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; min-height: 220px; }
    .cblock-media.carousel { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(104px, auto); min-height: 220px; }
    .cblock-media.grid .cblock-photo, .cblock-media.carousel .cblock-photo { min-height: 104px; }
    .citem-media-wrap { position: relative; z-index: 0; isolation: isolate; overflow: hidden; min-width: 0; }
    .cblock-photo { position: relative; z-index: 0; overflow: hidden; min-height: 88px; border-radius: 16px; background-size: cover; background-position: center; }
    .cblock-photo.is-empty { display: grid; place-items: center; background: #f8fafc; box-shadow: none; border: 2px dashed #e2e8f0; }
    .cblock.tone-slate .cblock-photo.is-empty { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); box-shadow: none; }
    .cblock-photo.has-video video { width: 100%; height: 100%; min-height: inherit; object-fit: cover; display: block; }
    .cblock-photo-plus { width: 100%; height: 100%; min-height: inherit; padding: 10px 8px; border: 0; border-radius: 16px; display: grid; place-content: center; justify-items: center; gap: 6px; color: #94a3b8; background: transparent; cursor: pointer; pointer-events: auto; touch-action: manipulation; }
    .cblock-photo-plus span { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #94a3b8; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .06); font-size: 22px; font-weight: 400; line-height: 1; }
    .cblock-photo-plus small { color: #94a3b8; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
    .cblock.tone-slate .cblock-photo-plus { color: #a1a1aa; }
    .cblock.tone-slate .cblock-photo-plus span { color: #a1a1aa; background: #262626; box-shadow: 0 1px 2px rgb(0 0 0 / .4); }
    .cblock-photo-add {
      position: absolute;
      z-index: 1;
      top: 50%;
      left: 50%;
      width: 40px;
      height: 40px;
      padding: 0;
      border: 0;
      border-radius: 50%;
      color: #fff;
      background: rgba(0,0,0,.3);
      box-shadow: none;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      cursor: pointer;
      font-size: 16px;
      line-height: 1;
      opacity: .78;
      transform: translate(-50%, -50%);
      pointer-events: auto;
      transition: background-color .18s ease, opacity .18s ease;
    }
    .cblock-photo.is-empty .cblock-photo-add { display: none; }
    .cblock-photo-add:hover, .cblock-photo-add:focus-visible { background: rgba(0,0,0,.5); opacity: 1; }
    .cblock-photo-position-hint { position: absolute; z-index: 1; right: 9px; bottom: 8px; padding: 4px 7px; border-radius: 999px; color: #fff; background: rgba(0,0,0,.42); font-size: 9px; font-weight: 800; letter-spacing: .02em; opacity: 0; pointer-events: none; transition: opacity .18s ease; }
    .customize-canvas .cblock-photo:hover .cblock-photo-position-hint, .customize-canvas .cblock-photo:focus-within .cblock-photo-position-hint, .customize-canvas .cblock-photo.is-positioning .cblock-photo-position-hint { opacity: 1; }
    .customize-canvas .cblock-photo:not(.is-empty):not(.has-video) { cursor: grab; touch-action: none; }
    .customize-canvas .cblock-photo.is-positioning { cursor: grabbing; }
    .cblock-media-plus { width: 100%; height: 42px; margin-top: 8px; border: 1.5px dashed var(--border-card); border-radius: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--accent); background: var(--accent-soft); cursor: pointer; font-size: 12px; font-weight: 800; pointer-events: auto; touch-action: manipulation; }
    .cblock-media-plus span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: var(--accent-fg); background: var(--accent); font-size: 16px; font-weight: 400; line-height: 1; }
    .cblock.tone-slate .cblock-media-plus { color: #E4E4E7; border-color: rgba(228, 228, 231, .35); background: rgba(161, 161, 170, .12); }
    .cblock.tone-slate .cblock-media-plus span { color: #0f172a; background: #A1A1AA; }
    .customize-canvas .cblock-photo.is-empty, .customize-canvas .cblock-photo.has-video { cursor: pointer; }
    .cblock-tags { display: flex; flex-wrap: wrap; gap: 7px; }
    .cblock-tag { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 750; }
    .cblock.tone-slate .cblock-tag { color: #E4E4E7; background: rgba(161, 161, 170, .18); }
    .cblock-tag button { width: 16px; height: 16px; padding: 0; border: 0; border-radius: 50%; color: inherit; background: rgba(0,0,0,.08); cursor: pointer; font-size: 10px; }
    .cblock-tag-add { display: flex; gap: 6px; width: 100%; margin-top: 4px; }
    .cblock-tag-add input { min-width: 0; flex: 1; height: 34px; padding: 0 10px; border: 1px solid var(--border-card); border-radius: 11px; background: transparent; color: inherit; }
    .cblock-tag-add button { height: 34px; padding: 0 10px; border: 0; border-radius: 11px; color: var(--accent-fg); background: var(--accent); cursor: pointer; font-weight: 800; }
    .cblock-audio { display: grid; gap: 10px; }
    .cblock-wave { display: flex; align-items: flex-end; justify-content: center; gap: 3px; height: 36px; }
    .cblock-wave i { width: 3px; height: 10px; border-radius: 99px; background: var(--accent); animation: tpl-wave .7s ease-in-out infinite alternate; animation-play-state: paused; }
    .cblock.tone-slate .cblock-wave i { background: #E4E4E7; }
    .cblock-wave.playing i { animation-play-state: running; }
    .cblock-audio-row { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 10px; }
    .cblock-audio-play { width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; color: var(--accent-fg); background: var(--accent); cursor: pointer; font-size: 12px; font-weight: 850; }
    .cblock-audio-progress { height: 4px; overflow: hidden; border-radius: 99px; background: var(--accent-soft); }
    .cblock-audio-progress b { display: block; height: 100%; width: 0; background: var(--accent); }
    .cblock-audio-time { font-size: 11px; font-variant-numeric: tabular-nums; opacity: .7; }
    .cblock-audio-upload { height: 36px; border: 0; border-radius: 12px; color: var(--accent); background: var(--accent-soft); cursor: pointer; font-weight: 800; }
    .cblock.tone-slate .cblock-audio-play, .cblock.tone-slate .cblock-audio-progress b { background: #A1A1AA; }
    .cblock.tone-slate .cblock-audio-upload { color: #0F172A; background: #E4E4E7; }
    .cblock-road-title { margin: 0 0 10px; font-size: 16px; font-weight: 800; }
    .cblock-track { height: 8px; overflow: hidden; margin: 8px 0 12px; border-radius: 99px; background: var(--accent-soft); }
    .cblock-track i { display: block; height: 100%; border-radius: 99px; background: var(--accent); }
    .cblock.tone-slate .cblock-track { background: rgba(255,255,255,.12); }
    .cblock.tone-slate .cblock-track i { background: #A1A1AA; }
    .cblock-metric { display: inline-flex; padding: 6px 10px; border-radius: 999px; color: var(--accent); background: var(--accent-soft); font-size: 12px; font-weight: 850; }
    .cblock.tone-slate .cblock-metric { color: #E4E4E7; background: rgba(161, 161, 170, .18); }
    .cblock-timeline { margin-left: 6px; padding-left: 14px; border-left: 3px solid var(--accent); }
    .cblock.tone-slate .cblock-timeline { border-left-color: #A1A1AA; }
    .cblock-range { width: 100%; margin: 0 0 10px; accent-color: var(--accent); }
    .cblock-tools { position: absolute; top: 8px; right: 8px; z-index: 3; display: none; align-items: center; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(22,27,34,.88); box-shadow: 0 8px 20px rgba(0,0,0,.18); backdrop-filter: blur(10px); }
    .cblock:hover .cblock-tools, .cblock:focus-within .cblock-tools, .cblock.is-active .cblock-tools { display: flex; flex-wrap: wrap; justify-content: flex-end; max-width: calc(100% - 16px); }
    .cblock-tools button, .cblock-handle { width: 26px; height: 26px; padding: 0; border: 0; border-radius: 9px; color: #e8edf2; background: transparent; cursor: pointer; font-size: 11px; }
    .cblock-handle { display: grid; place-items: center; cursor: grab; user-select: none; }
    .cblock-handle:active { cursor: grabbing; }
    .cblock-tools button:hover { background: var(--accent); }
    .cblock-tone { width: 16px !important; height: 16px !important; margin: 5px 3px; border: 0; border-radius: 50% !important; box-shadow: 0 0 0 1px rgba(255,255,255,.35); }
    .cblock-tone.white { background: #fff; }
    .cblock-tone.cream { background: #FBF9F5; }
    .cblock-tone.slate { background: #334155; }
    .cblock-tone.active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #A1A1AA; }
    .edit-profile-sheet.customize-open .edit-profile-scroll { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
    .edit-profile-sheet.customize-open.media-picker-open .edit-profile-scroll { padding-bottom: calc(236px + env(safe-area-inset-bottom)); }
    .block-dock { position: absolute; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 50; display: none; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 4px; padding: 8px; border-radius: 22px; background: rgba(22,27,34,.94); box-shadow: 0 14px 32px rgba(22,27,34,.28); backdrop-filter: blur(16px); pointer-events: auto; }
    .block-dock:not([hidden]) { display: grid; pointer-events: auto; }
    .block-dock button { position: relative; z-index: 50; min-width: 0; padding: 8px 2px 7px; border: 0; border-radius: 16px; display: grid; justify-items: center; gap: 4px; color: #d7e3dc; background: transparent; cursor: pointer; font-size: 9px; font-weight: 800; letter-spacing: .02em; pointer-events: auto; touch-action: manipulation; }
    .block-dock button span { width: 28px; height: 28px; border-radius: 10px; display: grid; place-items: center; color: #F4F4F5; background: var(--accent); font-size: 12px; pointer-events: none; }
    .block-dock button:active { background: rgba(255,255,255,.08); }
    .block-dock button.is-open span { color: #0f172a; background: #E4E4E7; }
    .media-layout-sheet { position: absolute; left: 12px; right: 12px; bottom: calc(78px + env(safe-area-inset-bottom)); z-index: 51; padding: 12px; border-radius: 22px; background: var(--bg-card); border: 1px solid var(--border-card); box-shadow: 0 18px 40px rgba(22,27,34,.22); backdrop-filter: blur(16px); pointer-events: auto; }
    .media-layout-sheet[hidden] { display: none; }
    .media-layout-title { margin: 0 2px 10px; color: var(--text-secondary); font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
    .media-layout-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
    .media-layout-sheet button { min-width: 0; min-height: 74px; padding: 8px 4px 7px; border: 1px solid var(--border-card); border-radius: 14px; display: grid; justify-items: center; align-content: center; gap: 6px; color: var(--text-primary); background: var(--bg-page-alt); cursor: pointer; font-size: 9px; font-weight: 800; line-height: 1.2; }
    .media-layout-sheet button:active { transform: scale(.98); }
    .media-layout-sheet button.selected { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
    .media-layout-sheet [data-media-layout="carousel"] { grid-column: 1 / -1; min-height: 52px; grid-template-columns: 46px minmax(0, 1fr); justify-items: start; align-items: center; padding: 8px 12px; text-align: left; font-size: 11px; }
    .media-layout-icon { width: 42px; height: 26px; display: grid; gap: 2px; color: var(--accent); }
    .media-layout-icon i { display: block; min-width: 0; min-height: 0; border-radius: 3px; background: currentColor; }
    .media-layout-icon.single { grid-template-columns: 1fr; }
    .media-layout-icon.duo { grid-template-columns: 1fr 1fr; }
    .media-layout-icon.trio { grid-template-columns: 1.35fr .7fr; grid-template-rows: 1fr 1fr; }
    .media-layout-icon.trio i:first-child { grid-row: 1 / 3; }
    .media-layout-icon.grid { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
    .media-layout-icon.carousel { width: 46px; display: flex; align-items: stretch; }
    .media-layout-icon.carousel i:first-child { flex: 1 1 auto; }
    .media-layout-icon.carousel i + i { flex: 0 0 28%; opacity: .38; }
    @keyframes blockIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
    .tpl-preview.tpl-spotlight { display: grid; gap: 8px; padding: 0; background: transparent; box-shadow: none; }
    .tpl-preview.tpl-spotlight .profile-cover-wrap { border-radius: 20px; }
    .tpl-preview.tpl-spotlight .interest-card { margin: 0; }
    .template-gallery {
      --template-card-width: 143px;
      --template-src-width: 327px;
      margin: 0 -4px;
      padding: 16px 12px 8px;
      border-radius: 24px;
      background: var(--bg-page-alt);
    }
    .template-gallery-intro { margin: 0 4px 16px; }
    .template-gallery-intro h3 { margin: 0; color: var(--text-primary); font-size: 18px; font-weight: 800; letter-spacing: -.3px; }
    .template-gallery-intro p { margin: 6px 0 0; color: var(--text-secondary); font-size: 12px; line-height: 1.45; }
    .template-gallery-grid {
      display: grid;
      grid-template-columns: repeat(2, var(--template-card-width));
      gap: 10px;
      justify-content: start;
      align-items: start;
    }
    .template-card {
      position: relative;
      box-sizing: border-box;
      width: var(--template-card-width);
      height: auto;
      align-self: start;
      flex-shrink: 0;
      padding: 0;
      overflow: hidden;
      border: 2px solid var(--border-card);
      border-radius: 18px;
      background: var(--bg-card);
      box-shadow: var(--shadow-card);
      cursor: pointer;
      text-align: left;
      transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    }
    .template-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(23,24,28,.12); }
    .template-card.selected { border-color: var(--accent); box-shadow: 0 12px 28px rgba(228, 228, 231, .16); }
    .template-card-scale {
      display: block;
      width: var(--template-src-width);
      zoom: calc((var(--template-card-width) - 4px) / var(--template-src-width));
    }
    .template-card-badge { position: absolute; top: 10px; right: 10px; z-index: 2; max-width: calc(100% - 20px); padding: 5px 8px; overflow: hidden; border-radius: 999px; color: #065f46; background: rgba(255,255,255,.92); box-shadow: 0 4px 12px rgba(0,0,0,.08); font-size: 8px; font-weight: 800; letter-spacing: .12em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
    .template-card.is-spotlight { padding-bottom: 0; }
    .template-card-thumb { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; overflow: hidden; background-size: cover; background-position: center; }
    .template-card-thumb.spotlight-mini {
      display: flex;
      flex-direction: column;
      height: auto;
      aspect-ratio: auto;
      background: var(--bg-page-alt);
    }
    .spotlight-mini-cover {
      position: relative;
      display: block;
      width: 100%;
      aspect-ratio: 16 / 10;
      background-size: cover;
      background-position: center;
    }
    .spotlight-mini-bio {
      position: absolute;
      left: 12px;
      right: 12px;
      bottom: -16px;
      z-index: 1;
      padding: 16px 20px;
      border-radius: 16px;
      background: #fff;
      border: 1px solid #f1f5f9;
      box-shadow: 0 1px 2px rgb(0 0 0 / .05);
      color: #262626;
      font-size: 16px;
      font-weight: 600;
      letter-spacing: -.025em;
      line-height: 1.375;
      text-align: center;
    }
    .spotlight-mini-note {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin: 24px 8px 0;
      padding: 20px 16px;
      border-radius: 16px;
      background: #fff;
      border: 1px solid #f1f5f9;
      overflow: hidden;
    }
    .spotlight-mini-note:last-child { margin-bottom: 12px; }
    .spotlight-mini-note + .spotlight-mini-note { margin-top: 8px; }
    .spotlight-mini-heading {
      display: block;
      color: #171717;
      font-size: 24px;
      font-weight: 700;
      letter-spacing: -.025em;
      line-height: 1.2;
      text-align: center;
    }
    .spotlight-mini-story {
      display: block;
      color: #525252;
      font-size: 14px;
      font-weight: 400;
      letter-spacing: 0;
      line-height: 1.5rem;
      text-align: left;
    }
    .spotlight-mini-trio {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      height: 10rem;
      flex: 0 0 auto;
    }
    .spotlight-mini-trio > i,
    .spotlight-mini-trio i {
      display: block;
      min-height: 0;
      border-radius: 8px;
      background-size: cover;
      background-position: center;
    }
    .spotlight-mini-trio > i { height: 100%; }
    .spotlight-mini-trio > span {
      display: grid;
      grid-template-rows: 1fr 1fr;
      gap: 3px;
      min-height: 0;
    }
    .template-card-thumb.editorial { display: grid; place-items: center; padding: 16px 12px; background: #FBF9F5; }
    .template-card-thumb.editorial em { max-width: 100%; color: #2c2418; font-family: "Cormorant Garamond", Georgia, serif; font-size: 13px; font-style: italic; line-height: 1.2; text-align: center; }
    .template-card-thumb.cyber { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 4px; padding: 8px; background: #0F172A; }
    .template-card-thumb.cyber i { border-radius: 8px; background: #1e293b; }
    .template-card-thumb.vinyl { display: grid; place-items: center; background: #181614; }
    .template-card-thumb.vinyl b { width: 68px; height: 68px; border-radius: 50%; background: radial-gradient(circle, #d9c4a0 0 9px, #111 10px 12px, #3a3028 13px 16px, #14110f 50%); box-shadow: 0 8px 18px rgba(0,0,0,.35); }
    .template-card-thumb.gantt { display: grid; align-content: center; gap: 8px; padding: 16px 12px; background: #f6f7f9; }
    .template-card-thumb.gantt i { display: block; height: 7px; overflow: hidden; border-radius: 99px; background: #dfe4ea; }
    .template-card-thumb.gantt i em { display: block; height: 100%; border-radius: 99px; background: #18181B; }
    .template-card-thumb.asymm { background-size: cover; }
    .template-card-thumb.asymm::after { content: ""; position: absolute; left: 10px; right: 18px; bottom: 10px; height: 34px; border-radius: 12px; background: rgba(22,27,34,.78); }
    .template-card-body { display: grid; gap: 4px; padding: 14px 16px 16px; }
    .template-card-kicker { color: var(--text-secondary); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
    .template-card-name { display: block; color: var(--text-primary); font-size: 18px; font-weight: 800; letter-spacing: -.2px; }
    .template-card-quest { margin: 0; color: var(--text-secondary); font-size: 14px; line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 2; }
    @media (min-width: 360px) {
      .template-gallery-grid { grid-template-columns: repeat(2, var(--template-card-width)); gap: 10px; }
      .template-card-thumb { aspect-ratio: 16 / 10; height: auto; }
      .template-card-thumb.spotlight-mini { height: auto; aspect-ratio: auto; }
    }
    .template-preview-overlay { position: absolute; inset: 0; z-index: 0; display: flex; flex-direction: column; background: var(--bg-primary); transform: translateX(102%); visibility: hidden; pointer-events: none !important; transition: transform .28s cubic-bezier(.2,.8,.2,1), visibility .28s; }
    .template-preview-overlay.show { z-index: 60; transform: translateX(0); visibility: visible; pointer-events: auto !important; }
    .template-preview-head { position: sticky; top: 0; z-index: 50; flex: 0 0 auto; width: 100%; min-height: 48px; margin: 0; padding: 0 12px; border-bottom: 1px solid var(--border-card); display: grid; grid-template-columns: 40px minmax(0,1fr) auto; align-items: center; gap: 8px; background: var(--header-bg); backdrop-filter: blur(14px); color: var(--text-primary); }
    .template-preview-head strong { overflow: hidden; text-align: center; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
    .template-preview-use { height: 34px; padding: 0 11px; border: 0; border-radius: 12px; color: var(--accent-fg); background: var(--accent); cursor: pointer; font-size: 11px; font-weight: 800; white-space: nowrap; }
    .template-preview-stage { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
    .tpl-preview { min-height: 100%; }
    .tpl-photo { display: block; background-size: cover; background-position: center; }
    .tpl-explorer { display: flex; flex-direction: column; min-height: 100%; background: #f3f1ec; }
    .tpl-explorer-hero { position: relative; flex: 0 0 48%; min-height: 250px; }
    .tpl-explorer-badge { position: absolute; left: 18px; bottom: -16px; z-index: 2; padding: 8px 12px; border-radius: 999px; color: #18181B; background: #fff; box-shadow: 0 10px 24px rgba(33,78,58,.16); font-size: 10px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
    .tpl-explorer-body { padding: 28px 18px 24px; }
    .tpl-explorer-body small { color: #7a847c; font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
    .tpl-explorer-body h4 { margin: 6px 0 10px; font-size: 26px; letter-spacing: -.4px; }
    .tpl-explorer-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 8px; height: 148px; margin: 4px 0 14px; }
    .tpl-explorer-grid span { border-radius: 16px; }
    .tpl-explorer-notes { margin: 0 0 14px; color: #4f574f; font-size: 14px; font-style: italic; line-height: 1.5; }
    .tpl-explorer-tags { display: flex; flex-wrap: wrap; gap: 7px; }
    .tpl-explorer-tags span { padding: 7px 10px; border-radius: 999px; color: #3F3F46; background: #F4F4F5; font-size: 11px; font-weight: 750; }
    .tpl-editorial { min-height: 100%; padding: 28px 22px 32px; background: #FBF9F5; color: #241e16; }
    .tpl-editorial-kicker { margin: 0 0 18px; color: #8a7f6d; font-size: 10px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; }
    .tpl-editorial blockquote { margin: 0 0 22px; font-family: "Cormorant Garamond", Georgia, serif; font-size: 30px; font-style: italic; font-weight: 500; line-height: 1.18; }
    .tpl-editorial-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding-top: 18px; border-top: 1px solid #e7e1d4; }
    .tpl-editorial-columns small { display: block; margin-bottom: 7px; color: #8a7f6d; font-size: 9px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
    .tpl-editorial-columns p { margin: 0; color: #4a4338; font-size: 13px; line-height: 1.5; }
    .tpl-editorial-books { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
    .tpl-editorial-books span { padding-bottom: 3px; border-bottom: 1px solid #b9ae97; color: #5c5346; font-family: "Cormorant Garamond", Georgia, serif; font-size: 14px; font-style: italic; }
    .tpl-bento { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; min-height: 100%; padding: 12px; background: #0F172A; }
    .tpl-bento-cell { overflow: hidden; padding: 14px; border: 1px solid rgba(148,163,184,.16); border-radius: 20px; background: #111827; color: #e2e8f0; }
    .tpl-bento-cell small { display: block; margin-bottom: 8px; color: #64748b; font-family: "IBM Plex Mono", monospace; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
    .tpl-bento-status { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; color: #A1A1AA; font-size: 10px; font-weight: 800; }
    .tpl-bento-status i { width: 7px; height: 7px; border-radius: 50%; background: #A1A1AA; box-shadow: 0 0 0 4px rgba(161, 161, 170, .18); }
    .tpl-bento-cell p { margin: 0; font-size: 15px; font-weight: 750; line-height: 1.35; }
    .tpl-bento-code { margin: 0; color: #86efac; font-family: "IBM Plex Mono", monospace; font-size: 11px; line-height: 1.55; white-space: pre-wrap; }
    .tpl-bento-latency { margin-top: 10px; color: #94a3b8; font-family: "IBM Plex Mono", monospace; font-size: 10px; }
    .tpl-bento-photo { position: relative; padding: 0; min-height: 0; }
    .tpl-bento-chips { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; }
    .tpl-bento-chips span { padding: 6px 8px; border: 1px solid rgba(161, 161, 170, .25); border-radius: 8px; color: #E4E4E7; font-family: "IBM Plex Mono", monospace; font-size: 10px; }
    .tpl-vinyl { position: relative; min-height: 100%; padding: 22px 18px 28px; background: #181614; color: #f3e9dc; }
    .tpl-vinyl-kicker { margin: 0 0 8px; color: #b7a38c; font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
    .tpl-vinyl h4 { margin: 0 0 16px; font-size: 24px; }
    .tpl-vinyl-disc-wrap { display: grid; place-items: center; margin: 8px 0 18px; }
    .tpl-vinyl-disc { width: 176px; height: 176px; border-radius: 50%; background: radial-gradient(circle, #d9c4a0 0 16px, #1a1714 17px 20px, #3a3028 21px 26px, #111 27px 32px, #2a241f 33px 40px, #111 41px 48px, #1f1b18 49px 88px); box-shadow: 0 18px 40px rgba(0,0,0,.45); animation: tpl-spin 3.6s linear infinite; animation-play-state: paused; }
    .tpl-vinyl-disc.spinning { animation-play-state: running; }
    .tpl-vinyl-wave { display: flex; align-items: flex-end; justify-content: center; gap: 3px; height: 42px; margin-bottom: 16px; }
    .tpl-vinyl-wave span { width: 4px; height: 10px; border-radius: 99px; background: #d9b48c; animation: tpl-wave .7s ease-in-out infinite alternate; animation-play-state: paused; }
    .tpl-vinyl-wave.playing span { animation-play-state: running; }
    .tpl-vinyl-wave span:nth-child(odd) { animation-duration: .52s; }
    .tpl-vinyl-controls { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 10px; margin-bottom: 14px; }
    .tpl-vinyl-play { width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; color: #181614; background: #e8d3b4; cursor: pointer; font-size: 14px; font-weight: 850; }
    .tpl-vinyl-progress { height: 4px; overflow: hidden; border-radius: 99px; background: #3a332e; }
    .tpl-vinyl-progress i { display: block; height: 100%; width: 0; background: #e8d3b4; }
    .tpl-vinyl-time { color: #b7a38c; font-size: 11px; font-variant-numeric: tabular-nums; }
    .tpl-vinyl audio { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }
    .tpl-vinyl-upload { width: 100%; height: 40px; margin-bottom: 14px; border: 0; border-radius: 13px; color: #181614; background: #e8d3b4; cursor: pointer; font-weight: 800; }
    .tpl-vinyl-file { margin: -6px 0 14px; color: #b7a38c; font-size: 11px; }
    .tpl-vinyl-gear { display: flex; flex-wrap: wrap; gap: 7px; }
    .tpl-vinyl-gear span { padding: 7px 10px; border: 1px solid #3a332e; border-radius: 999px; color: #e8d3b4; font-size: 11px; }
    .tpl-gantt { min-height: 100%; padding: 18px 16px 26px; background: #f5f6f8; color: #1f2933; }
    .tpl-gantt-kicker { margin: 0 0 8px; color: #7b8794; font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
    .tpl-gantt-sprint { margin-bottom: 16px; padding: 16px; border: 1px solid #e6e9ee; border-radius: 18px; background: #fff; box-shadow: 0 8px 20px rgba(31,41,51,.04); }
    .tpl-gantt-sprint small { color: #7b8794; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
    .tpl-gantt-sprint strong { display: block; margin-top: 4px; font-size: 18px; }
    .tpl-gantt-row { margin-bottom: 12px; padding: 13px 14px; border: 1px solid #e6e9ee; border-radius: 16px; background: #fff; }
    .tpl-gantt-row small, .tpl-gantt-row b { display: block; }
    .tpl-gantt-row small { color: #7b8794; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
    .tpl-gantt-row b { margin: 4px 0 8px; font-size: 13px; }
    .tpl-gantt-track { height: 8px; overflow: hidden; border-radius: 99px; background: #e8ecf1; }
    .tpl-gantt-track i { display: block; height: 100%; border-radius: 99px; background: #18181B; }
    .tpl-gantt-track.flight i { background: #d97706; }
    .tpl-gantt-track.upcoming i { background: #cbd5e1; }
    .tpl-gantt-metric { display: flex; align-items: baseline; justify-content: space-between; margin-top: 8px; padding: 16px; border-radius: 16px; background: #ecf8f2; }
    .tpl-gantt-metric strong { color: #18181B; font-size: 22px; }
    .tpl-gantt-metric span { color: #4b6357; font-size: 12px; }
    .tpl-asymm { position: relative; min-height: 100%; background: #0d1117; }
    .tpl-asymm-hero { height: 58%; min-height: 280px; }
    .tpl-asymm-card { position: relative; z-index: 2; margin: -78px 16px 20px; padding: 18px; border: 1px solid rgba(255,255,255,.12); border-radius: 24px; color: #e8edf2; background: rgba(22,27,34,.78); box-shadow: 0 18px 40px rgba(0,0,0,.28); backdrop-filter: blur(18px); }
    .tpl-asymm-card small { color: #9aa8b5; font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
    .tpl-asymm-card h4 { margin: 8px 0 10px; font-size: 22px; }
    .tpl-asymm-card p { margin: 0 0 16px; color: #c5d0da; font-size: 14px; line-height: 1.45; }
    .tpl-asymm-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .tpl-asymm-tiles span { padding: 12px 10px; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background: rgba(13,17,23,.55); }
    .tpl-asymm-tiles strong, .tpl-asymm-tiles small { display: block; }
    .tpl-asymm-tiles small { margin-top: 4px; color: #93a4b3; font-size: 10px; font-weight: 650; letter-spacing: 0; text-transform: none; }
    @keyframes tpl-spin { to { transform: rotate(360deg); } }
    @keyframes tpl-wave { from { height: 8px; } to { height: 36px; } }
    .edit-public-card { margin-bottom: 13px; padding: 18px; border-radius: 21px; background: var(--bg-card); border: 1px solid var(--border-card); box-shadow: var(--shadow-card); }
    .edit-public-card h3 { margin: 0 0 10px; color: var(--text-primary); font-size: 15px; }
    .edit-public-card textarea { width: 100%; min-height: 108px; height: auto; padding: 0; border: 0; outline: 0; resize: none; color: var(--text-secondary); background: transparent; font-size: 14px; line-height: 1.55; white-space: pre-wrap; }
    .edit-panel-placeholder { margin: 0; color: var(--text-secondary); }

    /* Edit profile from the Me page (phone): your details, then "Spotlight" and its parts (cover, bio,
       cards, interests) on the same page; Save is at the top right and saves all of it. */
    .edit-spotlight-head { display: none; }
    html:not(.is-desktop-board) .edit-profile-modal.is-personal-only .edit-spotlight-head {
      display: grid;
      gap: 3px;
      margin: 22px 6px 12px;
    }
    .edit-spotlight-head strong { color: #20211f; font-size: 19px; font-weight: 700; }
    .edit-spotlight-head small { color: #6b7280; font-size: 13.5px; }
    html:not(.is-desktop-board) .edit-profile-modal.is-personal-only .edit-profile-sheet { background: #f2f3f5; }
    html:not(.is-desktop-board) .edit-profile-modal.is-personal-only .edit-profile-personal-save-bottom { display: none; }
    .edit-profile-personal-save-top {
      justify-self: end;
      min-width: 44px;
      min-height: 44px;
      padding: 0 8px;
      border: 0;
      background: transparent;
      color: var(--text-primary, #20211f);
      font: inherit;
      font-size: 16px;
      font-weight: 750;
      cursor: pointer;
    }
    .edit-profile-personal-save-top:disabled { opacity: .5; cursor: default; }
    /* A card's photos while editing: the shared tiles, kept inside the card (the row slides). */
    .interest-media-tiles { min-width: 0; max-width: 100%; margin: 4px 0 12px; overflow: hidden; }
    .interest-media-tiles .pk-tiles { --pk-bleed: 0px; max-width: 100%; }
    .interest-card:has(.interest-media-tiles) { min-width: 0; max-width: 100%; box-sizing: border-box; }
    /* The Spotlight heading. */
    html:not(.is-desktop-board) .edit-profile-modal.is-personal-only .edit-spotlight-head { grid-template-columns: 1fr auto; align-items: end; }
    .edit-spotlight-head > span { display: grid; gap: 3px; }
    /* A card's title while editing: a calm text box like the bio above it (left, normal size), with
       room for the ✕ in the corner. */
    .edit-profile-modal .interest-card .interest-heading-input {
      display: block;
      width: calc(100% - 40px);
      min-height: 48px;
      margin: 0 0 12px;
      padding: 12px 14px;
      border: 1px solid #e6e7ea;
      border-radius: 14px;
      background: #fafafa;
      color: #20211f;
      font-size: 17px;
      font-weight: 600;
      letter-spacing: 0;
      line-height: 1.35;
      text-align: left;
    }
    .edit-profile-modal .interest-card .interest-heading-input::placeholder { color: #9ca3af; font-weight: 500; }
    .edit-profile-modal .interest-card .interest-heading-input:focus { border-color: #20211f; box-shadow: 0 0 0 3px rgba(24, 24, 27, .08); border-radius: 14px; }
    /* Long words or links (no spaces) wrap inside cards and the bio, so the page never gets wider
       than the screen (on your page, in Preview and while editing). */
    .interest-story, .interest-story-input, .profile-bio-text, .profile-bio-input, .interest-card .interest-tag {
      overflow-wrap: anywhere;
      word-break: break-word;
    }
    .interest-card, .profile-bio-card, [data-profile-page] { min-width: 0; max-width: 100%; }
    /* Interests under Signature (one set for you); cards no longer have their own tags. */
    .edit-interest-chips { display: flex; flex-wrap: wrap; gap: 8px; }
    .edit-interest-chips .interest-tag { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 8px 0 12px; border-radius: 17px; background: #f2f3f5; font-size: 14px; font-weight: 600; }
    .edit-interest-chips .interest-tag-remove { width: 22px; height: 22px; border: 0; border-radius: 50%; background: none; color: #9a9da3; font-size: 11px; cursor: pointer; }
    .edit-interest-add { height: 34px; padding: 0 14px; border: 1.5px dashed #cfd2d6; border-radius: 17px; background: #fff; color: #6b7280; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
    .edit-profile-modal:not(.is-personal-only) .edit-profile-field-interests { display: none; }
    .edit-profile-modal .interest-card .interest-tags.is-edit { display: none; }

    /* + Add to Spotlight under the last card, and its sheet (New card, or one of your Circle posts). */
    .spotlight-add-big { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 76px; margin: 4px 0 16px; padding: 14px 18px; border: 1.5px dashed #cfd2d6; border-radius: 20px; background: #fff; color: #20211f; font: inherit; text-align: left; cursor: pointer; box-sizing: border-box; }
    .spotlight-add-big > span:last-child, .spotlight-add-choice > span:last-child { display: grid; gap: 2px; }
    .spotlight-add-big strong, .spotlight-add-choice strong { font-size: 16.5px; font-weight: 650; }
    .spotlight-add-big small, .spotlight-add-choice small { color: #6b7280; font-size: 13.5px; }
    .spotlight-add-plus { flex: none; width: 44px; height: 44px; border-radius: 50%; background: #1a1b1d; color: #fff; display: grid; place-items: center; font-size: 26px; font-weight: 400; line-height: 1; }
    .spotlight-add-sheet { position: fixed; inset: 0; z-index: 70; }
    .spotlight-add-scrim { position: absolute; inset: 0; border: 0; background: rgb(16 24 40 / .35); opacity: 0; transition: opacity .2s; }
    .spotlight-add-panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 80%; overflow-y: auto; padding: 8px 16px calc(20px + env(safe-area-inset-bottom, 0px)); border-radius: 22px 22px 0 0; background: #f2f3f5; transform: translateY(30px); opacity: 0; transition: transform .25s ease, opacity .2s; box-sizing: border-box; }
    .spotlight-add-sheet.show .spotlight-add-scrim { opacity: 1; }
    .spotlight-add-sheet.show .spotlight-add-panel { transform: none; opacity: 1; }
    .spotlight-add-grabber { display: block; width: 38px; height: 5px; margin: 0 auto 12px; border-radius: 3px; background: #d4d6da; }
    .spotlight-add-choice { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border: 0; border-radius: 18px; background: #fff; color: #20211f; font: inherit; text-align: left; cursor: pointer; }
    .spotlight-add-label { margin: 18px 4px 8px; color: #6b7280; font-size: 13px; font-weight: 650; }
    .spotlight-add-posts { border-radius: 18px; background: #fff; overflow: hidden; }
    .spotlight-add-post { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px; border: 0; background: none; color: #20211f; font: inherit; text-align: left; cursor: pointer; }
    .spotlight-add-post + .spotlight-add-post::before { content: ""; position: absolute; top: 0; left: 78px; right: 0; height: 1px; background: #efefeb; }
    .spotlight-add-post img, .spotlight-add-post-blank { flex: none; width: 52px; height: 52px; border-radius: 10px; object-fit: cover; background: #ecebe6; }
    .spotlight-add-post > span:last-child { display: grid; gap: 2px; min-width: 0; }
    .spotlight-add-post strong { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .spotlight-add-post small { color: #6b7280; font-size: 13px; }
    .spotlight-add-post.is-busy { opacity: .5; }
    .spotlight-add-empty { margin: 0; padding: 16px; border-radius: 18px; background: #fff; color: #6b7280; font-size: 14.5px; }
    /* Making a Spotlight card on the New post page: Edit profile waits behind it (hidden), and the
       post-only settings (who can see, saving, reactions) are not shown. */
    .edit-profile-modal.show.is-behind-composer { visibility: hidden; pointer-events: none; }
    .circle-compose-sheet.is-spotlight-compose .circle-compose-settings { display: none; }
    /* A card made from a Circle post: shown the way Circle shows it, with Edit photos & layout. */
    .interest-format { margin: 2px 0 12px; }
    .interest-format .circle-media-carousel { margin: 0 -2px; }
    .interest-format-edit { display: block; width: 100%; height: 44px; margin-top: 10px; border: 0; border-radius: 12px; background: #f2f3f5; color: #20211f; font: inherit; font-size: 15px; font-weight: 650; cursor: pointer; }
    /* The card's title (typed on the post page) shows above its photos; nothing when there is none. */
    /* A card's title: centered, the size of the bio text, a little space before the photos. */
    .interest-card .interest-heading { margin: 0 0 14px; padding: 0 30px; font-size: 16px; font-weight: 650; letter-spacing: -.01em; line-height: 1.35; text-align: center; }
    .interest-format-start { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 120px; margin: 4px 0 12px; border: 1.5px dashed #cfd2d6; border-radius: 16px; background: #fafafa; color: #4b5563; font: inherit; font-size: 15.5px; font-weight: 650; cursor: pointer; }
    .interest-format-start span { font-size: 22px; font-weight: 400; }
    /* The post page making a Spotlight card: an optional title on top (the same box as the words),
       then the photos, then the words under them, like the card itself. */
    .circle-compose-sheet.is-spotlight-compose .circle-compose-preview-post { display: flex; flex-direction: column; }
    .circle-compose-sheet.is-spotlight-compose .circle-compose-preview-post > .circle-compose-input-wrap { order: 4; margin-top: 14px; }
    .circle-compose-sheet.is-spotlight-compose .circle-compose-preview-post > .circle-private-actions { order: 6; }
    .spotlight-compose-title { display: block; width: 100%; box-sizing: border-box; margin: 0 0 12px; padding: 12px 14px; border: 1px solid #e6e7ea; border-radius: 14px; background: #fff; color: #20211f; font: inherit; font-size: 17px; font-weight: 600; outline: none; }
    .spotlight-compose-title::placeholder { color: #9ca3af; font-weight: 500; }
    .spotlight-compose-title:focus { border-color: #20211f; }
    /* Edit profile's top bar: Cancel · Edit profile · Save. */
    .edit-profile-head-actions { justify-self: end; display: flex; align-items: center; gap: 2px; }
    .edit-profile-modal.is-personal-only .edit-profile-personal-head { grid-template-columns: 1fr auto 1fr; }
    /* The title stays in the middle however wide Save is. */
    .edit-profile-modal.is-personal-only .edit-profile-personal-head { position: relative; grid-template-columns: auto 1fr auto; }
    .edit-profile-modal.is-personal-only .edit-profile-personal-head-title { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); line-height: 44px; pointer-events: none; }

    /* The interests sheet: a calm header (Cancel · Interests · Done), how many are chosen, a real
       search field, what you chose on top, then each group as a white card of left-aligned chips. */
    .interest-tag-sheet-panel { background: #f2f3f5; padding-left: 16px; padding-right: 16px; }
    .interest-tag-sheet-head { grid-template-columns: 76px 1fr 76px; margin-bottom: 2px; }
    .interest-tag-sheet-head strong { font-size: 17px; font-weight: 650; color: #20211f; }
    .interest-tag-sheet-head button { min-height: 44px; padding: 0; border-radius: 0; background: transparent; font-size: 16px; font-weight: 500; }
    #interestTagSheetClose { justify-self: start; color: #6b7280; }
    #interestTagSheetDone { justify-self: end; color: #20211f; background: transparent; font-weight: 750; }
    .interest-tag-sheet-count { margin: 0 0 12px; color: #8a8b84; font-size: 13px; }
    .interest-tag-sheet-search { display: flex; align-items: center; gap: 8px; height: 44px; margin-bottom: 14px; padding: 0 14px; border: 0; border-radius: 14px; background: #fff; color: #9a9b94; box-shadow: none; }
    .interest-tag-sheet-search input { color: #20211f; }
    .interest-tag-group { margin: 0 0 12px; padding: 14px 14px 12px; border: 0; border-radius: 18px; background: #fff; box-shadow: none; text-align: left; }
    .interest-tag-group-name, .interest-tag-group h4 { margin: 0 0 10px; color: #6b7280; font-size: 13px; font-weight: 650; letter-spacing: 0; text-align: left; }
    .interest-tag-choices { justify-content: flex-start; gap: 8px; }
    .interest-tag-choices button { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 13px; border: 0; border-radius: 18px; background: #f2f3f5; color: #20211f; font: inherit; font-size: 14.5px; font-weight: 600; box-shadow: none; cursor: pointer; }
    .interest-tag-choices button.is-on { background: #1a1b1d; color: #fff; }
    .interest-tag-choices .interest-tag-x { margin-left: 2px; font-size: 11px; opacity: .7; }
    .interest-tag-group.is-chosen { background: #fff; }
    /* Interests as a full page like Edit profile: Cancel · Interests · Done on top, what you chose,
       then the search box, then the groups. It slides in from the right. */
    .interest-tag-sheet-panel { top: 0; height: auto; padding: 0 16px calc(16px + env(safe-area-inset-bottom, 0px)); border-radius: 0; box-shadow: none; transform: translateX(100%); transition: transform .32s cubic-bezier(.16, 1, .3, 1); }
    .interest-tag-sheet.show .interest-tag-sheet-panel { transform: none; }
    .interest-tag-sheet-grabber { display: none; }
    .interest-tag-sheet-head { margin: 0 -16px 0; padding: env(safe-area-inset-top, 0px) 16px 0; height: calc(env(safe-area-inset-top, 0px) + 52px); box-sizing: border-box; border-bottom: 1px solid #e6e7ea; background: #f2f3f5; }
    .interest-tag-sheet-count { margin: 10px 0 10px; }
    .interest-tag-sheet-chosen:empty { display: none; }
    .interest-tag-sheet-chosen .interest-tag-group { margin-bottom: 12px; }
    /* Chosen chips: a soft tint, not black. Search: a filled gray field like the Chats search. */
    #interestTagSheetChosen .interest-tag-choices button.is-on { background: #e8eefc; color: #1e3a8a; box-shadow: inset 0 0 0 1px #c9d6f7; }
    #interestTagSheetChosen .interest-tag-x { opacity: .55; }
    .interest-tag-sheet-search { height: 40px; margin-bottom: 14px; padding: 0 12px; border: 0; border-radius: 12px; background: #e6e7ea; color: #8a8b84; box-shadow: none; }
    .interest-tag-sheet-search input { height: 100%; padding: 0; border: 0; background: transparent; font-size: 16px; -webkit-appearance: none; appearance: none; }
    .interest-tag-sheet-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
    .interest-tag-sheet-search input::placeholder { color: #8a8b84; }
    /* Typed an interest that isn't on the list: + Add "…" on top of the results. */
    .interest-tag-add-own { display: flex; align-items: center; gap: 8px; width: 100%; height: 48px; margin: 0 0 12px; padding: 0 16px; border: 1.5px dashed #c9d6f7; border-radius: 16px; background: #fff; color: #1e3a8a; font: inherit; font-size: 15.5px; font-weight: 650; text-align: left; cursor: pointer; }
    .interest-tag-add-own span { font-size: 20px; font-weight: 400; }

/* How much fits (js/core/text-limit.js): a small count in the last 10, red at the limit; words saved
   longer before the limits show a red edge until shortened. */
.text-limit-count { display: block; margin: 4px 4px 0; color: #9a9da3; font-size: 12px; font-weight: 600; text-align: right; }
.text-limit-count[hidden] { display: none; }
.text-limit-count.is-full { color: #c2272d; }
.is-over-limit, .is-over-limit:focus { border-color: #e5a3a6 !important; box-shadow: 0 0 0 1px #e5a3a6 !important; }
#circleCharacterCount.is-over { color: #c2272d; }
.spotlight-compose-title + .text-limit-count { margin: -6px 18px 8px; }
/* 6 cards: + Add to Spotlight turns gray. */
.spotlight-add-big.is-full { opacity: .55; }
.spotlight-add-big.is-full .spotlight-add-plus { background: #d8d9dc; }
/* A card's words can run to 300: the count goes under them instead of over the last line. */
.is-spotlight-compose .circle-character-count { position: static; display: block; margin-top: 8px; font-size: 12px; text-align: right; }
.is-spotlight-compose #circleShareInput { max-height: none; }

    /* Phone Edit profile: one row per field (Name › Marking Abdu), and a page to edit each
       (photo-edit.js). The form's boxes stay, hidden, for the Save at the top. */
    .edit-profile-rows,
    .edit-field-page { display: none; }
    html:not(.is-desktop-board) .edit-profile-modal.is-personal-only .edit-profile-fields-form { display: none; }
    html:not(.is-desktop-board) .edit-profile-modal.is-personal-only .edit-profile-rows {
      display: block;
      overflow: hidden;
      border-radius: 20px;
      background: #fff;
      box-shadow: 0 1px 0 rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06);
    }
    .edit-row {
      width: 100%;
      min-height: 54px;
      padding: 0 14px 0 16px;
      border: 0;
      display: flex;
      align-items: center;
      gap: 12px;
      background: none;
      color: #171717;
      font: inherit;
      text-align: left;
      cursor: pointer;
    }
    .edit-row + .edit-row { box-shadow: inset 16px 1px 0 -15px #fff, inset 0 1px #ececec; }
    .edit-row:active { background: #f6f6f4; }
    .edit-row.is-photo { min-height: 68px; }
    .edit-row-key { flex: none; font-size: 16px; font-weight: 500; }
    .edit-row-value { flex: 1; min-width: 0; overflow: hidden; color: #8a8a8e; font-size: 15.5px; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
    .edit-row-value.is-empty { color: #b8b8bc; }
    .edit-row-chev { flex: none; width: 14px; height: 14px; color: #c4c4c7; }
    .edit-row-face { width: 44px; height: 44px; margin-left: auto; border-radius: 12px; display: grid; place-items: center; background: #e2e8f0 center / cover no-repeat; color: #475569; font-size: 17px; font-weight: 700; }
    .edit-row-emojis { flex: 1; min-width: 0; display: flex; justify-content: flex-end; align-items: center; gap: 4px; overflow: hidden; }
    .edit-row-emoji { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #f2f2f0; font-size: 15px; }
    .edit-row-more { flex: none; padding: 3px 8px; border-radius: 99px; background: #f2f2f0; color: #6c6d67; font-size: 12.5px; }

    html:not(.is-desktop-board) .edit-profile-modal.is-personal-only .edit-field-page {
      position: absolute;
      inset: 0;
      z-index: 60;
      display: flex;
      flex-direction: column;
      background: var(--bg-primary, #F2F4F7);
      transform: translateX(100%);
      transition: transform .3s cubic-bezier(.2, .8, .2, 1);
    }
    html:not(.is-desktop-board) .edit-profile-modal.is-personal-only .edit-field-page.open { transform: none; }
    .edit-field-page.is-instant { transition: none !important; }
    @media (prefers-reduced-motion: reduce) { .edit-field-page { transition: none !important; } }
    .edit-field-head {
      flex: none;
      display: grid;
      grid-template-columns: 72px 1fr 72px;
      align-items: center;
      padding: max(8px, env(safe-area-inset-top, 0px)) 12px 8px;
    }
    .edit-field-back { justify-self: start; width: 44px; height: 44px; padding: 0; border: 0; display: grid; place-items: center; background: none; color: var(--text-primary, #171717); cursor: pointer; }
    .edit-field-title { justify-self: center; color: var(--text-primary, #171717); font-size: 16px; font-weight: 750; }
    .edit-field-save { justify-self: end; min-height: 44px; padding: 0 8px; border: 0; background: none; color: var(--text-primary, #171717); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
    .edit-field-save:disabled { opacity: .3; cursor: default; }
    .edit-field-body { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 16px 24px; }
    .edit-field-box { padding: 4px 14px; border-radius: 14px; background: #fff; }
    .edit-field-box input,
    .edit-field-box textarea { display: block; width: 100%; padding: 12px 0; border: 0; outline: 0; background: none; color: #171717; font: inherit; font-size: 17px; line-height: 1.4; resize: none; }
    .edit-field-box textarea { min-height: 110px; }
    .edit-field-foot { margin: 8px 4px 0; display: flex; justify-content: space-between; gap: 12px; color: #8a8a8e; font-size: 13px; }
    .edit-field-foot b { flex: none; font-weight: 500; }
    .edit-field-foot b.is-near { color: #d97706; }
    .edit-field-foot b.is-over { color: #dc2626; }
    .edit-field-chips { padding: 12px; border-radius: 14px; background: #fff; }
    .edit-field-chips .edit-interest-chips { display: flex; flex-wrap: wrap; gap: 8px; }
    html[data-profile-theme="dark"] .edit-profile-modal.is-personal-only .edit-profile-rows,
    html[data-profile-theme="dark"] .edit-field-box,
    html[data-profile-theme="dark"] .edit-field-chips { background: #171a20; }
    html[data-profile-theme="dark"] .edit-row,
    html[data-profile-theme="dark"] .edit-field-box input,
    html[data-profile-theme="dark"] .edit-field-box textarea { color: #f2f3f5; }
    html[data-profile-theme="dark"] .edit-row + .edit-row { box-shadow: inset 0 1px #2a2e36; }

    /* Phone Edit profile: your Spotlight read-only under the rows (tap it to edit), and the
       Spotlight page (the editor alone, with a ‹ Spotlight Save bar). */
    .edit-spotlight-view,
    .edit-spotlight-bar { display: none; }
    html:not(.is-desktop-board) .edit-profile-modal.is-personal-only:not(.is-spotlight-page) .edit-spotlight-view {
      display: block;
      margin: 22px 0 0;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    .edit-spotlight-view-label { margin: 0 4px 8px; display: flex; justify-content: space-between; color: #6c6d72; font-size: 13px; }
    .edit-spotlight-view-label b { color: #198cff; font-weight: 600; }
    /* Taps reach the copy (to tell which card) but its own buttons and links never act. */
    .edit-spotlight-view-page :is(a, button, input, textarea) { pointer-events: none; }
    .edit-spotlight-view:active .edit-spotlight-view-page { opacity: .85; }
    html:not(.is-desktop-board) .edit-profile-modal.is-personal-only:not(.is-spotlight-page) .edit-spotlight-head,
    html:not(.is-desktop-board) .edit-profile-modal.is-personal-only:not(.is-spotlight-page) .edit-context-panel { display: none !important; }
    html:not(.is-desktop-board) .edit-profile-modal.is-personal-only.is-spotlight-page .edit-me-card,
    html:not(.is-desktop-board) .edit-profile-modal.is-personal-only.is-spotlight-page .edit-spotlight-head,
    html:not(.is-desktop-board) .edit-profile-modal.is-personal-only.is-spotlight-page .edit-profile-personal-head { display: none !important; }
    html:not(.is-desktop-board) .edit-profile-modal.is-personal-only.is-spotlight-page .edit-spotlight-bar {
      flex: 0 0 auto;
      display: grid;
      grid-template-columns: 72px 1fr 72px;
      align-items: center;
      padding: max(8px, env(safe-area-inset-top, 0px)) 12px 8px;
      border-bottom: 1px solid var(--border-card, #ececec);
      background: var(--bg-primary, #F2F4F7);
    }
    html:not(.is-desktop-board) .edit-profile-modal.is-personal-only.is-spotlight-page .edit-profile-scroll {
      animation: edit-spotlight-in .3s cubic-bezier(.2, .8, .2, 1);
    }
    @keyframes edit-spotlight-in { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
    @media (prefers-reduced-motion: reduce) {
      html:not(.is-desktop-board) .edit-profile-modal.is-personal-only.is-spotlight-page .edit-profile-scroll { animation: none; }
    }