:root {
  --cream: #fffaf2;
  --paper: #fffdf9;
  --ink: #22201d;
  --muted: #777069;
  --line: #e9e1d6;
  --orange: #ff5a36;
  --orange-dark: #e94322;
  --yellow: #ffd84d;
  --green: #1f8b63;
  --blue: #2676de;
  --shadow: 0 22px 70px rgba(68, 43, 23, .12);
  --radius: 24px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --font: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", "Noto Sans KR", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--cream); }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: var(--font); line-height: 1.5; word-break: keep-all; -webkit-font-smoothing: antialiased; }
button, input, textarea { font: inherit; }
button { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid rgba(38, 118, 222, .32); outline-offset: 2px; }
[hidden] { display: none !important; }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.app-shell { min-height: 100dvh; padding-bottom: calc(88px + var(--safe-bottom)); }
.content-width { width: min(1100px, calc(100% - 40px)); margin-inline: auto; }
.topbar { position: fixed; z-index: 500; top: 0; left: 0; right: 0; height: 68px; padding: 0 max(20px, calc((100% - 1100px) / 2)); display: flex; align-items: center; justify-content: space-between; background: rgba(255, 250, 242, .88); border-bottom: 1px solid rgba(233, 225, 214, .65); backdrop-filter: blur(18px); }
.brand { display: flex; align-items: center; gap: 10px; padding: 0; border: 0; background: transparent; font-size: 22px; font-weight: 900; letter-spacing: -.06em; cursor: pointer; }
.brand-mark { position: relative; width: 31px; height: 31px; display: inline-flex; align-items: flex-end; justify-content: center; gap: 3px; padding: 7px 6px 6px; border-radius: 10px 10px 13px 13px; background: var(--orange); transform: rotate(-3deg); box-shadow: inset 0 -2px rgba(0, 0, 0, .07); }
.brand-mark::after { content: ""; position: absolute; width: 8px; height: 8px; border: 3px solid var(--yellow); border-radius: 50%; right: -4px; top: -3px; background: var(--ink); }
.brand-mark i { width: 3px; border-radius: 4px; background: white; }
.brand-mark i:nth-child(1) { height: 12px; }
.brand-mark i:nth-child(2) { height: 17px; }
.brand-mark i:nth-child(3) { height: 10px; }
.avatar { width: 36px; height: 36px; border: 1px solid var(--ink); border-radius: 50%; background: var(--yellow); font-size: 13px; font-weight: 900; cursor: pointer; }

main { padding-top: 68px; }
.view { display: none; min-height: calc(100dvh - 156px); }
.view.active { display: block; animation: view-in .28s ease both; }
@keyframes view-in { from { opacity: 0; transform: translateY(5px); } }
.eyebrow, .kicker { margin: 0 0 9px; color: var(--orange); font-size: 11px; font-weight: 900; letter-spacing: .12em; }
.page-head { padding-top: 54px; padding-bottom: 30px; }
.page-head h1 { margin: 0; font-size: clamp(34px, 5vw, 56px); line-height: 1.05; letter-spacing: -.055em; }
.page-head > p:last-child { margin: 13px 0 0; color: var(--muted); font-size: 15px; }

.home-hero { position: relative; min-height: 540px; overflow: hidden; padding: 74px max(20px, calc((100% - 1100px) / 2)) 62px; color: white; background: var(--orange); isolation: isolate; }
.home-hero::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(circle at 83% 35%, rgba(255, 216, 77, .45), transparent 25%), radial-gradient(circle at 40% 130%, rgba(115, 21, 3, .28), transparent 50%); }
.home-hero::after { content: "맛모"; position: absolute; z-index: -1; right: -32px; bottom: -115px; color: rgba(255,255,255,.075); font-size: 290px; font-weight: 950; letter-spacing: -.12em; line-height: 1; white-space: nowrap; }
.kicker { color: var(--yellow); }
.home-hero h1 { position: relative; z-index: 2; margin: 0; max-width: 760px; font-size: clamp(46px, 6.2vw, 82px); line-height: 1.04; letter-spacing: -.07em; }
.home-hero h1 em { color: var(--yellow); font-style: normal; }
.hero-copy { position: relative; z-index: 2; margin: 24px 0 28px; max-width: 620px; color: rgba(255,255,255,.8); font-size: 18px; line-height: 1.7; }
.primary { display: inline-flex; min-height: 54px; align-items: center; justify-content: center; gap: 9px; padding: 0 23px; border: 0; border-radius: 17px; background: var(--ink); color: white; font-weight: 850; cursor: pointer; box-shadow: 0 13px 30px rgba(60, 17, 7, .22); transition: transform .2s, box-shadow .2s, background .2s; }
.primary svg { width: 20px; }
.primary:hover { transform: translateY(-2px); box-shadow: 0 17px 34px rgba(60, 17, 7, .28); }
.primary:active { transform: translateY(0); }
.primary:disabled { opacity: .5; cursor: default; transform: none; }
.primary.small { min-height: 46px; border-radius: 14px; font-size: 14px; }
.primary.full { width: 100%; }
.hero-cta { position: relative; z-index: 2; background: white; color: var(--ink); }

.hero-orbit { position: absolute; z-index: 1; width: 390px; height: 390px; right: max(20px, calc((100% - 1100px) / 2)); top: 72px; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; transform: translateX(22%); }
.hero-orbit::before, .hero-orbit::after { content: ""; position: absolute; inset: 44px; border: 1px dashed rgba(255,255,255,.2); border-radius: 50%; }
.hero-orbit::after { inset: 98px; border-style: solid; }
.orbit-pin { position: absolute; left: 48%; top: 46%; width: 82px; height: 82px; border-radius: 50% 50% 50% 12px; background: var(--yellow); transform: rotate(-45deg); box-shadow: 0 20px 50px rgba(84, 30, 5, .32); }
.orbit-pin i { position: absolute; inset: 23px; border-radius: 50%; background: var(--ink); }
.orbit-card { position: absolute; display: flex; flex-direction: column; min-width: 112px; padding: 13px 15px; color: var(--ink); background: white; border-radius: 17px; box-shadow: 0 13px 34px rgba(70, 26, 7, .2); animation: float 4s ease-in-out infinite; }
.orbit-card b { font-size: 16px; }
.orbit-card small { color: var(--muted); }
.orbit-a { left: -25px; top: 58px; transform: rotate(-7deg); }
.orbit-b { right: -3px; top: 83px; transform: rotate(7deg); animation-delay: -.8s; }
.orbit-c { left: 55px; bottom: 28px; transform: rotate(4deg); animation-delay: -1.6s; }
@keyframes float { 50% { translate: 0 -8px; } }

.home-content { padding-top: 0; }
.stats-strip { position: relative; z-index: 5; display: grid; grid-template-columns: repeat(3, 1fr); max-width: 720px; margin: -30px auto 76px; padding: 20px 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); }
.stats-strip div { display: flex; flex-direction: column; align-items: center; border-right: 1px solid var(--line); }
.stats-strip div:last-child { border: 0; }
.stats-strip strong { font-size: 26px; line-height: 1.1; letter-spacing: -.04em; }
.stats-strip span { margin-top: 6px; color: var(--muted); font-size: 12px; }
.section-block { margin-bottom: 90px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 22px; }
.section-head h2 { margin: 0; font-size: 30px; letter-spacing: -.05em; }
.text-button { padding: 6px 0; border: 0; color: var(--orange-dark); background: transparent; font-weight: 800; cursor: pointer; }
.place-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 15px; overflow-x: auto; scrollbar-width: none; padding-bottom: 8px; }
.place-row::-webkit-scrollbar { display: none; }

.empty-onboarding { display: grid; grid-template-columns: 120px 1fr; gap: 48px; align-items: start; margin: 0 auto 100px; max-width: 860px; }
.empty-number { color: var(--orange); font-size: 100px; font-weight: 950; line-height: .8; letter-spacing: -.1em; }
.empty-onboarding h2 { margin: 0 0 32px; font-size: clamp(29px, 4vw, 46px); line-height: 1.16; letter-spacing: -.055em; }
.empty-onboarding ol { margin: 0; padding: 0; list-style: none; counter-reset: steps; }
.empty-onboarding li { position: relative; display: grid; grid-template-columns: 1fr 1.5fr; gap: 20px; padding: 17px 0 17px 40px; border-top: 1px solid var(--line); counter-increment: steps; }
.empty-onboarding li::before { content: counter(steps, decimal-leading-zero); position: absolute; left: 0; top: 19px; color: var(--orange); font-size: 11px; font-weight: 900; }
.empty-onboarding li b { font-size: 15px; }
.empty-onboarding li span { color: var(--muted); font-size: 14px; }
.promise { margin: 0 calc((100vw - 100%) / -2); padding: 86px max(20px, calc((100% - 1100px) / 2)); background: var(--ink); color: white; }
.promise > h2 { margin: 0 0 45px; font-size: clamp(38px, 6vw, 68px); line-height: 1.04; letter-spacing: -.065em; }
.promise-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.promise-grid article { padding: 26px; border: 1px solid rgba(255,255,255,.15); border-radius: var(--radius); background: rgba(255,255,255,.045); }
.promise-grid article > span { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--ink); background: var(--yellow); font-size: 12px; font-weight: 900; }
.promise-grid h3 { margin: 34px 0 9px; font-size: 19px; }
.promise-grid p { margin: 0; color: rgba(255,255,255,.62); font-size: 14px; line-height: 1.7; }

.bottom-nav { position: fixed; z-index: 700; left: 50%; bottom: max(12px, var(--safe-bottom)); transform: translateX(-50%); display: grid; grid-template-columns: repeat(5, 74px); align-items: end; padding: 9px 8px 7px; background: rgba(34,32,29,.96); color: white; border: 1px solid rgba(255,255,255,.12); border-radius: 25px; box-shadow: 0 18px 45px rgba(0,0,0,.26); backdrop-filter: blur(18px); }
.bottom-nav button { height: 52px; padding: 3px 0 0; border: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: rgba(255,255,255,.52); background: transparent; font-size: 10px; cursor: pointer; }
.bottom-nav button svg { width: 21px; height: 21px; }
.bottom-nav button.active { color: var(--yellow); }
.bottom-nav .nav-add { position: relative; height: 57px; color: white; }
.bottom-nav .nav-add > span { position: absolute; top: -30px; display: grid; place-items: center; width: 54px; height: 54px; border: 5px solid var(--cream); border-radius: 18px; background: var(--orange); box-shadow: 0 10px 24px rgba(255, 90, 54, .34); transform: rotate(-4deg); }
.bottom-nav .nav-add svg { width: 24px; transform: rotate(4deg); }
.bottom-nav .nav-add small { margin-top: 28px; font-size: 10px; font-weight: 800; }

.map-wrap { position: relative; height: calc(100dvh - 220px); min-height: 460px; margin-top: 4px; background: #e9e2d5; border-top: 1px solid var(--line); overflow: hidden; }
#map { position: absolute; inset: 0; z-index: 1; }
.leaflet-tile-pane { filter: saturate(.72) sepia(.12); }
.leaflet-control-attribution { font-size: 9px !important; }
.map-empty { position: absolute; z-index: 5; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(360px, calc(100% - 40px)); padding: 29px; text-align: center; background: rgba(255,253,249,.94); border: 1px solid var(--line); border-radius: 25px; box-shadow: var(--shadow); backdrop-filter: blur(15px); }
.map-empty h2 { margin: 18px 0 7px; font-size: 19px; }
.map-empty p { margin: 0 0 19px; color: var(--muted); font-size: 13px; }
.map-empty-pin { display: inline-block; width: 38px; height: 38px; border-radius: 50% 50% 50% 9px; background: var(--orange); transform: rotate(-45deg); }
.map-empty-pin::after { content: ""; position: absolute; inset: 12px; background: white; border-radius: 50%; }
.map-count { position: absolute; z-index: 5; left: 50%; top: 17px; transform: translateX(-50%); padding: 8px 14px; border-radius: 999px; background: var(--ink); color: white; font-size: 12px; box-shadow: 0 8px 20px rgba(0,0,0,.2); }
.matmo-marker { display: grid; place-items: center; width: 34px !important; height: 34px !important; border: 4px solid white; border-radius: 50% 50% 50% 9px; background: var(--orange); color: white; font-size: 11px; font-weight: 900; box-shadow: 0 8px 18px rgba(62,36,20,.25); transform: rotate(-45deg); }
.matmo-marker span { transform: rotate(45deg); }
.leaflet-popup-content-wrapper { border-radius: 16px; box-shadow: 0 14px 35px rgba(0,0,0,.18); }
.map-popup b { display: block; font-size: 15px; }
.map-popup span { display: block; margin: 4px 0 8px; color: var(--muted); }
.map-popup a { color: var(--orange-dark); font-weight: 800; text-decoration: none; }

.saved-head { display: flex; align-items: flex-end; justify-content: space-between; }
.round-add { display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 16px; background: var(--orange); color: white; cursor: pointer; box-shadow: 0 10px 25px rgba(255,90,54,.25); }
.round-add svg { width: 24px; }
.filters { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 3px; scrollbar-width: none; }
.filter { min-height: 40px; padding: 0 15px; white-space: nowrap; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--muted); font-size: 13px; font-weight: 750; cursor: pointer; }
.filter b { margin-left: 4px; color: inherit; }
.filter.active { border-color: var(--ink); background: var(--ink); color: white; }
.search-box { display: flex; align-items: center; gap: 11px; margin: 17px 0 22px; padding: 0 15px; height: 48px; border: 1px solid var(--line); border-radius: 15px; background: var(--paper); }
.search-box svg { width: 20px; color: var(--muted); }
.search-box input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 14px; }
.saved-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; padding-bottom: 40px; }
.place-card { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: var(--paper); transition: transform .2s, box-shadow .2s; }
.place-card:hover { transform: translateY(-3px); box-shadow: 0 15px 35px rgba(72,47,25,.1); }
.place-visual { position: relative; height: 136px; overflow: hidden; background: linear-gradient(135deg, #ffd3b8, #ff8569); }
.place-visual img { width: 100%; height: 100%; object-fit: cover; }
.place-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(34,32,29,.36), transparent 55%); }
.platform-badge { position: absolute; z-index: 2; left: 12px; top: 12px; padding: 5px 8px; border-radius: 8px; color: white; background: rgba(34,32,29,.74); font-size: 10px; font-weight: 850; backdrop-filter: blur(8px); }
.status-badge { position: absolute; z-index: 2; right: 12px; bottom: 10px; padding: 5px 8px; border-radius: 8px; color: var(--ink); background: var(--yellow); font-size: 10px; font-weight: 850; }
.status-badge.visited { color: white; background: var(--green); }
.place-body { padding: 17px; }
.place-body h3 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 18px; letter-spacing: -.03em; }
.place-meta { min-height: 20px; margin: 4px 0 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 12px; }
.place-menu { min-height: 20px; margin: 0 0 13px; color: var(--ink); font-size: 13px; }
.place-actions { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--line); }
.place-actions a, .place-actions button { border: 0; background: transparent; color: var(--orange-dark); font-size: 12px; font-weight: 800; text-decoration: none; cursor: pointer; }
.place-actions button { color: var(--muted); }
.place-actions .remove-place { color: #b64b42; }
.list-empty { padding: 70px 20px 110px; text-align: center; }
.list-empty h2 { margin: 18px 0 6px; font-size: 21px; }
.list-empty p { margin: 0 0 20px; color: var(--muted); font-size: 14px; }
.empty-dish { position: relative; width: 78px; height: 34px; margin: auto; border: 4px solid var(--ink); border-radius: 0 0 45px 45px; border-top: 0; }
.empty-dish::before { content: ""; position: absolute; left: -13px; right: -13px; top: -7px; height: 4px; border-radius: 5px; background: var(--ink); }
.empty-dish i { position: absolute; width: 32px; height: 32px; left: 19px; top: -38px; border: 4px solid var(--orange); border-radius: 50% 50% 50% 9px; transform: rotate(-45deg); }

.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; padding-bottom: 45px; }
.profile-card { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.profile-card strong { display: block; font-size: 17px; }
.profile-card span { display: block; margin-top: 6px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.profile-main { display: flex; align-items: center; gap: 16px; }
.profile-letter { display: grid; place-items: center; width: 56px; height: 56px; flex: 0 0 auto; border: 1px solid var(--ink); border-radius: 50%; background: var(--yellow); font-weight: 900; }
.install-card { display: grid; grid-template-columns: 42px 1fr auto; gap: 14px; align-items: center; }
.profile-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; color: white; background: var(--orange); font-weight: 900; }
.outline-button { min-height: 38px; padding: 0 12px; border: 1px solid var(--ink); border-radius: 11px; background: transparent; font-size: 12px; font-weight: 850; cursor: pointer; }
.upcoming { grid-row: span 2; min-height: 260px; display: flex; flex-direction: column; justify-content: flex-end; color: white; background: var(--ink); }
.upcoming h2 { margin: 0 0 28px; font-size: 32px; line-height: 1.18; letter-spacing: -.05em; }
.progress-track { height: 9px; overflow: hidden; background: rgba(255,255,255,.13); border-radius: 999px; }
.progress-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--yellow); transition: width .5s ease; }
.data-card > div { display: flex; gap: 18px; margin-top: 20px; }
.danger-button { padding: 6px 0; border: 0; color: #bd4137; background: transparent; font-weight: 800; cursor: pointer; }

.sheet-backdrop { position: fixed; z-index: 800; inset: 0; background: rgba(22,18,15,.48); backdrop-filter: blur(4px); }
.add-sheet { position: fixed; z-index: 850; left: 50%; bottom: 0; width: min(680px, 100%); max-height: calc(100dvh - 24px); overflow-y: auto; padding: 14px 28px calc(28px + var(--safe-bottom)); border-radius: 28px 28px 0 0; background: var(--paper); box-shadow: 0 -20px 70px rgba(35,24,17,.2); transform: translateX(-50%); animation: sheet-in .28s cubic-bezier(.2,.8,.2,1) both; }
@keyframes sheet-in { from { transform: translate(-50%, 100%); } }
.sheet-handle { width: 42px; height: 5px; margin: 0 auto 20px; border-radius: 99px; background: var(--line); }
.sheet-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 22px; }
.sheet-top h2 { margin: 0; font-size: 28px; letter-spacing: -.05em; }
.icon-button { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; background: transparent; font-size: 27px; line-height: 1; cursor: pointer; }
.sheet-lede { margin: 0 0 17px; color: var(--muted); font-size: 14px; }
.url-box { display: block; padding: 13px 15px 10px; border: 1px solid var(--line); border-radius: 17px; background: var(--cream); transition: border-color .2s, box-shadow .2s; }
.url-box:focus-within { border-color: var(--orange); box-shadow: 0 0 0 4px rgba(255,90,54,.1); }
.url-box > span, .candidate-fields label > span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 10px; font-weight: 850; letter-spacing: .04em; }
.url-box textarea { display: block; width: 100%; resize: none; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 14px; line-height: 1.5; word-break: break-all; }
.paste-button { margin: 10px 0 18px; padding: 5px 0; border: 0; color: var(--orange-dark); background: transparent; font-size: 12px; font-weight: 800; cursor: pointer; }
.supported { display: flex; justify-content: center; flex-wrap: wrap; gap: 7px; margin-top: 17px; }
.supported span { padding: 5px 9px; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); font-size: 10px; }
.loading-step { min-height: 360px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.scan-visual { position: relative; display: grid; place-items: center; width: 180px; height: 180px; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); font-size: 12px; overflow: hidden; }
.scan-visual::before, .scan-visual::after { content: ""; position: absolute; border: 1px dashed var(--line); border-radius: 50%; }
.scan-visual::before { inset: 28px; }
.scan-visual::after { inset: 58px; background: var(--orange); border: 0; }
.scan-visual i { position: absolute; z-index: 2; width: 20px; height: 20px; border: 5px solid white; border-radius: 50%; }
.scan-visual span { position: absolute; z-index: 3; bottom: 17px; }
.scan-visual::selection { background: transparent; }
.scan-visual > i::after { content: ""; position: absolute; width: 90px; height: 2px; top: 5px; left: -40px; background: var(--yellow); box-shadow: 0 0 12px var(--yellow); animation: scan 1.25s ease-in-out infinite; }
@keyframes scan { 0%,100% { transform: translateY(-42px); } 50% { transform: translateY(42px); } }
.loading-step > p { color: var(--muted); font-size: 13px; }
.source-preview { display: flex; align-items: center; gap: 13px; margin-bottom: 25px; padding: 11px; border: 1px solid var(--line); border-radius: 17px; background: var(--cream); }
.source-thumb { width: 82px; height: 58px; flex: 0 0 auto; object-fit: cover; border-radius: 11px; background: #e7ded2; }
.source-preview div { min-width: 0; }
.source-preview b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.source-preview span { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.confirm-head { display: flex; align-items: flex-end; justify-content: space-between; }
.confirm-head h3 { margin: 0; font-size: 21px; letter-spacing: -.04em; }
.confirm-head > span { color: var(--orange); font-size: 12px; font-weight: 900; }
.confirm-note { margin: 8px 0 17px; color: var(--muted); font-size: 12px; }
.candidate-list { display: flex; flex-direction: column; gap: 10px; }
.candidate { display: flex; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--cream); }
.candidate-check { position: relative; flex: 0 0 auto; padding-top: 2px; }
.candidate-check input { position: absolute; opacity: 0; }
.candidate-check i { display: block; width: 21px; height: 21px; border: 1.5px solid #aaa097; border-radius: 7px; background: white; }
.candidate-check input:checked + i { border-color: var(--orange); background: var(--orange); }
.candidate-check input:checked + i::after { content: ""; position: absolute; left: 6px; top: 6px; width: 7px; height: 4px; border-left: 2px solid white; border-bottom: 2px solid white; transform: rotate(-45deg); }
.candidate-fields { flex: 1; min-width: 0; }
.candidate-fields label { display: block; }
.candidate-fields input { width: 100%; padding: 7px 0 8px; border: 0; border-bottom: 1px solid var(--line); outline: 0; background: transparent; color: var(--ink); font-size: 13px; }
.candidate-fields label:first-child input { font-size: 16px; font-weight: 850; }
.candidate-fields label > span { margin: 0; }
.candidate-fields label small { font-weight: 500; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-top: 11px; }
.candidate-fields > label:nth-of-type(2) { margin-top: 11px; }
.candidate-reason { margin: 8px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.add-another { width: 100%; margin: 9px 0 17px; padding: 11px; border: 1px dashed #cfc3b6; border-radius: 13px; color: var(--muted); background: transparent; font-size: 12px; font-weight: 750; cursor: pointer; }
.status-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 12px; padding: 5px; border-radius: 15px; background: #efe8df; }
.status-choice button { min-height: 39px; border: 0; border-radius: 11px; color: var(--muted); background: transparent; font-size: 13px; font-weight: 800; cursor: pointer; }
.status-choice button.active { color: var(--ink); background: white; box-shadow: 0 4px 12px rgba(64,42,24,.08); }
.toast { position: fixed; z-index: 1000; left: 50%; bottom: calc(98px + var(--safe-bottom)); transform: translate(-50%, 20px); max-width: calc(100% - 40px); padding: 12px 17px; border-radius: 12px; background: var(--ink); color: white; font-size: 13px; font-weight: 700; box-shadow: 0 12px 30px rgba(0,0,0,.25); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.share-page { display: grid; place-items: center; min-height: 100dvh; }
.share-loading { display: flex; flex-direction: column; align-items: center; text-align: center; }
.share-loading .brand-mark { width: 58px; height: 58px; margin-bottom: 14px; padding: 13px 11px 10px; border-radius: 18px 18px 23px 23px; }
.share-loading strong { font-size: 27px; letter-spacing: -.06em; }
.share-loading p { color: var(--muted); }

@media (max-width: 900px) {
  .hero-orbit { right: -135px; opacity: .9; }
  .home-hero h1, .hero-copy, .hero-cta, .home-hero .kicker { max-width: 66%; }
  .saved-grid { grid-template-columns: repeat(2, 1fr); }
  .promise-grid { grid-template-columns: 1fr 1fr; }
  .promise-grid article:last-child { grid-column: 1 / -1; }
  .profile-grid { grid-template-columns: 1fr; }
  .upcoming { grid-row: auto; }
}

@media (max-width: 640px) {
  .content-width { width: min(100% - 30px, 1100px); }
  .topbar { height: 60px; padding-inline: 16px; }
  main { padding-top: 60px; }
  .brand { font-size: 20px; }
  .brand-mark { width: 28px; height: 28px; }
  .avatar { width: 34px; height: 34px; }
  .home-hero { min-height: 548px; padding: 52px 20px 55px; }
  .home-hero::after { right: -15px; bottom: -48px; font-size: 135px; }
  .home-hero h1, .hero-copy, .hero-cta, .home-hero .kicker { max-width: 100%; }
  .home-hero h1 { font-size: clamp(42px, 13vw, 58px); line-height: 1.07; }
  .hero-copy { margin-top: 18px; font-size: 15px; line-height: 1.65; }
  .desktop-only { display: none; }
  .hero-orbit { width: 220px; height: 220px; right: -79px; top: auto; bottom: 12px; opacity: .55; }
  .hero-orbit::before { inset: 30px; }
  .hero-orbit::after { inset: 64px; }
  .orbit-pin { width: 50px; height: 50px; }
  .orbit-pin i { inset: 15px; }
  .orbit-card { min-width: 76px; padding: 8px 10px; border-radius: 12px; }
  .orbit-card b { font-size: 11px; }
  .orbit-card small { font-size: 8px; }
  .orbit-a { left: -10px; top: 37px; }
  .orbit-b { right: -10px; top: 47px; }
  .orbit-c { left: 37px; bottom: 10px; }
  .stats-strip { margin: -24px 0 59px; padding-block: 17px; }
  .stats-strip strong { font-size: 22px; }
  .stats-strip span { font-size: 10px; }
  .empty-onboarding { grid-template-columns: 1fr; gap: 19px; margin-bottom: 65px; }
  .empty-number { font-size: 54px; }
  .empty-onboarding h2 { margin-bottom: 24px; font-size: 31px; }
  .empty-onboarding li { grid-template-columns: 1fr; gap: 4px; padding-left: 34px; }
  .promise { padding-top: 64px; padding-bottom: 70px; }
  .promise > h2 { margin-bottom: 31px; font-size: 43px; }
  .promise-grid { grid-template-columns: 1fr; }
  .promise-grid article:last-child { grid-column: auto; }
  .promise-grid article { padding: 22px; }
  .promise-grid h3 { margin-top: 24px; }
  .page-head { padding-top: 37px; padding-bottom: 24px; }
  .page-head h1 { font-size: 38px; }
  .saved-grid { grid-template-columns: 1fr; }
  .place-visual { height: 170px; }
  .map-wrap { height: calc(100dvh - 184px); min-height: 420px; }
  .profile-card { padding: 20px; }
  .install-card { grid-template-columns: 42px 1fr; }
  .install-card .outline-button { grid-column: 1 / -1; }
  .bottom-nav { width: calc(100% - 20px); grid-template-columns: repeat(5, 1fr); bottom: max(7px, var(--safe-bottom)); border-radius: 22px; }
  .bottom-nav .nav-add > span { border-color: var(--cream); }
  .add-sheet { padding-inline: 18px; }
  .sheet-top h2 { font-size: 25px; }
  .field-row { grid-template-columns: 1fr; gap: 11px; }
  .toast { bottom: calc(91px + var(--safe-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* v0.2 — friend-first social experience */
.social-shell { overflow-x: clip; }
.social-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr); min-height: 640px; overflow: hidden; padding: 90px max(20px, calc((100% - 1100px) / 2)) 80px; color: white; background: var(--ink); isolation: isolate; }
.social-hero::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(circle at 83% 20%, rgba(255,216,77,.2), transparent 24%), radial-gradient(circle at 17% 102%, rgba(255,90,54,.34), transparent 39%); }
.social-hero::after { content: "1"; position: absolute; z-index: -1; right: -35px; bottom: -210px; color: rgba(255,255,255,.035); font-size: 720px; font-weight: 950; line-height: 1; letter-spacing: -.15em; }
.social-hero-copy { position: relative; z-index: 2; align-self: center; }
.social-hero-copy h1 { max-width: 690px; margin: 0; font-size: clamp(50px, 6vw, 82px); line-height: 1.04; letter-spacing: -.075em; }
.social-hero-copy h1 em { color: var(--yellow); font-style: normal; }
.social-hero-copy > p:not(.kicker) { margin: 26px 0 31px; color: rgba(255,255,255,.69); font-size: 18px; line-height: 1.75; }
.guest-start { color: var(--ink); background: var(--yellow); box-shadow: none; }
.rank-sculpture { position: relative; align-self: center; height: 430px; perspective: 1000px; }
.rank-tile { position: absolute; display: flex; flex-direction: column; justify-content: flex-end; width: 230px; min-height: 250px; padding: 27px; overflow: hidden; border: 1px solid rgba(255,255,255,.15); border-radius: 28px; box-shadow: 0 28px 65px rgba(0,0,0,.35); }
.rank-tile > span { position: absolute; right: 15px; top: -26px; font-size: 145px; font-weight: 950; line-height: 1; letter-spacing: -.1em; opacity: .14; }
.rank-tile b { font-size: 22px; line-height: 1.15; letter-spacing: -.04em; }
.rank-tile small { margin-top: 10px; font-size: 11px; opacity: .65; }
.tile-1 { z-index: 3; left: 50%; top: 54px; color: var(--ink); background: var(--yellow); transform: translateX(-50%) rotate(-2deg); }
.tile-1 > span { opacity: .1; }
.tile-2 { z-index: 2; left: 3%; top: 125px; min-height: 218px; background: var(--orange); transform: rotate(-13deg); }
.tile-3 { z-index: 1; right: 0; top: 132px; min-height: 215px; background: #3474d4; transform: rotate(11deg); }
.social-proof { display: grid; grid-template-columns: .85fr 1.15fr; gap: 90px; padding-block: 105px; }
.proof-intro h2 { margin: 0; font-size: clamp(35px, 4.2vw, 56px); line-height: 1.12; letter-spacing: -.06em; }
.loop-list article { display: grid; grid-template-columns: 55px 1fr; gap: 20px; padding: 23px 0; border-top: 1px solid var(--line); }
.loop-list article:last-child { border-bottom: 1px solid var(--line); }
.loop-list article > b { color: var(--orange); font-size: 12px; letter-spacing: .08em; }
.loop-list h3 { margin: -4px 0 7px; font-size: 20px; letter-spacing: -.035em; }
.loop-list p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.save-secondary { padding: 85px 0 125px; color: white; background: var(--orange); }
.save-secondary-inner { position: relative; }
.save-secondary .eyebrow { color: var(--yellow); }
.save-secondary h2 { margin: 0; font-size: clamp(43px, 6vw, 70px); line-height: 1.05; letter-spacing: -.07em; }
.save-secondary p:last-child { max-width: 510px; margin: 24px 0 0; color: rgba(255,255,255,.78); line-height: 1.75; }

.member-feed { padding-top: 64px; padding-bottom: 70px; }
.member-greeting { position: relative; padding-right: 160px; margin-bottom: 42px; }
.member-greeting h1 { margin: 0; font-size: clamp(36px, 5vw, 60px); line-height: 1.08; letter-spacing: -.06em; }
.invite-chip { position: absolute; right: 0; bottom: 7px; min-height: 42px; padding: 0 16px; border: 1px solid var(--ink); border-radius: 999px; background: transparent; font-size: 12px; font-weight: 850; cursor: pointer; }
.feed-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
.feed-card { min-width: 0; padding: 21px; border: 1px solid var(--line); border-radius: 24px; background: var(--paper); }
.feed-person { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; }
.feed-person i, .friend-avatar { display: grid; place-items: center; border-radius: 50%; background: var(--yellow); font-style: normal; font-weight: 900; }
.feed-person i { width: 40px; height: 40px; font-size: 12px; }
.feed-person b, .feed-person span { display: block; }
.feed-person span, .feed-person time { color: var(--muted); font-size: 11px; }
.feed-place { margin-top: 20px; padding: 23px; border-radius: 18px; color: white; background: var(--ink); }
.feed-place small { color: var(--yellow); font-weight: 900; letter-spacing: .08em; }
.feed-place h2 { margin: 18px 0 3px; font-size: 25px; letter-spacing: -.045em; }
.feed-place p { margin: 0; color: rgba(255,255,255,.6); font-size: 12px; }
.social-empty { max-width: 560px; margin: 75px auto; padding: 50px; text-align: center; border: 1px solid var(--line); border-radius: 30px; background: var(--paper); }
.empty-faces { display: flex; justify-content: center; margin-bottom: 24px; }
.empty-faces i { display: grid; place-items: center; width: 53px; height: 53px; margin-left: -8px; border: 4px solid var(--paper); border-radius: 50%; background: var(--yellow); font-style: normal; font-weight: 900; }
.empty-faces i:nth-child(n+2) { color: white; background: var(--ink); }
.social-empty h2 { margin: 0; font-size: 30px; line-height: 1.2; letter-spacing: -.05em; }
.social-empty > p:not(.eyebrow) { margin: 14px 0 24px; color: var(--muted); font-size: 14px; }

.rank-head { display: flex; align-items: flex-end; justify-content: space-between; }
.ranking-list { padding-bottom: 20px; }
.rank-row { display: grid; grid-template-columns: 68px minmax(0, 1fr) auto; align-items: center; min-height: 92px; padding: 12px 17px 12px 8px; border-top: 1px solid var(--line); }
.rank-row:last-child { border-bottom: 1px solid var(--line); }
.rank-first { min-height: 126px; margin-bottom: 12px; padding: 20px; border: 0; border-radius: 24px; color: white; background: var(--ink); }
.rank-number { color: var(--orange); font-size: 34px; font-weight: 950; text-align: center; letter-spacing: -.07em; }
.rank-first .rank-number { color: var(--yellow); font-size: 52px; }
.rank-info { min-width: 0; }
.rank-info h3 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 20px; letter-spacing: -.04em; }
.rank-info p { margin: 4px 0 0; overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.rank-first .rank-info h3 { font-size: 27px; }
.rank-first .rank-info p { color: rgba(255,255,255,.58); }
.rank-controls { display: flex; gap: 5px; }
.rank-controls button { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); cursor: pointer; }
.rank-controls button:disabled { opacity: .25; cursor: default; }
.rank-first .rank-controls button { color: white; border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.08); }
.rank-empty { padding: 65px 20px 76px; text-align: center; }
.rank-zero { display: block; color: var(--orange); font-size: 85px; font-weight: 950; line-height: 1; }
.rank-empty h2 { margin: 5px 0 7px; font-size: 25px; letter-spacing: -.04em; }
.rank-empty p { margin: 0 0 20px; color: var(--muted); }
.primary.small { min-height: 44px; border-radius: 14px; }
.want-section { padding: 60px 0 35px; }
.want-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.want-card { display: flex; flex-direction: column; justify-content: space-between; min-height: 150px; padding: 20px; border: 1px solid var(--line); border-radius: 21px; background: var(--paper); }
.want-card h3 { margin: 0; font-size: 18px; letter-spacing: -.035em; }
.want-card p { margin: 5px 0 20px; color: var(--muted); font-size: 12px; }
.want-card button { align-self: flex-start; padding: 7px 10px; border: 0; border-radius: 9px; color: white; background: var(--green); font-size: 11px; font-weight: 850; cursor: pointer; }
.want-empty { padding: 28px; border: 1px dashed #d9cfc2; border-radius: 18px; color: var(--muted); text-align: center; font-size: 13px; }

.friends-layout { display: grid; grid-template-columns: .86fr 1.14fr; gap: 18px; padding-bottom: 55px; }
.invite-card { grid-row: span 2; min-height: 370px; display: flex; flex-direction: column; justify-content: flex-end; padding: 30px; overflow: hidden; border-radius: 28px; color: white; background: var(--ink); }
.invite-card .eyebrow { color: var(--yellow); }
.invite-card h2 { margin: 0; font-size: 36px; line-height: 1.08; letter-spacing: -.055em; }
.invite-card > p:not(.eyebrow) { margin: 17px 0 29px; color: rgba(255,255,255,.63); font-size: 13px; line-height: 1.7; }
.invite-link { display: flex; overflow: hidden; margin-bottom: 9px; border: 1px solid rgba(255,255,255,.17); border-radius: 13px; }
.invite-link input { min-width: 0; flex: 1; padding: 0 13px; border: 0; outline: 0; color: rgba(255,255,255,.55); background: transparent; font-size: 11px; }
.invite-link button { min-height: 43px; padding: 0 14px; border: 0; color: var(--ink); background: var(--yellow); font-size: 11px; font-weight: 900; cursor: pointer; }
.primary.full { width: 100%; }
.invite-card .primary { background: var(--orange); }
.pending-invite { padding: 25px; border: 1px solid #f4c436; border-radius: 24px; background: #fff7cf; }
.pending-invite .friend-avatar { width: 46px; height: 46px; }
.pending-invite h2 { margin: 14px 0 3px; }
.pending-invite > p:not(.eyebrow) { margin: 0 0 15px; color: var(--muted); font-size: 12px; }
.friends-list-wrap, .friend-detail { min-height: 250px; padding: 25px; border: 1px solid var(--line); border-radius: 25px; background: var(--paper); }
.friend-row { width: 100%; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto 22px; gap: 11px; align-items: center; padding: 13px 0; border: 0; border-top: 1px solid var(--line); text-align: left; background: transparent; cursor: pointer; }
.friend-row i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--yellow); font-size: 12px; font-style: normal; font-weight: 900; }
.friend-row div { min-width: 0; }
.friend-row b, .friend-row span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friend-row span { color: var(--muted); font-size: 11px; }
.friend-row strong { font-size: 18px; }
.friend-row small { color: var(--muted); }
.friend-row em { color: var(--orange); font-style: normal; font-size: 18px; }
.friends-empty { padding: 45px 10px; text-align: center; }
.friends-empty p { margin: 0; font-weight: 800; }
.friends-empty span { color: var(--muted); font-size: 12px; }
.detail-close { padding: 0 0 18px; border: 0; color: var(--orange-dark); background: transparent; font-size: 12px; font-weight: 850; cursor: pointer; }
.friend-detail-head { display: flex; gap: 14px; align-items: center; margin-bottom: 22px; }
.friend-avatar { width: 52px; height: 52px; flex: 0 0 auto; }
.friend-detail-head h2 { margin: 0; font-size: 24px; letter-spacing: -.04em; }
.friend-detail-head p:last-child { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
.friend-ranks .rank-row { grid-template-columns: 48px 1fr; min-height: 72px; padding-inline: 0; }
.friend-ranks .rank-first { padding-inline: 14px; }
.friend-no-rank { padding: 35px 10px; color: var(--muted); text-align: center; font-size: 13px; }

.social-profile-grid { grid-template-columns: 1fr 1fr; }
.nickname-edit { display: flex; gap: 8px; margin-top: 17px; }
.nickname-edit input { min-width: 0; flex: 1; height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--cream); outline: none; }
.nickname-edit button { padding: 0 14px; border: 0; border-radius: 12px; color: white; background: var(--ink); font-weight: 800; cursor: pointer; }
.legacy-card button { margin-top: 17px; }

.modal-card { position: fixed; z-index: 860; left: 50%; top: 50%; width: min(480px, calc(100% - 30px)); max-height: calc(100dvh - 30px); overflow-y: auto; padding: 34px; border-radius: 28px; background: var(--paper); box-shadow: var(--shadow); transform: translate(-50%, -50%); animation: modal-in .24s ease both; }
@keyframes modal-in { from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)) scale(.98); } }
.brand-mark.large { width: 52px; height: 52px; margin-bottom: 28px; padding: 12px 10px 10px; border-radius: 16px 16px 21px 21px; }
.brand-mark.large i:nth-child(1) { height: 19px; }
.brand-mark.large i:nth-child(2) { height: 27px; }
.brand-mark.large i:nth-child(3) { height: 16px; }
.profile-sheet h2, .compare-sheet h2 { margin: 0; font-size: 34px; line-height: 1.12; letter-spacing: -.055em; }
.profile-sheet > p:not(.eyebrow), .compare-sheet > p:not(.eyebrow) { margin: 14px 0 23px; color: var(--muted); font-size: 13px; line-height: 1.65; }
.profile-sheet label { display: block; margin-bottom: 13px; padding: 12px 14px 8px; border: 1px solid var(--line); border-radius: 15px; background: var(--cream); }
.profile-sheet label span, .big-field > span, .social-fields label > span, .social-address > span { display: block; color: var(--muted); font-size: 10px; font-weight: 850; }
.profile-sheet input, .big-field input, .social-fields input, .social-address input { width: 100%; padding: 7px 0 3px; border: 0; outline: 0; background: transparent; }
.modal-cancel { width: 100%; margin-top: 8px; padding: 11px; border: 0; color: var(--muted); background: transparent; font-size: 12px; font-weight: 750; cursor: pointer; }
.social-add-sheet { width: min(620px, 100%); }
.big-field, .social-fields label, .social-address { display: block; padding: 12px 14px 9px; border: 1px solid var(--line); border-radius: 15px; background: var(--cream); }
.big-field input { font-size: 20px; font-weight: 850; }
.social-fields { margin: 10px 0; }
.social-address small { font-weight: 500; }
.source-import { width: 100%; display: flex; justify-content: space-between; gap: 20px; margin-top: 13px; padding: 17px; border: 1px dashed #d5cabd; border-radius: 15px; color: var(--ink); background: transparent; text-align: left; cursor: pointer; }
.source-import span { color: var(--orange-dark); font-size: 11px; }
.back-step { margin-bottom: 18px; padding: 0; border: 0; color: var(--orange-dark); background: transparent; font-size: 12px; font-weight: 850; cursor: pointer; }
.compare-sheet { width: min(650px, calc(100% - 30px)); }
.compare-choice { display: grid; grid-template-columns: 1fr 36px 1fr; align-items: center; gap: 9px; }
.compare-choice button { min-width: 0; min-height: 190px; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: 21px; border: 1px solid var(--line); border-radius: 21px; text-align: left; background: var(--cream); cursor: pointer; transition: transform .16s, border-color .16s; }
.compare-choice button:hover { border-color: var(--orange); transform: translateY(-3px); }
.compare-choice button:first-child { color: white; background: var(--orange); border-color: var(--orange); }
.compare-choice small { opacity: .65; font-size: 10px; font-weight: 850; }
.compare-choice b { margin-top: 35px; overflow-wrap: anywhere; font-size: 22px; line-height: 1.15; letter-spacing: -.04em; }
.compare-choice span { margin-top: 6px; opacity: .65; font-size: 11px; }
.compare-choice em { color: var(--muted); font-style: normal; font-size: 11px; font-weight: 900; text-align: center; }
.compare-progress { height: 4px; margin: 20px 0 4px; overflow: hidden; border-radius: 99px; background: var(--line); }
.compare-progress i { display: block; height: 100%; background: var(--orange); transition: width .2s; }

@media (max-width: 900px) {
  .social-hero { grid-template-columns: 1fr; padding-top: 70px; }
  .social-hero-copy { z-index: 5; }
  .rank-sculpture { position: absolute; right: -80px; bottom: 0; width: 520px; opacity: .55; }
  .social-hero-copy h1, .social-hero-copy > p { max-width: 65%; }
  .social-proof { gap: 50px; }
  .friends-layout { grid-template-columns: 1fr; }
  .invite-card { grid-row: auto; min-height: 330px; }
}

@media (max-width: 640px) {
  .social-hero { min-height: 655px; padding: 59px 20px 300px; }
  .social-hero-copy h1, .social-hero-copy > p { max-width: none; }
  .social-hero-copy h1 { font-size: clamp(42px, 13vw, 55px); }
  .social-hero-copy > p:not(.kicker) { margin: 18px 0 24px; font-size: 15px; }
  .rank-sculpture { right: -65px; bottom: -56px; width: 430px; height: 340px; transform: scale(.75); transform-origin: right bottom; opacity: .8; }
  .social-proof { grid-template-columns: 1fr; gap: 38px; padding-block: 70px; }
  .proof-intro h2 { font-size: 37px; }
  .save-secondary { padding: 65px 0 100px; }
  .save-secondary h2 { font-size: 47px; }
  .member-feed { padding-top: 42px; }
  .member-greeting { padding-right: 0; }
  .member-greeting h1 { font-size: 40px; }
  .invite-chip { position: static; margin-top: 18px; }
  .feed-list { grid-template-columns: 1fr; }
  .social-empty { margin: 45px 0; padding: 38px 20px; }
  .rank-head { align-items: center; }
  .rank-row { grid-template-columns: 50px minmax(0, 1fr) auto; min-height: 81px; padding-inline: 4px; }
  .rank-first { padding-inline: 12px; }
  .rank-info h3 { font-size: 17px; }
  .rank-first .rank-info h3 { font-size: 21px; }
  .rank-number { font-size: 27px; }
  .rank-first .rank-number { font-size: 39px; }
  .rank-controls { gap: 3px; }
  .rank-controls button { width: 30px; height: 30px; }
  .want-grid { grid-template-columns: 1fr; }
  .friends-layout { gap: 12px; }
  .invite-card { min-height: 340px; padding: 24px; }
  .invite-card h2 { font-size: 33px; }
  .friends-list-wrap, .friend-detail { padding: 20px; }
  .friend-row { grid-template-columns: 42px minmax(0, 1fr) auto 16px; }
  .friend-row small { display: none; }
  .social-profile-grid { grid-template-columns: 1fr; }
  .modal-card { padding: 26px 22px; border-radius: 24px; }
  .profile-sheet h2, .compare-sheet h2 { font-size: 29px; }
  .compare-choice { grid-template-columns: 1fr; }
  .compare-choice em { margin: -2px 0; }
  .compare-choice button { min-height: 125px; }
  .compare-choice b { margin-top: 20px; }
  .source-import { flex-direction: column; gap: 4px; }
}

/* v0.3 beta completion */
.beta-badge { margin-left: -4px; padding: 3px 6px; border-radius: 6px; color: white; background: var(--ink); font-size: 8px; font-weight: 900; letter-spacing: .08em; }
.rank-controls .rank-delete { color: #b43b32; }
.rank-first .rank-controls .rank-delete { color: #ff9e8d; }
.want-actions { display: flex; gap: 7px; align-items: center; }
.want-card .want-actions .want-delete { color: var(--muted); background: transparent; }
.detail-actions { display: flex; justify-content: space-between; align-items: flex-start; }
.remove-friend { padding: 0; border: 0; color: #b43b32; background: transparent; font-size: 11px; font-weight: 800; cursor: pointer; }
.common-places { margin: 3px 0 20px; padding: 18px; border-radius: 17px; background: #fff4c3; }
.common-places .eyebrow { margin-bottom: 5px; color: #9b6900; }
.common-places h3 { margin: 0 0 11px; font-size: 16px; letter-spacing: -.03em; }
.common-places h3 b { color: var(--orange); }
.common-places > div { display: flex; flex-wrap: wrap; gap: 6px; }
.common-places span { padding: 6px 9px; border-radius: 999px; background: white; font-size: 11px; font-weight: 750; }
.account-card { display: grid; grid-template-columns: 42px 1fr; gap: 14px; align-items: start; }
.account-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.plain-button, .profile-switch { padding: 8px 0; border: 0; color: var(--orange-dark); background: transparent; font-size: 12px; font-weight: 800; cursor: pointer; }
.feedback-card { grid-column: 1 / -1; }
.feedback-kinds { display: flex; gap: 7px; margin: 17px 0 10px; }
.feedback-kinds button { min-height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: transparent; font-size: 11px; font-weight: 800; cursor: pointer; }
.feedback-kinds button.active { color: white; border-color: var(--ink); background: var(--ink); }
.feedback-card textarea { display: block; width: 100%; min-height: 115px; margin-bottom: 10px; padding: 14px; resize: vertical; border: 1px solid var(--line); border-radius: 15px; outline: 0; color: var(--ink); background: var(--cream); line-height: 1.6; }
.feedback-card textarea:focus { border-color: var(--orange); box-shadow: 0 0 0 4px rgba(255,90,54,.08); }
.danger-card { grid-column: 1 / -1; border-color: #efd1cd; background: #fff9f7; }
.danger-button.boxed { margin-top: 17px; padding: 9px 12px; border: 1px solid #d66b61; border-radius: 11px; }
.profile-switch { display: block; width: 100%; margin-top: 5px; }
.consent-note { display: block; margin: 10px 0 0; color: var(--muted); font-size: 10px; text-align: center; }
.consent-note a, .legal-links a { color: var(--orange-dark); font-weight: 800; }
.legal-links { display: flex; justify-content: space-between; gap: 15px; margin-top: -30px; padding-bottom: 55px; color: var(--muted); font-size: 11px; }
.legal-brand { color: inherit; text-decoration: none; }
.legal-page { max-width: 760px; padding-top: 75px; padding-bottom: 100px; }
.legal-page h1 { margin: 0; font-size: clamp(40px, 6vw, 62px); letter-spacing: -.06em; }
.legal-updated { margin: 10px 0 55px; color: var(--muted); font-size: 12px; }
.legal-page section { padding: 26px 0; border-top: 1px solid var(--line); }
.legal-page section h2 { margin: 0 0 11px; font-size: 20px; letter-spacing: -.04em; }
.legal-page section p, .legal-page li { color: var(--muted); font-size: 14px; line-height: 1.8; }
.legal-page section p { margin: 0; }
.legal-page ul { margin: 0 0 10px; padding-left: 21px; }
.legal-page a:not(.primary) { color: var(--orange-dark); }
.legal-back { margin-top: 25px; text-decoration: none; }
.recovery-sheet > h2 { margin: 0; font-size: 34px; line-height: 1.12; letter-spacing: -.055em; }
.recovery-sheet > p:not(.eyebrow) { margin: 14px 0 23px; color: var(--muted); font-size: 13px; line-height: 1.65; }
.recovery-code { display: flex; overflow: hidden; margin-bottom: 13px; border: 1px solid var(--ink); border-radius: 15px; background: var(--cream); }
.recovery-code code { min-width: 0; flex: 1; padding: 15px 12px; overflow-x: auto; color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; font-weight: 850; letter-spacing: .035em; white-space: nowrap; }
.recovery-code button { padding: 0 15px; border: 0; color: white; background: var(--ink); font-size: 11px; font-weight: 900; cursor: pointer; }

@media (max-width: 640px) {
  .rank-controls { flex-wrap: wrap; justify-content: flex-end; width: 65px; }
  .rank-controls button { width: 29px; height: 29px; }
  .account-actions { align-items: flex-start; flex-direction: column; gap: 2px; }
  .feedback-kinds { overflow-x: auto; }
  .feedback-kinds button { flex: 0 0 auto; }
  .recovery-sheet > h2 { font-size: 29px; }
}