:root {
  color-scheme: light;
  --bg: #fcf8f6; --surface: #fffdfbf2; --surface-solid: #fffdfb; --ink: #462634; --muted: #735c67;
  --border: #e8dcdE; --soft: #f6eaf0; --soft-alt: #f3eaf6; --primary: #702f53; --primary-ink: #fff8fb;
  --accent: #97476f; --rose: #f2d5de; --lavender: #eee0f1; --danger: #a33055;
  --hero-center: #fff7f0; --hero-edge: #eddad6; --start: #f7e8e8;
  --orb-inner: #fff5f3; --orb-outer: #eccee3; --orb-glow: #ffffff; --orb-shadow: #9d537747;
  --shadow: 0 16px 50px #6b354c0d; --radius: 26px; --radius-sm: 14px;
  --max: 1232px; --gutter: clamp(18px, 4vw, 64px);
}
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1a1420; --surface: #2c2230ed; --surface-solid: #2c2230; --ink: #f7e6e7; --muted: #c7b0c3;
  --border: #4c3a50; --soft: #392637; --soft-alt: #392b49; --primary: #e8abd1; --primary-ink: #381c30;
  --accent: #eba8ce; --rose: #553348; --lavender: #4c385d; --danger: #f1a3b2;
  --hero-center: #35273a; --hero-edge: #221a2b; --start: #2c1f32;
  --orb-inner: #392738; --orb-outer: #694661; --orb-glow: #ffccde; --orb-shadow: #0d0813b0;
  --shadow: 0 16px 50px #0a070e40;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.58 "Manrope", "Segoe UI", system-ui, sans-serif; transition: background-color .32s, color .32s; }
h1,h2,h3,p { margin: 0; }
h1,h2,h3 { font-weight: 560; line-height: 1.12; letter-spacing: -.04em; }
p + p { margin-top: .7em; }
a { color: inherit; text-decoration: none; }
button,input,select,textarea { font: inherit; color: inherit; }
button,summary { cursor: pointer; }
button:disabled { cursor: wait; opacity: .65; }
button, a { -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; }
svg { flex: none; vertical-align: middle; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
main:focus { outline: none; }
section[id] { scroll-margin-top: 22px; }
.container { width: min(var(--max), calc(100% - var(--gutter)*2)); margin-inline: auto; }
.muted { color: var(--muted); }
.sr-only,.skip-link:not(:focus) { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link:focus { position: fixed; z-index: 30; top: 8px; left: 8px; background: var(--surface-solid); padding: 10px; }
.brand { display: inline-flex; align-items: center; gap: .43em; font-weight: 580; font-size: 1.55rem; line-height: 1; letter-spacing: -.075em; white-space: nowrap; }
.brand img { width: 1.6em; height: auto; }
.brand-link { display: inline-flex; align-items: center; }
.site-header,.app-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 78px; }
.site-header nav { display: flex; align-items: center; gap: clamp(16px,3.4vw,52px); font-size: .91rem; color: var(--muted); }
.site-header nav a:hover,.footer nav a:hover { color: var(--accent); }
.head-actions { display: flex; gap: 10px; align-items: center; }
.head-actions [data-action="mobile-menu"] { display: none; }
.button,.icon-button { display: inline-flex; justify-content: center; align-items: center; gap: 9px; min-height: 44px; border: 1px solid var(--border); border-radius: 100px; background: var(--surface-solid); color: var(--ink); font-weight: 560; font-size: .93rem; padding: 8px 17px; line-height: 1.3; transition: background .2s, border-color .2s, transform .2s; }
.button:hover,.icon-button:hover { background: var(--soft); border-color: var(--accent); }
.button:active,.icon-button:active { transform: translateY(1px); }
.icon-button { width: 44px; height: 44px; padding: 0; flex: 0 0 44px; }
.button.primary { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.button.primary:hover { filter: brightness(1.08); }
.button.soft,.button.selected { background: var(--soft); }
.button.danger { color: var(--danger); }
.button.header-login { padding-inline: 19px; }
.eyebrow { display: flex; align-items: center; gap: 9px; color: var(--accent); font-size: .71rem; font-weight: 650; letter-spacing: .15em; text-transform: uppercase; }
.eyebrow i { width: 6px; height: 6px; display: inline-block; border-radius: 100%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent); }
.intro {
  --intro-run: clamp(440px, 100svh, 920px);
  --intro-portrait: radial-gradient(ellipse at 50% 43%, var(--hero-center), var(--hero-edge));
  position: relative;
}
.intro-stage { position: relative; }
.intro-portraits, .intro-action { position: relative; min-height: 100svh; overflow: clip; isolation: isolate; }
.intro-portraits { background: var(--intro-portrait); }
.intro-portrait { position: absolute; inset-block: 0; width: 54%; }
.intro-portrait.left { left: 0; mask-image: linear-gradient(90deg, #000 0 81%, transparent 100%); }
.intro-portrait.right { right: 0; mask-image: linear-gradient(270deg, #000 0 81%, transparent 100%); }
.intro-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.left .intro-image { object-position: 56% 38%; }
.right .intro-image { object-position: 48% 38%; }
.dark-shot { opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s .3s; }
[data-theme="dark"] .dark-shot { opacity: 1; visibility: visible; transition-delay: 0s; }
[data-theme="dark"] .light-shot { visibility: hidden; transition: visibility 0s .3s; }
.intro-action { display: grid; place-items: center; }
.intro-vortex {
  position: absolute; inset: 0; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: center; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 49%, var(--orb-outer), var(--start) 66%, var(--hero-edge));
}
.intro-glass {
  position: relative;
  width: 100%;
  height: 100%;
  mask-image: radial-gradient(ellipse 20% 35% at 50% 50%, transparent 75%, #000 100%);
}
.orb {
  width: clamp(13rem, 25vw, 20rem);
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  padding: 18px;
  border-radius: 50%;
  border: 1px solid var(--orb-glow);
  background: radial-gradient(ellipse at 39% 32%, var(--orb-inner) 17%,
    color-mix(in srgb, var(--orb-inner) 84%, var(--orb-outer)) 63%, var(--orb-outer));
  box-shadow: inset 0 3px 15px color-mix(in srgb, var(--orb-glow) 59%, transparent),
    inset 0 -8px 23px var(--orb-outer), 0 12px 53px var(--orb-shadow);
  color: var(--ink);
  font: italic clamp(1.65rem, 2.75vw, 2.5rem)/1.02 Georgia, serif;
  text-align: center;
  transition: box-shadow .22s, background-color .3s, color .3s;
}
.orb:hover, .orb:focus-visible {
  box-shadow: inset 0 3px 22px var(--orb-glow),
    inset 0 -10px 26px var(--orb-outer), 0 14px 66px var(--orb-shadow);
}
.intro[data-animated] { min-height: calc(100svh + var(--intro-run)); background: var(--intro-portrait); }
.intro[data-animated] .intro-stage { position: sticky; top: 0; height: 100svh; }
.intro[data-animated] .intro-action { position: absolute; inset: 0; pointer-events: none; }
.intro[data-animated] .orb { pointer-events: none; }
.intro[data-animated][data-ready] .orb, .intro[data-animated] .orb:focus-visible { pointer-events: auto; }
.intro[data-animated] .orb:focus-visible { opacity: 1 !important; transform: none !important; }
.landing > .site-header { border-bottom: 1px solid var(--border); }
.section { padding-block: clamp(60px,8vw,114px); }
.section h2 { font-size: clamp(2.1rem,4.2vw,4rem); max-width: 14em; margin: 12px 0 24px; }
.steps-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; }
.step-card,.panel,.empty { padding: clamp(18px,3vw,35px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.step-top { display: flex; justify-content: space-between; align-items: center; font-size: .7rem; letter-spacing: .1em; color: var(--muted); margin-bottom: 25px; }
.symbol { display: inline-grid; place-items: center; width: 47px; height: 47px; border: 1px solid var(--border); background: linear-gradient(145deg,var(--soft),var(--soft-alt)); color: var(--accent); border-radius: 16px; }
.step-card h3 { font-size: 1.4rem; margin-bottom: 10px; }
.step-card p,.feature p,.safety p { color: var(--muted); }
.feature { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(22px,6vw,92px); padding-block: clamp(38px,5vw,72px); border-top: 1px solid var(--border); }
.chat-demo { display: grid; gap: 19px; padding: clamp(23px,4vw,42px); background: linear-gradient(145deg,var(--soft),var(--soft-alt)); border-radius: var(--radius); border: 1px solid var(--border); }
.example-message,.example-ai { background: var(--surface-solid); border-radius: 18px; padding: 14px 17px; }
.example-message { border-bottom-left-radius: 3px; max-width: 85%; }
.example-ai { display: flex; align-items: flex-start; gap: 12px; border-bottom-right-radius: 4px; }
.example-ai .symbol { width: 35px; height: 35px; border-radius: 12px; flex: none; }
.example-ai p { font-size: .92rem; margin-top: 5px; }
.safety { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 20px; margin-block: 36px 72px; padding: clamp(23px,5vw,58px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.safety h2 { margin-bottom: 15px; }
.safety p { max-width: 63ch; }
.safety details { margin-block: 15px; }
.text-link,.text-links a,.auth-switch a,.toggle a { color: var(--accent); text-decoration: underline; text-underline-offset: .2em; }
.text-links { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .9rem; margin-top: 10px; }
.footer { display: grid; grid-template-columns: 1fr 1.7fr auto; gap: 20px; padding-block: 35px 48px; border-top: 1px solid var(--border); align-items: start; color: var(--muted); font-size: .88rem; }
.footer-brand p { margin-top: 8px; }
.footer nav { display: flex; flex-wrap: wrap; gap: 9px 20px; }
.footer-meta { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.auth-layout { display: grid; grid-template-columns: .95fr 1fr; gap: clamp(24px,6vw,95px); margin-block: 12px 60px; align-items: stretch; }
.auth-visual { position: relative; min-height: 480px; border-radius: 34px; background: linear-gradient(180deg,#39203036,transparent 36%,#2c122cc4),url('/assets/light-left-535.webp') 50% 32%/cover; overflow: hidden; color: #fff2f4; }
[data-theme="dark"] .auth-visual { background-image: linear-gradient(180deg,#28142236,transparent 36%,#1c1025cb),url('/assets/dark-left-535.webp'); }
.auth-visual-text { position: absolute; bottom: 26px; left: 26px; right: 26px; }
.auth-visual-text p { font-size: clamp(2.5rem,5vw,4.75rem); font-weight: 480; line-height: 1; letter-spacing: -.065em; margin-top: 13px; }
.auth-body { padding-block: 25px; max-width: 515px; align-self: center; min-width: 0; }
.auth-switch { margin-top: 18px; color: var(--muted); }
.doc { padding-block: 30px 70px; min-height: 64vh; }
.doc p { max-width: 75ch; margin-top: 16px; }
.page-title { margin-bottom: 24px; }
.page-title h1 { font-size: clamp(2.15rem,4.6vw,4.15rem); margin-top: 8px; text-wrap: balance; }
.page-title p { color: var(--muted); margin-top: 10px; max-width: 62ch; }
form { display: grid; gap: 15px; }
.field { display: grid; gap: 6px; font-size: .94rem; min-width: 0; }
.field > span,.choices legend { font-weight: 590; }
input:not([type="checkbox"],[type="file"],[type="range"]),textarea,select { display: block; width: 100%; min-width: 0; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-solid); padding: 10px 13px; min-height: 45px; }
input:disabled { opacity: .62; }
input[type="range"] { accent-color: var(--accent); }
textarea { resize: vertical; min-height: 86px; }
::placeholder { color: var(--muted); opacity: .78; }
.toggle { display: flex; align-items: flex-start; gap: 9px; font-size: .92rem; }
.toggle input { width: 18px; height: 18px; flex: 0 0 18px; margin: .18em 0 0; accent-color: var(--primary); }
.counter { text-align: right; color: var(--muted); }
.feedback { color: var(--danger); font-size: .91rem; margin: 0; }
.feedback:empty { display: none; }
.callout { padding: 13px 16px; background: var(--soft); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: .94rem; }
.inline-actions,.form-actions,.theme-options { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.form-actions { justify-content: flex-end; }
.boot,.loading { color: var(--muted); padding: 35px; text-align: center; }
dialog { max-height: calc(100dvh - 30px); width: min(100% - 28px,520px); color: var(--ink); background: var(--surface-solid); border: 1px solid var(--border); border-radius: var(--radius); padding: 0; box-shadow: 0 20px 80px #1b0d2666; }
dialog.wide { width: min(100% - 28px,760px); }
dialog::backdrop { background: #2a192c65; backdrop-filter: blur(5px); }
.modal-inner { padding: clamp(15px,4vw,26px); display: grid; gap: 15px; }
.modal-inner header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.modal-inner header h2 { font-size: 1.55rem; }
.modal-actions { display: grid; gap: 9px; }
#toast { pointer-events: none; position: fixed; z-index: 10; bottom: 22px; left: 50%; max-width: calc(100% - 28px); transform: translate(-50%,10px); border-radius: var(--radius-sm); background: var(--ink); color: var(--bg); font-size: .94rem; padding: 11px 16px; box-shadow: var(--shadow); opacity: 0; transition: opacity .2s,transform .2s; }
#toast.visible { opacity: 1; transform: translate(-50%,0); }
.app-header { border-bottom: 1px solid var(--border); background: var(--surface); }
.app-header-inner { width: min(1400px,calc(100% - var(--gutter)*2)); margin-inline: auto; min-height: 68px; }
.avatar,.avatar-link { width: 44px; height: 44px; display: inline-flex; border-radius: 50%; flex: 0 0 44px; vertical-align: middle; }
.avatar { object-fit: cover; }
.initials { display: inline-grid; place-items: center; background: var(--soft-alt); color: var(--accent); font-weight: 600; }
.workspace { width: min(1400px,calc(100% - var(--gutter)*2)); margin-inline: auto; display: grid; grid-template-columns: 224px minmax(0,1fr); align-items: start; }
.sidebar { border-right: 1px solid var(--border); min-height: calc(100vh - 69px); padding: 33px 16px 18px 0; position: sticky; top: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 30px; }
.sidebar nav { display: grid; gap: 7px; }
.sidebar nav a { padding: 11px 13px; border: 1px solid transparent; border-radius: var(--radius-sm); display: flex; gap: 12px; align-items: center; min-height: 46px; color: var(--muted); }
.sidebar nav a:hover,.sidebar nav a[aria-current] { border-color: var(--border); background: var(--soft); color: var(--ink); }
.sidebar nav a[aria-current] { font-weight: 650; }
.sidebar nav .short { display: none; }
.app-main { min-width: 0; padding: clamp(18px,4vw,50px) 0 45px clamp(18px,4vw,56px); }
.app-main > .callout { margin-bottom: 18px; }
.page-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
.page-top .page-title { margin: 0; }
.empty { min-height: 320px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; }
.empty h2 { font-size: clamp(1.6rem,4vw,2.35rem); }
.empty p { max-width: 46ch; color: var(--muted); }
.empty .button { margin-top: 7px; }
.panel h2 { font-size: clamp(1.37rem,2.8vw,1.9rem); }
.panel h3 { font-size: 1.15rem; }
.profile-card { min-width: 0; display: grid; grid-template-columns: minmax(0,.92fr) minmax(0,1fr); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; box-shadow: var(--shadow); }
.profile-card-info { padding: clamp(18px,4vw,40px); display: grid; align-content: center; justify-items: start; gap: 12px; min-width: 0; overflow-wrap: anywhere; }
.swipe-stage { overflow: clip; overflow-clip-margin: 10px; }
.swipe-card { position: relative; touch-action: pan-y pinch-zoom; user-select: none; }
.swipe-card .profile-card { animation: swipe-arrive .24s ease-out both; }
@keyframes swipe-arrive {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
}
.swipe-badge { position: absolute; top: 20px; z-index: 2; padding: 7px 13px; border: 2px solid currentColor; border-radius: 10px; background: var(--surface-solid); font-weight: 700; opacity: 0; pointer-events: none; }
.swipe-like { left: 20px; color: var(--accent); transform: rotate(-8deg); }
.swipe-skip { right: 20px; color: var(--muted); transform: rotate(8deg); }
.swipe-card[data-direction="like"] .swipe-like,
.swipe-card[data-direction="skip"] .swipe-skip { opacity: var(--swipe-intensity, 0); }
.match-celebration {
  position: fixed;
  z-index: 10;
  inset: 16px auto auto 50%;
  translate: -50%;
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 12px 18px;
  border-radius: 24px;
  border: 1px solid var(--border);
  background: var(--surface-solid);
  box-shadow: var(--shadow);
  pointer-events: none;
  animation: match-appear .42s cubic-bezier(.18,.75,.25,1.3) both, match-fade .25s ease 2.5s forwards;
}
.match-celebration span { color: var(--accent); font-size: 1.6rem; line-height: 1; }
@keyframes match-appear { from { opacity: 0; transform: translateY(-16px) scale(.88); } }
@keyframes match-fade { to { opacity: 0; transform: translateY(-6px); } }
.profile-name { display: flex; align-items: center; flex-wrap: wrap; gap: 7px 14px; }
.profile-name h2 { font-size: clamp(1.9rem,4vw,3.25rem); }
.profile-city { display: flex; align-items: center; gap: 5px; }
.goal-tag,.verified,.tag { display: inline-flex; align-items: center; gap: 5px; border-radius: 100px; padding: 4px 10px; background: var(--soft); border: 1px solid var(--border); font-size: .85rem; }
.verified { color: var(--accent); }
.tags { display: flex; flex-wrap: wrap; gap: 5px; }
.tag { background: var(--surface-solid); }
.match-note { color: var(--accent); font-size: .9rem; }
.card-actions,.card-links { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 4px; }
.card-links { width: 100%; justify-content: space-between; }
.gallery { display: grid; align-items: end; isolation: isolate; min-height: 320px; position: relative; background: var(--soft-alt); }
.gallery img,.no-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 38%; z-index: -1; }
.no-photo { display: grid; place-items: center; color: var(--accent); }
.person-top { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
.profile-details { display: grid; gap: 7px; }
.profile-details h3 { margin-top: 8px; }
.editor,.preference-form { max-width: 880px; }
.fields-row { display: flex; flex-wrap: wrap; gap: 12px; }
.fields-row > * { flex: 1 1 165px; }
.progress-line { display: grid; grid-template-columns: repeat(8,1fr); gap: 7px; }
.progress-step { background: transparent; color: var(--muted); border: 0; border-bottom: 2px solid var(--border); display: grid; justify-items: start; gap: 5px; padding: 2px 2px 8px; font-size: .71rem; }
.progress-step span { font-weight: 650; }
.progress-step.current,.progress-step.done { color: var(--ink); border-color: var(--accent); }
.progress-step.current span { color: var(--accent); }
.editor-heading h2 { margin-top: 4px; }
.choices { padding: 0; border: 0; margin: 0; min-width: 0; font-size: .94rem; }
.choices > div { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.choices label { display: flex; gap: 7px; align-items: center; padding: 5px 10px; background: var(--surface-solid); border: 1px solid var(--border); border-radius: 100px; cursor: pointer; }
.choices label:has(input:checked) { background: var(--soft); border-color: var(--accent); }
.choices input { accent-color: var(--primary); }
.photo-editor { display: grid; grid-template-columns: repeat(auto-fill,minmax(133px,1fr)); gap: 12px; }
.photo-tile,.photo-add { aspect-ratio: 4/5; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; position: relative; }
.photo-tile img { width: 100%; height: 100%; object-fit: cover; }
.photo-label { position: absolute; top: 6px; left: 6px; background: var(--surface); border-radius: 25px; padding: 2px 7px; font-size: .75rem; }
.photo-tools { position: absolute; inset-inline: 4px; bottom: 4px; display: flex; justify-content: flex-end; gap: 2px; }
.photo-tools .icon-button { width: 34px; height: 38px; min-height: 38px; flex-basis: 34px; }
.photo-tools .button { min-height: 38px; padding-inline: 5px; font-size: .82rem; }
.photo-add { display: grid; align-content: center; justify-items: center; gap: 8px; background: var(--soft-alt); border-style: dashed; color: var(--muted); cursor: pointer; }
.photo-add input { opacity: 0; position: absolute; inset: 0; width: 100%; cursor: pointer; }
.photo-add:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }
#crop { display: block; margin-inline: auto; max-width: 100%; max-height: 38dvh; border-radius: 12px; }
.split-panels { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }
.split-panels h2,.settings-stack h2 { margin-bottom: 13px; }
.person-row,.setting-row { display: flex; gap: 11px; align-items: center; min-width: 0; padding-block: 11px; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.person-row:last-child,.setting-row:last-child { border-bottom: 0; }
.person-row p,.setting-row p { color: var(--muted); font-size: .88rem; margin: 0; }
.person-name { font-weight: 630; }
.person-name:hover { text-decoration: underline; }
.person-actions,.setting-row > :last-child:not(:first-child) { margin-left: auto; }
.unread { display: grid; place-items: center; background: var(--primary); color: var(--primary-ink); border-radius: 50%; min-width: 20px; min-height: 20px; font-size: .7rem; }
.chat-panel { max-width: 880px; padding: 0; overflow: hidden; }
.chat-header { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--border); padding: 13px 16px; }
.chat-header > .icon-button:last-child { margin-left: auto; }
.chat-history { min-height: 240px; height: min(48dvh,540px); padding: 15px; overflow: auto; display: flex; align-items: flex-start; flex-direction: column; gap: 11px; background: linear-gradient(144deg,var(--surface),var(--bg)); }
.chat-empty { margin: auto; text-align: center; }
.bubble { max-width: 83%; min-width: 78px; background: var(--surface-solid); border: 1px solid var(--border); border-radius: 16px 16px 16px 3px; padding: 8px 12px; }
.bubble.mine { align-self: end; background: var(--soft-alt); border-radius: 16px 16px 3px 16px; }
.bubble p { white-space: pre-wrap; overflow-wrap: anywhere; }
.bubble time { display: block; text-align: right; font-size: .72rem; color: var(--muted); }
.compose { padding: 14px 16px; border-top: 1px solid var(--border); gap: 8px; }
.compose > button { justify-self: start; min-height: 38px; }
.compose-row { display: flex; align-items: flex-end; gap: 7px; }
.compose-row label { flex: 1; min-width: 0; }
.message-reply,.message-quote { border-inline-start: 3px solid var(--accent); padding: 6px 10px; overflow-wrap: anywhere; }
.message-reply { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.message-quote { margin-bottom:5px; text-align:start; white-space:normal; max-width:100%; }
.mobile-workspace { display:block; }
.mobile-workspace .sidebar { position:fixed; inset:auto 0 0; z-index:5; min-height:0; padding:4px 8px max(6px,env(safe-area-inset-bottom)); border:0; border-top:1px solid var(--border); background:var(--surface-solid); }
.mobile-workspace .sidebar nav { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:2px; }
.mobile-workspace .sidebar nav a { flex-direction:column; justify-content:center; gap:3px; min-height:48px; padding:4px; font-size:.72rem; text-align:center; }
.mobile-workspace .sidebar nav .full { display:none; }
.mobile-workspace .sidebar nav .short { display:block; }
.mobile-workspace .app-main { padding:16px 0 88px; }
.compose-row .attachment-label { flex: none; width:44px; height:44px; padding:0; border-radius:50%; }
.compose-row > .icon-button { flex:none; width:44px; height:44px; padding:0; border-radius:50%; }
.compose textarea { min-height: 56px; max-height: 180px; }
.ai-result { display: grid; gap: 9px; }
.settings-stack { display: grid; gap: 13px; max-width: 900px; }
.settings-stack .panel > * + * { margin-top: 9px; }
.settings-stack .panel > h3 { margin-top: 20px; }
.staff-item { padding: 13px 0; border-top: 1px solid var(--border); }
.staff-item > * + * { margin-top: 7px; }
.review-item { display: flex; gap: 12px; align-items: center; }
.review-item img { width: min(20vw,135px); aspect-ratio: 4/5; object-fit: cover; border-radius: 12px; }
.audit-line { color: var(--muted); font-size: .84rem; overflow-wrap: anywhere; }
@media (max-width: 1000px) {
  .workspace { grid-template-columns: 185px minmax(0,1fr); }
  .split-panels { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .site-header,.app-header-inner { min-height: 64px; }
  .site-header nav { display: none; }
  .head-actions [data-action="mobile-menu"] { display: inline-flex; }
  .workspace { display: block; }
  .sidebar { position: fixed; inset: auto 0 0; border: 0; border-top: 1px solid var(--border); padding: 5px 8px max(6px,env(safe-area-inset-bottom)); background: var(--surface-solid); min-height: unset; z-index: 5; }
  .sidebar nav { grid-auto-flow: column; grid-auto-columns: minmax(50px,1fr); overflow-x: auto; gap: 2px; }
  .sidebar nav a { flex-direction: column; justify-content: center; gap: 3px; padding: 4px; font-size: .65rem; min-height: 48px; text-align: center; }
  .sidebar nav .full { display: none; }
  .sidebar nav .short { display: block; }
  .app-main { padding: 24px 0 88px; }
  body:has(.workspace) #toast { bottom: 76px; }
  .feature { grid-template-columns: 1fr; }
  .footer { grid-template-columns: 1fr; }
  .auth-layout { grid-template-columns: 1fr; gap: 14px; }
  .auth-visual { min-height: 230px; background-position: 50% 27%; }
  .auth-body { padding-block: 12px; }
}
@media (max-width: 640px) {
  .site-header { gap: 7px; }
  .brand { font-size: 1.35rem; }
  .head-actions { gap: 5px; }
  .button.header-login { padding-inline: 11px; }
  .intro-portrait { inset-inline: 0; width: 100%; height: 54%; }
  .intro-portrait.left { inset-block: 0 auto; mask-image: linear-gradient(#000 83%, transparent); }
  .intro-portrait.right { inset-block: auto 0; mask-image: linear-gradient(0deg, #000 83%, transparent); }
  .left .intro-image { object-position: 54% 33%; }
  .right .intro-image { object-position: 48% 37%; }
  .intro-glass { mask-image: radial-gradient(ellipse 55% 35% at 50% 50%, transparent 75%, #000 100%); }
  .orb { width: clamp(12.5rem, 58vw, 16rem); font-size: clamp(1.65rem, 7vw, 2.25rem); }
  .steps-grid { grid-template-columns: 1fr; }
  .step-top { margin-bottom: 12px; }
  .safety { gap: 10px; }
  .safety .symbol { width: 34px; height: 34px; border-radius: 11px; }
  .safety .symbol .icon { width: 20px; height: 20px; }
  .profile-card { grid-template-columns: 1fr; }
  .gallery { min-height: 320px; }
  .progress-step { justify-items: center; }
  .progress-step b { display: none; }
  .progress-step.current b { display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
:root {
  --bg:#faf5e9; --surface:#fffdfa; --surface-solid:#fffdfa; --ink:#402411;
  --muted:#70513c; --border:#e9dcc8; --soft:#f8eed9; --soft-alt:#eaf2df;
  --primary:#ffd21f; --primary-ink:#402411; --accent:#39754a; --danger:#a5303d;
  --shadow:0 15px 45px #81541412; --radius:28px; --radius-sm:16px;
}
:root[data-theme="dark"] {
  --bg:#231b14; --surface:#33271c; --surface-solid:#33271c; --ink:#fff1dc;
  --muted:#dcc7ad; --border:#584534; --soft:#443522; --soft-alt:#2c3927;
  --primary:#ffd21f; --primary-ink:#402411; --accent:#a8d386; --danger:#ffadb5;
}
.brand img { width: clamp(106px, 12vw, 146px); height:auto; }
[data-theme="dark"] .brand img { filter:drop-shadow(0 0 7px #fff6b68c) brightness(1.35); }
.site-header { min-height:100px; }
.site-header nav { gap:clamp(12px,2vw,32px); }
.head-actions { gap:10px; }
.lemo-landing { overflow:hidden; }
.lemo-hero {
  position:relative; display:grid; grid-template-columns:1fr 1.08fr; align-items:center; gap:12px;
  min-height:560px; padding-block:28px 36px; isolation:isolate;
}
.lemo-hero::before,.lemo-hero::after { content:""; position:absolute; z-index:-1; pointer-events:none; background:url('/assets/lemo-slice.svg') center/contain no-repeat; width:165px; aspect-ratio:1; opacity:.78; }
.lemo-hero::before { left:-130px; bottom:-22px; transform:rotate(-23deg); }
.lemo-hero::after { top:0; right:-130px; transform:rotate(30deg); }
.lemo-kicker { display:inline-flex; gap:8px; align-items:center; font-weight:750; font-size:.8rem; text-transform:uppercase; letter-spacing:.12em; color:var(--accent); }
.lemo-kicker i { display:block; width:16px; height:9px; border-radius:90% 0 90% 0; background:currentColor; rotate:-18deg; }
.lemo-intro h1 { margin:17px 0 28px; font-size:clamp(2.5rem,4.1vw,3.8rem); font-weight:830; letter-spacing:-.065em; line-height:1.06; }
.lemo-intro h1 em { position:relative; font-style:normal; }
.lemo-intro h1 em::after { content:""; position:absolute; inset:auto 0 -12px; height:13px; border-top:5px solid #ffd21f; border-radius:50%; transform:rotate(-3deg); }
.lemo-intro p { font-size:clamp(1.1rem,2vw,1.65rem); font-weight:610; max-width:33ch; margin:0 0 26px; line-height:1.35; }
.lemo-cta { padding:15px 28px; min-height:60px; border-radius:100px; font-size:1.18rem; font-weight:800; box-shadow:0 8px 0 #e9b915,0 16px 26px #c795302d; }
.lemo-collage { position:relative; min-height:490px; }
.lemo-demo-card,.lemo-demo-chat,.lemo-demo-ai { position:absolute; background:var(--surface-solid); box-shadow:0 16px 42px #98702224; border:1px solid var(--border); }
.lemo-demo-card { border-radius:26px; padding:8px; }
.lemo-demo-card img { display:block; width:100%; height:auto; aspect-ratio:1/1.03; object-fit:cover; border-radius:20px; }
.lemo-demo-card > div { padding:8px 8px 6px; }
.lemo-demo-card h2 { margin:0 0 4px; font-size:1.35rem; letter-spacing:-.045em; }
.lemo-demo-card h2 span { color:var(--accent); }
.lemo-demo-card p { margin:0; font-size:.8rem; }
.demo-anya { top:25px; left:2%; width:49%; transform:rotate(-6deg); }
.demo-max { top:257px; left:38%; width:28%; z-index:2; transform:rotate(5deg); }
.demo-max h2 { font-size:1rem; }
.demo-max p { font-size:.67rem; }
.lemo-tags { display:flex; gap:4px; flex-wrap:wrap; margin-top:9px; }
.lemo-tags span { border-radius:10px; background:var(--soft); padding:2px 6px; font-size:.68rem; }
.lemo-demo-chat { top:70px; right:1%; width:48%; transform:rotate(3deg); padding:16px; border-radius:24px; }
.demo-label { color:var(--accent); font-size:.7rem; font-weight:800; letter-spacing:.04em; }
.lemo-demo-chat p { background:var(--soft); border-radius:12px 12px 12px 2px; padding:8px 11px; width:fit-content; margin:9px 0 0; font-size:clamp(.78rem,1.15vw,.98rem); line-height:1.3; }
.lemo-demo-chat p:last-child { background:var(--soft-alt); border-radius:12px 12px 2px 12px; margin-left:11%; }
.lemo-demo-ai { top:280px; right:0; width:32%; padding:12px; border-radius:22px; display:flex; gap:6px; align-items:center; background:var(--soft); transform:rotate(2deg); }
.lemo-demo-ai img { width:31px; height:31px; flex:none; }
.lemo-demo-ai p { margin:3px 0 0; font-size:clamp(.72rem,1.1vw,.92rem); font-weight:700; line-height:1.28; }
.lemo-doodle { position:absolute; font:800 65px/1 system-ui; color:#edb900; right:38%; top:-22px; transform:rotate(18deg); }
.lemo-steps { padding-block:12px 44px; }
.lemo-steps .step-card { background:var(--surface-solid); border-radius:30px; }
.lemo-steps .step-top .symbol { color:#487641; background:#fff2b3; }
.auth-visual { background-image:linear-gradient(0deg,#402411b0,transparent),url('/assets/lemo-anya.webp'); }
[data-theme="dark"] .auth-visual { background-image:linear-gradient(0deg,#402411ba,transparent),url('/assets/lemo-anya.webp'); }
@media(max-width:900px) {
  .site-header nav { display:none; }
  .lemo-hero { grid-template-columns:1fr 1fr; min-height:460px; }
  .lemo-collage { min-height:380px; }
  .demo-max { top:210px; }
  .lemo-demo-ai { top:235px; }
}
@media(max-width:650px) {
  .site-header { min-height:74px; }
  .site-header .header-signup { display:none; }
  .lemo-hero { grid-template-columns:1fr; gap:21px; padding-block:24px 0; }
  .lemo-intro h1 { font-size:clamp(2.25rem,9.3vw,3.55rem); }
  .lemo-collage { min-height:365px; }
  .demo-anya { top:20px; left:1%; width:49%; }
  .demo-max { top:202px; left:35%; width:29%; }
  .lemo-demo-chat { top:52px; right:0; width:48%; padding:11px; }
  .lemo-demo-ai { top:225px; width:35%; padding:8px; }
  .lemo-demo-ai img { width:22px; height:22px; }
  .lemo-steps .steps-grid { grid-template-columns:1fr; }
}
.lemo-plans { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.lemo-plan { min-width:0; padding:clamp(16px,3vw,30px); }
.lemo-plan h2 { margin-top:12px; }
.lemo-plan ul { display:grid; gap:8px; padding-left:21px; }
.lemo-price { font-size:clamp(2rem,4vw,3.3rem); font-weight:850; letter-spacing:-.06em; }
.lemo-price small { font-size:1rem; font-weight:600; letter-spacing:0; }
.plus-plan { border:2px solid #e3b927; }
.lemo-renewal { margin-top:18px; }
.lemo-video { display:block; max-width:100%; width:min(100%,580px); max-height:420px; background:#21190f; border-radius:16px; }
.lemo-video-box { display:grid; gap:6px; justify-items:start; min-width:0; width:100%; }
.profile-video { width:100%; display:grid; gap:6px; }
.video-editor { display:grid; gap:10px; margin-top:14px; }
.upload-progress { width:100%; accent-color:#b98d00; height:12px; }
.hidden-message { display:grid; gap:8px; border:1px dashed var(--accent); }
.hidden-message .inline-actions { flex-wrap:wrap; }
.appearance-form { display:grid; gap:12px; min-width:0; }
.appearance-preview { border-radius:20px; min-height:145px; display:grid; place-items:center; padding:16px; }
.appearance-preview > div { padding:12px; border-radius:13px; background:var(--surface-solid); text-align:center; }
.lemo-custom { --lemo-back:#fff0a5; --lemo-shade:80%; }
.lemo-color-cream { --lemo-back:#fff3de; }
.lemo-color-leaf { --lemo-back:#cce4af; }
.lemo-color-peach { --lemo-back:#f8c8aa; }
.lemo-color-sky { --lemo-back:#c3dbee; }
.lemo-shade-0 { --lemo-shade:72%; }
.lemo-shade-1 { --lemo-shade:80%; }
.lemo-shade-2 { --lemo-shade:88%; }
.lemo-shade-3 { --lemo-shade:94%; }
.lemo-custom.appearance-preview,.lemo-custom .profile-card-info,.lemo-custom.chat-panel {
  position:relative; isolation:isolate; overflow:hidden;
  background:color-mix(in srgb,var(--surface-solid) 66%,var(--lemo-back));
}
.lemo-background { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; pointer-events:none; }
.lemo-custom.appearance-preview::before,.lemo-custom .profile-card-info::before,.lemo-custom.chat-panel::before {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:color-mix(in srgb,var(--surface-solid) var(--lemo-shade),transparent);
}
.lemo-custom.chat-panel .chat-history { background:transparent; }
.lemo-style-outline { border:2px solid var(--accent); }
.lemo-style-soft { border-radius:36px; }
@media(max-width:650px) { .lemo-plans { grid-template-columns:1fr; } }

.profile-editor-section { display:grid; gap:14px; padding-block:24px; border-top:1px solid var(--border); scroll-margin-top:90px; }
.profile-jumps, .own-profile-actions { margin-bottom:16px; }
.tag-picker { min-width:0; margin:0; padding:14px; border:1px solid var(--border); border-radius:16px; }
.tag-picker legend { font-weight:700; padding-inline:5px; }
.tag-picker p { margin:8px 0; }
.tag-picker .choices legend { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.tag-picker .choices label[hidden], .tag-picker [hidden] { display:none; }
.tag-picker .field { margin-block:10px; }
.tag-picker [data-action=tag-more] { margin-top:10px; }
.tag-selected { display:flex; gap:6px; flex-wrap:wrap; }
.tag-selected .button { min-height:32px; padding:4px 10px; text-align:left; white-space:normal; }
.appearance-fonts > div { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)); }
.appearance-fonts label { border-radius:13px; }
.appearance-fonts label:has(input:checked) { background:var(--soft); border-color:var(--accent); }
.font-sample { display:block; font-size:1.12rem; }
.font-sample,.appearance-preview p,.appearance-preview strong,.lemo-custom .profile-card-info h2,.lemo-custom .profile-card-info p,
.lemo-custom .bubble p,.lemo-custom .compose textarea { font-family:var(--lemo-font,"Manrope"),"Manrope",system-ui,sans-serif; }
.lemo-custom.appearance-preview,.lemo-custom .profile-card-info,.lemo-custom.chat-panel {
  background:var(--lemo-art,none),var(--lemo-back);
  background-repeat:no-repeat;
}
.lemo-custom .profile-card-info::before,.lemo-custom.chat-panel::before,.lemo-custom.appearance-preview::before {
  background:color-mix(in srgb,var(--surface-solid) 81%,transparent);
}
.lemo-custom .profile-card-info:has(.lemo-background:not([hidden]))::before,
.lemo-custom.chat-panel:has(.lemo-background:not([hidden]))::before,
.lemo-custom.appearance-preview:has(.lemo-background:not([hidden]))::before {
  background:linear-gradient(rgb(0 0 0 / var(--lemo-dim,.2)),rgb(0 0 0 / var(--lemo-dim,.2))),
    color-mix(in srgb,var(--surface-solid) 80%,transparent);
}
.lemo-shade-0 { --lemo-dim:0; }
.lemo-shade-1 { --lemo-dim:.18; }
.lemo-shade-2 { --lemo-dim:.32; }
.lemo-shade-3 { --lemo-dim:.46; }
.lemo-custom .profile-card-info:has(.lemo-background:not([hidden])) > :not(img),
.lemo-custom .chat-header,.lemo-custom .compose { background:var(--surface-solid); }
.lemo-custom .profile-card-info:has(.lemo-background:not([hidden])) > :not(img) { border-radius:10px; padding-inline:6px; }
.lemo-custom.appearance-preview::before { background:transparent; }
.lemo-preset-slices { --lemo-back:#fff2d8; --lemo-art:url('/assets/lemo-slice.svg') left -38px bottom -44px/160px, url('/assets/lemo-slice.svg') right -32px top -36px/130px; }
.lemo-preset-bright { --lemo-back:#ffd21f; }
.lemo-preset-leaves { --lemo-back:#f4d238; --lemo-art:radial-gradient(ellipse 60px 18px at 88% 14%,#73a94a 98%,transparent),radial-gradient(ellipse 46px 14px at 96% 28%,#39834b 98%,transparent),linear-gradient(130deg,#fff5b3,#ffce28); }
.lemo-preset-sketch { --lemo-back:#fffdf8; --lemo-art:url('/assets/lemo-outline.svg') right -18px center/132px,url('/assets/lemo-outline.svg') left -16px top -18px/99px; }
.lemo-preset-sunset { --lemo-back:#ffbc70; --lemo-art:linear-gradient(155deg,#ffef8d,#ff9f69 78%,#ef7a61); }
.lemo-preset-garden { --lemo-back:#d8edaf; --lemo-art:radial-gradient(ellipse 50px 15px at 89% 82%,#91c969 98%,transparent),radial-gradient(ellipse 44px 13px at 95% 68%,#75ad5d 98%,transparent),linear-gradient(140deg,#fff7bd,#bde6a5); }
.lemo-preset-evening { --lemo-back:#292b2d; --lemo-art:url('/assets/lemo-slice.svg') right -36px bottom -38px/155px,url('/assets/lemo-slice.svg') left -30px top -30px/110px; }
.lemo-preset-evening .chat-history { background:rgb(0 0 0 / .25); }

/* Account illustrations and profile photos use the full frame, with a soft fill behind narrow crops. */
.auth-visual, [data-theme="dark"] .auth-visual {
  min-height:0; align-self:start; aspect-ratio:4/5; background:var(--soft-alt); isolation:isolate;
}
.auth-visual > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 25%; z-index:-2; }
.auth-visual::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(transparent 52%,#2d1c13c9); }
.auth-visual-text p { font-size:clamp(1.65rem,3.7vw,3.5rem); font-weight:700; line-height:1.13; letter-spacing:-.045em; }
.gallery { min-width:0; min-height:0; aspect-ratio:4/5; align-self:start; overflow:hidden; }
.gallery .gallery-photo { object-fit:contain; object-position:center; }
.gallery .gallery-backdrop { object-fit:cover; filter:blur(22px) brightness(.65); transform:scale(1.12); z-index:-2; }
.gallery-full { position:absolute; top:12px; right:12px; min-height:36px; max-width:calc(100% - 24px); }
.photo-full-view { display:block; max-width:100%; max-height:75dvh; margin:auto; object-fit:contain; }
.profile-bio { white-space:pre-wrap; overflow-wrap:anywhere; }
.profile-distance { font-size:.9rem; }
.field, .fields-row > *, .profile-card-info > *, .filter-block { min-width:0; max-width:100%; }
.field input, .field select, .field textarea { line-height:1.45; }
.profile-card-info h2,.tag,.button,.field > span { overflow-wrap:anywhere; }
.tag,.button { white-space:normal; }
.filter-block { display:grid; gap:9px; }
.filter-details { border:1px solid var(--border); border-radius:16px; padding:0 14px; }
.filter-details > summary { cursor:pointer; padding:13px 0; font-weight:700; }
.filter-details > section { padding-bottom:14px; }
.filter-count { float:right; font-size:.85rem; color:var(--muted); margin-left:12px; }
.filter-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.filter-heading button { border:0; background:none; font:inherit; cursor:pointer; min-height:36px; }
.color-controls { min-width:0; padding:10px; border:1px solid var(--border); border-radius:16px; }
.color-swatches { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.color-swatches button::before { content:""; flex:none; width:16px; height:16px; border-radius:50%; border:1px solid var(--border); background:var(--custom-background); }
.color-controls input[type=color] { min-height:42px; padding:5px; cursor:pointer; }
.lemo-preset-solid { --lemo-back:var(--custom-background,var(--base-lemo-back,#fff0a5)); }
.lemo-preset-solid.lemo-color-cream { --base-lemo-back:#fff3de; }
.lemo-preset-solid.lemo-color-leaf { --base-lemo-back:#cce4af; }
.lemo-preset-solid.lemo-color-peach { --base-lemo-back:#f8c8aa; }
.lemo-preset-solid.lemo-color-sky { --base-lemo-back:#c3dbee; }
.lemo-custom { border-color:var(--custom-border,var(--border)); }
.lemo-custom .profile-card-info > :not(img),
.lemo-custom.appearance-preview > div,
.lemo-custom .bubble, .lemo-custom .compose, .lemo-custom .chat-header {
  background:var(--custom-panel,var(--surface-solid));
  color:var(--custom-text,var(--ink)); border-color:var(--custom-border,var(--border));
}
.lemo-custom .profile-card-info > :not(img) { border-radius:11px; padding:4px 8px; }
.lemo-custom .profile-card-info .tag,.lemo-custom .bubble time,.lemo-custom .chat-header .muted,
.lemo-custom .profile-card-info .muted,.lemo-custom .profile-card-info .match-note {
  color:var(--custom-text,var(--ink)); border-color:var(--custom-border,var(--border));
  background:var(--custom-panel,var(--surface-solid));
}
.lemo-custom .profile-card-info::before,.lemo-custom.chat-panel::before { background:transparent; }
.lemo-custom .profile-card-info:has(.lemo-background:not([hidden]))::before,
.lemo-custom.chat-panel:has(.lemo-background:not([hidden]))::before,
.lemo-custom.appearance-preview:has(.lemo-background:not([hidden]))::before { background:rgb(0 0 0 / var(--lemo-dim,.2)); }
@media (max-width:650px) {
  .auth-visual, [data-theme="dark"] .auth-visual { aspect-ratio:16/10; }
  .gallery { aspect-ratio:5/6; }
  .filter-count { float:none; display:inline-block; }
}

.lemo-custom .profile-card-info > :not(img) { border:1px solid var(--custom-border,transparent); }
.lemo-custom .profile-card-info:has(.lemo-background:not([hidden])) > :not(img) {
  background:var(--custom-panel,var(--surface-solid));
  color:var(--custom-text,var(--ink));
  border-color:var(--custom-border,var(--border));
}

/* Lemo menus, gallery and chat media */
.native-select-source { position:absolute !important; width:1px !important; height:1px !important; opacity:0; pointer-events:none; }
.lemo-select { position:relative; min-width:0; }
.lemo-select-button {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%; min-height:48px; padding:11px 14px; text-align:left; border:1px solid var(--border);
  border-radius:14px; background:var(--surface-solid); color:var(--ink); font:inherit;
}
.lemo-select-button::after { content:'⌄'; color:var(--primary); font-size:1.2em; }
.lemo-select-button[aria-expanded=true] { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 25%,transparent); }
.lemo-select-menu {
  position:absolute; z-index:20; top:calc(100% + 5px); left:0; right:0; max-height:min(260px,40dvh); overflow-y:auto;
  padding:6px; border:1px solid var(--border); border-radius:15px; box-shadow:0 12px 30px #3d2a1b30; background:var(--surface-solid);
}
.lemo-select.opens-up .lemo-select-menu { top:auto; bottom:calc(100% + 5px); }
.lemo-select-option { display:block; width:100%; border:0; border-radius:10px; padding:10px 12px; text-align:left; background:transparent; color:var(--ink); font:inherit; }
.lemo-select-option:hover,.lemo-select-option:focus-visible { background:var(--soft); }
.lemo-select-option[aria-selected=true] { background:var(--primary); color:var(--primary-ink); font-weight:700; }
.gallery { position:relative; display:block; touch-action:pan-y; }
.gallery-slide { position:absolute; inset:0; overflow:hidden; isolation:isolate; }
.gallery-slide .gallery-photo,.gallery-slide .gallery-backdrop { position:absolute; inset:0; }
.gallery-video { position:absolute; width:100%; height:100%; inset:0; background:#24180f; object-fit:contain; }
.gallery-controls { position:absolute; inset:0; z-index:3; pointer-events:none; }
.gallery-controls .icon-button {
  position:absolute; top:50%; transform:translateY(-50%); pointer-events:auto;
  width:44px; height:44px; padding:0; border:1px solid #fff8; border-radius:50%;
  color:#fff9e9; background:#24180fe0; box-shadow:0 2px 10px #0005;
}
.gallery-controls .icon-button:hover,.gallery-controls .icon-button:focus-visible { background:#332211; color:#ffd21f; }
.gallery-controls [data-action=gallery-prev] { left:8px; }
.gallery-controls [data-action=gallery-prev] svg { transform:scaleX(-1); }
.gallery-controls [data-action=gallery-next] { right:8px; }
.gallery-position {
  position:absolute; top:14px; left:12px; padding:4px 10px; border-radius:20px;
  background:#24180fe0; color:#fff9e9; font-size:.8rem; font-variant-numeric:tabular-nums;
}
.gallery-dots { position:absolute; z-index:3; left:50%; bottom:8px; transform:translateX(-50%); display:flex; border-radius:30px; background:#24180fe0; }
.gallery-dot { display:grid; place-items:center; width:28px; height:28px; border:0; border-radius:50%; background:transparent; padding:0; }
.gallery-dot::before { content:''; width:9px; height:9px; border:1px solid white; border-radius:50%; }
.gallery-dot.active::before { background:#ffd21f; border-color:#ffd21f; }
.gallery-video-swipe {
  position:absolute; inset:auto 0 0; height:42px; display:grid; place-items:center;
  background:var(--soft-alt); color:var(--ink); font-size:.78rem; user-select:none; touch-action:pan-y;
}
.gallery-slide:has(.gallery-video-swipe) .gallery-video {height:calc(100% - 42px)}
.gallery-slide:not([hidden]):has(.gallery-video-swipe) ~ .gallery-dots { bottom:auto; top:12px; left:auto; right:8px; transform:none; }
.media-tile .lemo-video-box,.media-tile video { width:100%; height:100%; }
.media-tile video { object-fit:contain; background:#24180f; }
.media-tile .lemo-video-box > button { position:absolute; top:38px; left:4px; font-size:.7rem; padding:4px; min-height:30px; }
.chat-row { display:flex; align-items:center; gap:12px; padding:14px; border-radius:16px; text-decoration:none; color:var(--ink); }
.chat-row:hover,.chat-row:focus-visible { background:var(--soft); }
.chat-row-copy { min-width:0; flex:1; display:grid; gap:3px; }
.chat-row-fragment { color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-row-meta { display:grid; justify-items:end; gap:5px; color:var(--muted); font-size:.76rem; flex:none; }
.chat-attachment-controls { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.attachment-label { position:relative; overflow:hidden; cursor:pointer; }
.attachment-label input { position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:pointer; }
.attachment-label:focus-within { outline:3px solid var(--accent); outline-offset:3px; }
.chat-attachment { display:grid; gap:8px; padding:10px; border-radius:14px; background:var(--surface-solid); }
.attachment-preview { max-width:min(250px,100%); max-height:200px; object-fit:contain; border-radius:12px; }
.chat-upload { width:100%; accent-color:var(--primary); }
.recording-indicator { display:flex; align-items:center; gap:8px; font-weight:700; }
.recording-dot { width:10px; height:10px; border-radius:50%; background:#c73434; animation:recording-pulse 1.2s infinite alternate; }
@keyframes recording-pulse { to { opacity:.35; } }
.message-image-button { display:block; padding:0; background:none; border:0; cursor:pointer; }
.message-image-button img { display:block; max-width:min(270px,100%); max-height:300px; object-fit:contain; border-radius:12px; }
.bubble audio { max-width:min(300px,70vw); }
[data-action=notices] { position:relative; }
.notice-badge { position:absolute; right:-3px; top:-4px; min-width:20px; height:20px; display:grid; place-items:center; padding:0 3px; border-radius:20px; background:var(--primary); color:var(--primary-ink); font-size:.7rem; font-weight:800; }
.notice-card { display:flex; gap:12px; width:100%; text-align:left; padding:12px; margin-block:7px; border:1px solid var(--border); border-radius:16px; background:var(--surface-solid); color:var(--ink); font:inherit; }
.notice-card > span { min-width:0; display:grid; gap:3px; }
.notice-card small { color:var(--muted); }
.notice-snippet { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lemo-plans:has(.appearance-form) { grid-template-columns:1fr; }
.appearance-form { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; gap:14px 24px; }
.appearance-form > * { grid-column:1; min-width:0; }
.appearance-form > .appearance-live { grid-column:2; grid-row:1 / span 20; position:sticky; top:16px; }
.appearance-live .profile-card { grid-template-columns:1fr; }
.appearance-live .gallery { max-height:300px; width:100%; }
.appearance-live .profile-card-info { padding:16px; }
.appearance-live .profile-name h2 { font-size:1.55rem; }
.appearance-live .chat-panel { min-height:320px; }
.appearance-live .chat-history { min-height:180px; }
@media (max-width:900px) {
  .appearance-form { grid-template-columns:minmax(0,1fr); }
  .appearance-form > .appearance-live { grid-column:1; grid-row:auto; position:static; order:-1; }
  .appearance-live .profile-card { grid-template-columns:minmax(0,.8fr) minmax(0,1fr); }
  .appearance-live .gallery { max-height:220px; }
  .appearance-live .profile-card-info { padding:10px; gap:4px; font-size:.8rem; }
  .appearance-live .profile-name h2 { font-size:1.2rem; }
}
@media (prefers-reduced-motion:reduce) {
  .recording-dot { animation:none; }
}

.voice-hold { touch-action:none; user-select:none; }
.chat-entry { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; }
.chat-entry .chat-row { min-width:0; }
.chat-entry .chat-row-copy { user-select:none; }

.message-meta {display:flex; gap:.4rem; align-items:center; justify-content:flex-end; color:var(--muted); font-size:.75rem}
.message-meta .icon-button {min-width:36px; min-height:36px; padding:6px}
.receipt {font-weight:800; letter-spacing:-.19em; padding-right:.2em}
.receipt.is-read {color:#41794b}
.message-edit {display:flex; align-items:center; gap:.7rem; padding:.5rem; background:var(--surface-solid); border-radius:12px}
.voice-player {display:grid; grid-template-columns:auto auto minmax(32px,1fr) auto; align-items:center; gap:8px; min-width:0}
.voice-player audio {display:none}
.voice-play {min-width:38px; min-height:38px; padding:6px; background:#ffdf65; color:#382310}
.voice-seek {width:100%; min-width:0; accent-color:#50815a}
.voice-time {font-size:.78rem; font-variant-numeric:tabular-nums}
.voice-error {grid-column:1/-1; font-size:.8rem}
.voice-error:empty {display:none}
.voice-wave {height:22px; display:inline-flex; align-items:center; gap:3px; color:#50815a}
.voice-wave i {width:3px; height:65%; border-radius:4px; background:currentColor; transform:scaleY(.45)}
.voice-wave i:nth-child(2n) {height:100%; animation-delay:-.2s}
.voice-wave i:nth-child(3n) {height:48%; animation-delay:-.45s}
.recording-indicator .voice-wave i,.playing .voice-wave i {animation-name:lemo-wave; animation-duration:.85s; animation-iteration-count:infinite; animation-direction:alternate}
@keyframes lemo-wave {to {transform:scaleY(1)}}
.chat-attachment[data-upload-state=uploading] {border:1px solid #d7b941}
.chat-attachment[data-upload-state=failed] {border:1px solid #b75542}
.chat-attachment[data-upload-state=uploading] [data-action=attachment-cancel] {opacity:.5; pointer-events:none}
.appearance-group {background:var(--surface-solid); border:1px solid var(--border); border-radius:14px; box-shadow:0 3px 12px #69481912}
.appearance-group summary {cursor:pointer; padding:12px 14px; font-weight:700}
.appearance-fields {display:grid; gap:10px; padding:0 12px 12px; min-width:0}
.color-swatches [aria-pressed=true] {outline:2px solid #51834e; outline-offset:2px}
.appearance-form > .appearance-preview {display:none}
@media(max-width:900px) {
  .appearance-form > .appearance-live {grid-row:2; order:0}
  .appearance-form > h2 {grid-row:1}
  .appearance-live .profile-card {grid-template-columns:minmax(0,1fr)}
  .appearance-live .gallery {max-height:215px}
  .appearance-live .profile-card-info {padding:14px; font-size:.95rem}
  .appearance-live .chat-history {height:auto; min-height:110px}
}
@media(prefers-reduced-motion:reduce) {
  .voice-wave i,.recording-dot {animation:none !important}
}

.lemo-custom .profile-card-info,.font-name,.font-sample {font-family:var(--lemo-font,"Manrope"),"Manrope",system-ui,sans-serif}
.lemo-custom .profile-card-info :is(button,input,select,textarea,.button,.icon-button,.text-link) {font-family:"Manrope",system-ui,sans-serif}
.appearance-fields[data-background-option] {padding:0; min-width:0}

.chat-back { flex:none; white-space:nowrap; gap:6px; }
.chat-header > .avatar { flex:none; }
.chat-person { flex:1; min-width:0; }
.chat-person > * { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-header > .icon-button:last-child { flex:none; }
.chat-row-copy > strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.message-meta { flex-wrap:wrap; }
.message-image-button { max-width:100%; }
.voice-seek { margin-inline:0; }
.panel,.modal-inner { overflow-wrap:anywhere; }
.lemo-select-button,.lemo-select-option { overflow-wrap:anywhere; min-width:0; }

@media (max-width:760px) {
  :root { --gutter:clamp(12px,4vw,22px); }
  body { padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left); }
  .sidebar { padding-left:max(8px,env(safe-area-inset-left)); padding-right:max(8px,env(safe-area-inset-right)); }
  .app-main { padding-bottom:calc(78px + env(safe-area-inset-bottom)); }
  .icon-button,.gallery-full,.compose .button,.lemo-select-button,.lemo-select-option { min-height:44px; }
  .icon-button,.message-meta .icon-button { min-width:44px; min-height:44px; }
  .field :is(input:not([type=checkbox]):not([type=radio]),select,textarea),.compose textarea,.lemo-custom .compose textarea { font-size:1rem; }
  dialog { max-height:calc(100dvh - max(14px,env(safe-area-inset-top)) - max(14px,env(safe-area-inset-bottom))); }
  .chat-header { padding:8px; gap:8px; }
  .chat-back { min-width:44px; min-height:44px; padding-inline:10px; }
  .chat-header > .avatar { width:38px; height:38px; }
  .chat-history { height:min(46dvh,460px); min-height:clamp(100px,32dvh,210px); padding:10px; }
  .bubble { max-width:93%; padding-inline:9px; }
  .voice-player { gap:5px; }
  .voice-play { width:44px; height:44px; }
  .voice-seek { min-height:28px; }
  .compose { padding:10px; }
  .compose-row textarea { min-height:48px; max-height:min(140px,30dvh); }
  .chat-attachment-controls small { flex-basis:100%; }
  .chat-row { padding:10px 6px; gap:8px; }
}

@media (max-width:760px) and (pointer:coarse) {
  body:has(.compose textarea:focus) .sidebar { visibility:hidden; }
}

@media (max-width:390px) {
  .chat-back { padding-inline:0; }
  .chat-back span { display:none; }
  .voice-player > .voice-wave { display:none; }
  .voice-player { grid-template-columns:auto minmax(24px,1fr) auto; }
}