/* Matching Site — front-end styles */ :root { --ms-primary: #7c3aed; --ms-primary-dark: #6d28d9; --ms-like: #16a34a; --ms-pass: #dc2626; --ms-bg: #ffffff; /* page / app background */ --ms-card: #ffffff; /* raised surfaces: cards, forms, chips */ --ms-input: #ffffff; /* form fields */ --ms-border: #e5e7eb; --ms-text: #1f2937; --ms-muted: #6b7280; --ms-hover: #f9fafb; --ms-chat-bg: #fafafa; --ms-msg-them: #eef0f3; --ms-tag-bg: #f5f3ff; --ms-photo-ph: #f3f4f6; /* photo placeholder */ --ms-skeleton: #e5e7eb; --ms-skeleton-hi: #f3f4f6; --ms-radius: 12px; } /* Dark theme: toggled by adding .ms-dark to (persisted in localStorage). */ html.ms-dark { --ms-bg: #0f1115; --ms-card: #1b1f27; --ms-input: #1b1f27; --ms-border: #2c313c; --ms-text: #e5e7eb; --ms-muted: #9ca3af; --ms-hover: #232833; --ms-chat-bg: #14171d; --ms-msg-them: #262b34; --ms-tag-bg: #2a2540; --ms-photo-ph: #262b34; --ms-skeleton: #2c313c; --ms-skeleton-hi: #363c48; } html.ms-dark body { background: var(--ms-bg); color: var(--ms-text); } /* ---------- Notices ---------- */ .ms-notice { padding: 12px 16px; border-radius: var(--ms-radius); background: var(--ms-hover); color: var(--ms-text); margin: 12px 0; border: 1px solid var(--ms-border); } .ms-notice-success { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; } .ms-notice-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; } .ms-notice-error { background: #fef2f2; border-color: #fecaca; color: #991b1b; } /* ---------- Forms ---------- */ .ms-form { max-width: 520px; margin: 0 auto; padding: 24px; background: var(--ms-bg); border: 1px solid var(--ms-border); border-radius: var(--ms-radius); display: flex; flex-direction: column; gap: 14px; } .ms-form h2 { margin: 0 0 6px; } .ms-form label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 14px; color: var(--ms-text); } .ms-form input[type="text"], .ms-form input[type="email"], .ms-form input[type="password"], .ms-form input[type="date"], .ms-form input[type="number"], .ms-form select, .ms-form textarea { padding: 10px 12px; border: 1px solid var(--ms-border); border-radius: 8px; font-size: 15px; font-weight: 400; width: 100%; box-sizing: border-box; background: var(--ms-input); color: var(--ms-text); } .ms-form small { font-weight: 400; color: var(--ms-muted); } .ms-form fieldset { border: 1px solid var(--ms-border); border-radius: 8px; padding: 10px 14px; } .ms-form fieldset legend { font-weight: 600; font-size: 14px; padding: 0 6px; } .ms-langs label, .ms-terms { flex-direction: row !important; align-items: center; gap: 8px !important; font-weight: 400 !important; } .ms-langs { display: flex; gap: 18px; flex-wrap: wrap; } /* ---------- Buttons ---------- */ .ms-btn { display: inline-block; padding: 10px 18px; border: 1px solid var(--ms-border); border-radius: 999px; background: var(--ms-card); color: var(--ms-text); font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: none; transition: background .15s, transform .1s; } .ms-btn:hover { background: var(--ms-hover); } .ms-btn-primary { background: var(--ms-primary); border-color: var(--ms-primary); color: #fff; } .ms-btn-primary:hover { background: var(--ms-primary-dark); color: #fff; } .ms-btn-small { padding: 5px 12px; font-size: 13px; } /* ---------- Profile cards ---------- */ .ms-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; margin-top: 18px; } .ms-card { background: var(--ms-bg); border: 1px solid var(--ms-border); border-radius: var(--ms-radius); overflow: hidden; display: flex; flex-direction: column; } .ms-card-photo { position: relative; aspect-ratio: 4 / 5; background: var(--ms-photo-ph) center / cover no-repeat; display: flex; align-items: center; justify-content: center; } .ms-card-nophoto { font-size: 42px; opacity: .35; } .ms-badge-verified { position: absolute; top: 10px; right: 10px; background: var(--ms-like); color: #fff; border-radius: 999px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; font-size: 14px; } .ms-badge-verified-inline { font-size: 13px; color: var(--ms-like); font-weight: 600; margin-left: 8px; } .ms-card-body { padding: 12px 14px 14px; } .ms-card-name { margin: 0 0 4px; font-size: 18px; } .ms-card-meta { margin: 0 0 6px; color: var(--ms-muted); font-size: 13px; display: flex; gap: 12px; flex-wrap: wrap; } .ms-card-bio { margin: 0 0 8px; font-size: 14px; color: var(--ms-text); } .ms-card-interests { margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 6px; } .ms-tag { background: var(--ms-tag-bg); color: var(--ms-primary-dark); border-radius: 999px; padding: 3px 10px; font-size: 12px; } .ms-card-safety { margin: 0; display: flex; gap: 8px; } /* ---------- Photo grid (profile edit) ---------- */ .ms-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin-bottom: 10px; } .ms-photo-item { margin: 0; } .ms-photo-item img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; display: block; } .ms-photo-delete { flex-direction: row !important; font-weight: 400 !important; font-size: 12px !important; gap: 4px !important; align-items: center; color: var(--ms-pass) !important; } /* ---------- Filter form ---------- */ .ms-filter-form { max-width: none; } .ms-filter-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; } .ms-filter-row label { flex: 1 1 120px; } .ms-filter-row .ms-btn { flex: 0 0 auto; } /* ---------- Swipe deck ---------- */ .ms-swipe { max-width: 420px; margin: 0 auto; text-align: center; } .ms-swipe-deck { position: relative; height: 560px; max-height: 75vh; } .ms-swipe-card { position: absolute; inset: 0; transition: transform .3s ease, opacity .3s ease; touch-action: pan-y; cursor: grab; } .ms-swipe-card:active { cursor: grabbing; } .ms-swipe-card .ms-card { height: 100%; box-shadow: 0 8px 24px rgba(0,0,0,.12); } .ms-swipe-card .ms-card-photo { flex: 1 1 auto; aspect-ratio: auto; min-height: 0; } .ms-swipe-card.ms-fly-right { transform: translateX(120%) rotate(18deg); opacity: 0; } .ms-swipe-card.ms-fly-left { transform: translateX(-120%) rotate(-18deg); opacity: 0; } .ms-swipe-empty { margin-top: 40px; } .ms-swipe-actions { display: flex; justify-content: center; gap: 32px; margin-top: 18px; } .ms-swipe-btn { width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--ms-border); background: var(--ms-card); font-size: 26px; cursor: pointer; transition: transform .1s, box-shadow .1s; } .ms-swipe-btn:hover { transform: scale(1.08); box-shadow: 0 4px 14px rgba(0,0,0,.15); } .ms-swipe-pass { color: var(--ms-pass); border-color: var(--ms-pass); } .ms-swipe-like { color: var(--ms-like); border-color: var(--ms-like); } .ms-match-popup { position: fixed; inset: 0; background: rgba(124, 58, 237, .92); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 700; text-align: center; padding: 24px; z-index: 99999; cursor: pointer; } /* ---------- Match list ---------- */ .ms-match-list { list-style: none; margin: 0; padding: 0; } .ms-match-item { display: flex; align-items: center; gap: 14px; padding: 12px; border: 1px solid var(--ms-border); border-radius: var(--ms-radius); margin-bottom: 10px; background: var(--ms-bg); } .ms-match-avatar { width: 52px; height: 52px; border-radius: 50%; background: #e5e7eb center / cover no-repeat; flex: 0 0 auto; } .ms-match-info { flex: 1 1 auto; display: flex; flex-direction: column; } .ms-match-info small { color: var(--ms-muted); } /* ---------- Chat ---------- */ .ms-chat { max-width: 640px; margin: 0 auto; border: 1px solid var(--ms-border); border-radius: var(--ms-radius); background: var(--ms-bg); display: flex; flex-direction: column; height: 70vh; min-height: 420px; } .ms-chat-header { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--ms-border); } .ms-chat-header .ms-match-avatar { width: 40px; height: 40px; } .ms-chat-header-actions { margin-left: auto; display: flex; gap: 6px; } .ms-chat-messages { flex: 1 1 auto; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; background: var(--ms-chat-bg); } .ms-msg { max-width: 75%; padding: 9px 13px; border-radius: 16px; font-size: 15px; line-height: 1.4; word-break: break-word; } .ms-msg-theirs { align-self: flex-start; background: var(--ms-msg-them); color: var(--ms-text); border-bottom-left-radius: 4px; } .ms-msg-mine { align-self: flex-end; background: var(--ms-primary); color: #fff; border-bottom-right-radius: 4px; } .ms-msg img { max-width: 240px; width: 100%; border-radius: 10px; display: block; margin-top: 4px; } .ms-msg-time { display: block; font-size: 11px; opacity: .65; margin-top: 3px; } .ms-chat-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--ms-border); align-items: center; } .ms-chat-form input[type="text"] { flex: 1 1 auto; padding: 10px 14px; border: 1px solid var(--ms-border); border-radius: 999px; font-size: 15px; } .ms-chat-image-btn { font-size: 22px; cursor: pointer; padding: 4px 8px; } /* ---------- Report dialog ---------- */ .ms-report-dialog { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); display: flex; align-items: center; justify-content: center; z-index: 99998; padding: 20px; } .ms-report-dialog[hidden] { display: none; } .ms-report-dialog-inner { background: var(--ms-card); border-radius: var(--ms-radius); padding: 22px; max-width: 400px; width: 100%; display: flex; flex-direction: column; gap: 12px; } .ms-report-dialog-inner h3 { margin: 0; } .ms-report-dialog-inner label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 14px; } .ms-report-dialog-inner select, .ms-report-dialog-inner textarea { padding: 8px 10px; border: 1px solid var(--ms-border); border-radius: 8px; font-weight: 400; } .ms-report-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; } /* ---------- Japanese address autofill ---------- */ .ms-jp-address { display: flex; flex-direction: column; gap: 12px; } .ms-zip-row { display: flex; align-items: center; gap: 10px; } .ms-zip-row input { max-width: 160px; } .ms-zip-status { font-size: 13px; font-weight: 400; color: var(--ms-muted); flex: 1 1 auto; } /* ---------- Events / advisors / referral / community tags ---------- */ .ms-event-card { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; border: 1px solid var(--ms-border); border-radius: var(--ms-radius); padding: 14px 18px; margin-bottom: 12px; background: var(--ms-bg); } .ms-event-info h3 { margin: 0 0 4px; } .ms-event-info p { margin: 0; color: var(--ms-muted); font-size: 14px; } .ms-event-action { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ms-event-group { background: #f5f3ff; border: 1px solid #ddd6fe; border-radius: 8px; padding: 8px 14px; font-size: 14px; } .ms-advisor-chip { display: inline-block; background: #eff6ff; color: #1d4ed8; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 600; margin-left: 6px; vertical-align: middle; } .ms-advisor-item { display: flex; flex-direction: column; gap: 8px; } .ms-advisor-item .ms-consult-btn { align-self: center; } .ms-referral-box { border: 1px solid var(--ms-border); border-radius: var(--ms-radius); padding: 14px 18px; background: var(--ms-bg); } .ms-referral-row { display: flex; gap: 8px; } .ms-referral-row input { flex: 1 1 auto; padding: 9px 12px; border: 1px solid var(--ms-border); border-radius: 8px; font-size: 14px; color: var(--ms-muted); } .ms-referral-count { margin: 10px 0 0; } .ms-tag-community { background: #ecfdf5; color: #065f46; } .ms-filter-tags { flex: 1 1 100%; display: flex; gap: 14px; flex-wrap: wrap; } .ms-filter-tag { flex-direction: row !important; align-items: center; gap: 6px !important; font-weight: 400 !important; } /* ---------- Presence / notifications / video / calls ---------- */ .ms-presence { font-size: 12px; color: var(--ms-muted); display: inline-block; margin: 2px 0 6px; } .ms-presence-online { color: var(--ms-like); font-weight: 600; } .ms-chat-header-name { display: flex; flex-direction: column; line-height: 1.3; } .ms-card-video { width: 100%; max-height: 220px; border-radius: 8px; margin: 6px 0; background: #000; } .ms-bell-btn { border: none; background: none; font-size: 15px; cursor: pointer; padding: 3px 6px; vertical-align: middle; } .ms-unread-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; margin-left: 4px; border-radius: 999px; background: var(--ms-pass); color: #fff; font-size: 12px; font-weight: 700; vertical-align: middle; } .ms-call-modal { position: fixed; inset: 0; background: rgba(0, 0, 0, .85); z-index: 99997; display: flex; align-items: center; justify-content: center; padding: 20px; } .ms-call-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 520px; width: 100%; } .ms-call-local { width: 100%; border-radius: var(--ms-radius); background: #111; } .ms-call-status { color: #fff; text-align: center; margin: 0; } /* ---------- Admin warning banner ---------- */ .ms-warning-banner { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 99995; max-width: 480px; width: calc(100% - 32px); background: #fffbeb; border: 1px solid #fde68a; color: #92400e; border-radius: var(--ms-radius); padding: 14px 18px; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); } .ms-warning-banner p { margin: 6px 0 10px; } /* ---------- Legal pages ---------- */ .ms-legal { max-width: 720px; margin: 0 auto; line-height: 1.7; } .ms-legal h3 { margin: 22px 0 6px; } .ms-legal-updated { color: var(--ms-muted); font-size: 14px; } /* ---------- Language switcher ---------- */ .ms-lang-float { position: fixed; bottom: 16px; right: 16px; z-index: 99990; background: var(--ms-card); border: 1px solid var(--ms-border); border-radius: 999px; padding: 6px 10px; box-shadow: 0 4px 14px rgba(0, 0, 0, .12); } .ms-lang-link { padding: 3px 9px; border-radius: 999px; text-decoration: none; color: var(--ms-muted); font-size: 13px; font-weight: 600; } .ms-lang-link:hover { color: var(--ms-primary); } .ms-lang-active { background: var(--ms-primary); color: #fff !important; } /* ---------- Wallet / payments ---------- */ .ms-wallet { max-width: 720px; margin: 0 auto; } .ms-wallet h3 { margin-top: 28px; } .ms-wallet-balance { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .ms-coin-chip, .ms-premium-chip, .ms-boost-chip { display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; border: 1px solid var(--ms-border); background: var(--ms-card); } .ms-coin-chip { background: #fffbeb; border-color: #fde68a; color: #92400e; } .ms-premium-chip { background: #f5f3ff; border-color: #ddd6fe; color: var(--ms-primary-dark); } .ms-boost-chip { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; } .ms-package-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; } .ms-package { border: 1px solid var(--ms-border); border-radius: var(--ms-radius); padding: 16px; text-align: center; display: flex; flex-direction: column; gap: 8px; background: var(--ms-bg); } .ms-package-coins { font-size: 22px; font-weight: 700; } .ms-package-price { font-size: 18px; color: var(--ms-primary-dark); font-weight: 600; } .ms-spend-row { display: flex; flex-direction: column; gap: 10px; } .ms-spend-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; border: 1px solid var(--ms-border); border-radius: var(--ms-radius); padding: 12px 16px; background: var(--ms-bg); } .ms-spend-item small { color: var(--ms-muted); flex-basis: 100%; } .ms-premium-box { border: 1px solid #ddd6fe; background: #f5f3ff; border-radius: var(--ms-radius); padding: 16px 20px; } .ms-premium-features { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 4px; } .ms-premium-hint { font-size: 13px; color: var(--ms-primary-dark); align-self: center; } .ms-txn-wrap { overflow-x: auto; } .ms-txn-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; } .ms-txn-table th, .ms-txn-table td { padding: 8px 10px; border-bottom: 1px solid var(--ms-border); text-align: left; white-space: nowrap; } .ms-txn-pos { color: var(--ms-like); font-weight: 600; } .ms-txn-neg { color: var(--ms-pass); font-weight: 600; } .ms-txn-status { padding: 2px 10px; border-radius: 999px; font-size: 12px; background: #f3f4f6; } .ms-txn-completed { background: #ecfdf5; color: #065f46; } .ms-txn-pending { background: #fffbeb; color: #92400e; } .ms-txn-failed { background: #fef2f2; color: #991b1b; } /* Super Like button in the swipe deck */ .ms-swipe-super { color: #d97706; border-color: #d97706; font-size: 22px; } .ms-swipe-wallet { margin-top: 14px; display: flex; gap: 8px; justify-content: center; } /* ---------- Responsive ---------- */ @media (max-width: 600px) { .ms-form { padding: 16px; } .ms-swipe-deck { height: 65vh; } .ms-chat { height: 78vh; border-radius: 0; } .ms-msg { max-width: 85%; } } /* ---------- Search tabs (address / nearby) ---------- */ .ms-tabs { display: flex; gap: 8px; margin: 0 0 16px; flex-wrap: wrap; } .ms-tab-btn { padding: 10px 18px; border: 1px solid var(--ms-border); border-radius: 999px; background: #fff; color: var(--ms-text); font-size: 15px; font-weight: 600; cursor: pointer; transition: background .15s; } .ms-tab-btn:hover { background: #f9fafb; } .ms-tab-btn.ms-tab-active { background: var(--ms-primary); border-color: var(--ms-primary); color: #fff; } /* ---------- Nearby map (現在地検索) ---------- */ .ms-nearby-intro { color: var(--ms-muted); margin: 4px 0 12px; } .ms-nearby-status { min-height: 20px; font-size: 14px; color: var(--ms-muted); margin: 6px 0; } .ms-nearby-status-error { color: #991b1b; font-weight: 600; } .ms-nearby-manual { margin: 10px 0; } .ms-nearby-manual > label { font-weight: 600; font-size: 14px; display: block; margin-bottom: 4px; } .ms-nearby-manual-row { display: flex; gap: 8px; flex-wrap: wrap; } .ms-nearby-manual-row input { flex: 1; min-width: 200px; padding: 10px 12px; border: 1px solid var(--ms-border); border-radius: 8px; font-size: 15px; } .ms-nearby-radius { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 12px 0; } .ms-nearby-radius-label { font-weight: 600; font-size: 14px; margin-right: 4px; } .ms-radius-btn { padding: 5px 12px; border: 1px solid var(--ms-border); border-radius: 999px; background: #fff; font-size: 13px; font-weight: 600; color: var(--ms-text); cursor: pointer; transition: background .15s; } .ms-radius-btn:hover { background: #f3f4f6; } .ms-radius-btn.ms-radius-active { background: var(--ms-primary); border-color: var(--ms-primary); color: #fff; } .ms-nearby-map { height: 440px; border-radius: var(--ms-radius); border: 1px solid var(--ms-border); z-index: 0; /* keep Leaflet panes under the site header/popups */ } .ms-nearby-count { font-weight: 600; margin: 10px 0 4px; } .ms-nearby-privacy { font-size: 13px; color: var(--ms-muted); margin: 8px 0 0; } .ms-nearby-demo-note { font-size: 13px; color: #92400e; margin: 4px 0 0; } /* Member marker: round profile-photo chip */ .ms-geo-marker { background: none; border: none; } .ms-geo-icon { display: block; width: 44px; height: 44px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, .35); background-color: #ede9fe; background-size: cover; background-position: center; box-sizing: border-box; } .ms-geo-icon-empty { display: flex; align-items: center; justify-content: center; font-size: 22px; } .ms-geo-icon-you { display: block; width: 18px; height: 18px; border-radius: 50%; background: #2563eb; border: 3px solid #fff; box-shadow: 0 0 0 2px rgba(37, 99, 235, .35), 0 1px 4px rgba(0, 0, 0, .3); box-sizing: content-box; } /* Marker popup: mini profile */ .ms-geo-pop { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 4px 2px; min-width: 150px; text-align: center; } .ms-geo-pop-photo { width: 72px; height: 72px; border-radius: 50%; background-color: #ede9fe; background-size: cover; background-position: center; } .ms-geo-pop-nophoto { display: flex; align-items: center; justify-content: center; font-size: 26px; } .ms-geo-pop-name { font-size: 15px; } .ms-geo-pop-dist { color: var(--ms-muted); } @media (max-width: 600px) { .ms-nearby-map { height: 60vh; } } /* ---------- Dark/Light theme toggle button ---------- */ .ms-theme-btn { border: none; background: transparent; cursor: pointer; font-size: 16px; line-height: 1; padding: 3px 8px; border-radius: 999px; } .ms-theme-btn:hover { background: var(--ms-hover); } /* ---------- Skeleton loading (pulse placeholders) ---------- */ @keyframes ms-pulse { 0% { opacity: 1; } 50% { opacity: .45; } 100% { opacity: 1; } } .ms-skeleton-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; margin-top: 18px; } .ms-skeleton-card { border: 1px solid var(--ms-border); border-radius: var(--ms-radius); overflow: hidden; background: var(--ms-card); } .ms-skeleton-photo { aspect-ratio: 4 / 5; background: var(--ms-skeleton); animation: ms-pulse 1.2s ease-in-out infinite; } .ms-skeleton-body { padding: 12px 14px 16px; } .ms-skeleton-line { height: 12px; border-radius: 6px; background: var(--ms-skeleton); animation: ms-pulse 1.2s ease-in-out infinite; margin-bottom: 9px; } .ms-skeleton-line.w-60 { width: 60%; } .ms-skeleton-line.w-40 { width: 40%; } .ms-skeleton-line.w-80 { width: 80%; } .ms-skeleton-list .ms-skeleton-row { display: flex; align-items: center; gap: 14px; padding: 12px; border: 1px solid var(--ms-border); border-radius: var(--ms-radius); margin-bottom: 10px; background: var(--ms-card); } .ms-skeleton-avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--ms-skeleton); flex: 0 0 auto; animation: ms-pulse 1.2s ease-in-out infinite; } .ms-skeleton-row .ms-skeleton-lines { flex: 1 1 auto; } /* ---------- Swipe LIKE / SKIP overlay labels ---------- */ .ms-swipe-card { position: absolute; } .ms-swipe-label { position: absolute; top: 24px; padding: 6px 16px; border: 4px solid; border-radius: 10px; font-size: 30px; font-weight: 800; letter-spacing: 2px; opacity: 0; pointer-events: none; z-index: 5; text-transform: uppercase; transition: opacity .1s linear; } .ms-swipe-label-like { left: 20px; color: var(--ms-like); border-color: var(--ms-like); transform: rotate(-16deg); } .ms-swipe-label-skip { right: 20px; color: var(--ms-pass); border-color: var(--ms-pass); transform: rotate(16deg); } /* Color tint while dragging toward a decision. */ .ms-swipe-card.ms-tilt-like .ms-card { box-shadow: 0 8px 28px rgba(22,163,74,.4); } .ms-swipe-card.ms-tilt-skip .ms-card { box-shadow: 0 8px 28px rgba(220,38,38,.4); } /* Stronger throw-off animation (overrides the base fly rules). */ .ms-swipe-card.ms-fly-right { transform: translateX(140%) rotate(24deg) !important; opacity: 0; } .ms-swipe-card.ms-fly-left { transform: translateX(-140%) rotate(-24deg) !important; opacity: 0; } /* ---------- Onboarding ---------- */ .ms-onboard-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 100000; padding: 20px; } .ms-onboard-modal { background: var(--ms-card); color: var(--ms-text); border-radius: 18px; max-width: 440px; width: 100%; padding: 32px 28px 24px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.35); } .ms-onboard-emoji { font-size: 56px; line-height: 1; margin-bottom: 12px; } .ms-onboard-title { margin: 0 0 10px; font-size: 22px; } .ms-onboard-text { margin: 0 0 22px; color: var(--ms-muted); font-size: 15px; line-height: 1.6; } .ms-onboard-dots { display: flex; justify-content: center; gap: 8px; margin-bottom: 22px; } .ms-onboard-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ms-border); transition: background .2s, transform .2s; } .ms-onboard-dot.active { background: var(--ms-primary); transform: scale(1.25); } .ms-onboard-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .ms-onboard-skip { background: none; border: none; cursor: pointer; color: var(--ms-muted); font-size: 14px; font-weight: 600; } .ms-onboard-next { background: var(--ms-primary); color: #fff; border: none; border-radius: 999px; padding: 11px 26px; font-size: 15px; font-weight: 700; cursor: pointer; } .ms-onboard-next:hover { background: var(--ms-primary-dark); } /* ---------- Compatibility ---------- */ .ms-compat-chip { display: inline-block; margin: 2px 0 6px; padding: 3px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; } .ms-compat-high { background: #ecfdf5; color: #047857; } .ms-compat-mid { background: #fffbeb; color: #b45309; } .ms-compat-low { background: #fef2f2; color: #b91c1c; } html.ms-dark .ms-compat-high { background: #05372a; color: #6ee7b7; } html.ms-dark .ms-compat-mid { background: #3a2c07; color: #fcd34d; } html.ms-dark .ms-compat-low { background: #3a1414; color: #fca5a5; } .ms-compat-field .ms-compat-hint { font-weight: 400; color: var(--ms-muted); margin: 0 0 10px; font-size: 13px; } .ms-compat-q { flex-direction: row !important; align-items: center; justify-content: space-between; gap: 12px !important; font-weight: 400 !important; padding: 5px 0; border-bottom: 1px solid var(--ms-border); } .ms-compat-q span { flex: 1 1 auto; } .ms-compat-q select { flex: 0 0 auto; width: auto !important; min-width: 130px; } /* ---------- Icebreakers ---------- */ .ms-icebreakers { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--ms-border); } .ms-icebreakers-title { font-size: 13px; font-weight: 600; color: var(--ms-muted); width: 100%; } .ms-icebreaker { border: 1px solid var(--ms-border); background: var(--ms-card); color: var(--ms-text); border-radius: 999px; padding: 7px 14px; font-size: 13px; cursor: pointer; transition: background .15s, border-color .15s; } .ms-icebreaker:hover { background: var(--ms-tag-bg); border-color: var(--ms-primary); } /* ---------- Typing indicator ---------- */ .ms-typing { display: flex; align-items: center; gap: 6px; padding: 4px 16px 8px; font-size: 13px; color: var(--ms-muted); font-style: italic; } .ms-typing[hidden] { display: none; } .ms-typing-name { font-weight: 600; font-style: normal; } .ms-typing-dots { display: inline-flex; gap: 3px; } .ms-typing-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--ms-muted); animation: ms-typing-bounce 1.2s infinite ease-in-out; } .ms-typing-dots span:nth-child(2) { animation-delay: .18s; } .ms-typing-dots span:nth-child(3) { animation-delay: .36s; } @keyframes ms-typing-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } } /* ---------- Emoji / sticker picker ---------- */ .ms-emoji-btn { border: none; background: transparent; font-size: 22px; cursor: pointer; padding: 4px 6px; line-height: 1; } .ms-chat-form { position: relative; } .ms-emoji-panel { position: absolute; bottom: 100%; left: 8px; margin-bottom: 8px; width: 288px; max-height: 220px; overflow-y: auto; background: var(--ms-card); border: 1px solid var(--ms-border); border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.2); padding: 8px; display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; z-index: 50; } .ms-emoji-panel[hidden] { display: none; } .ms-emoji-item { border: none; background: transparent; font-size: 20px; cursor: pointer; padding: 4px; border-radius: 8px; line-height: 1; } .ms-emoji-item:hover { background: var(--ms-hover); } /* ---------- Profile completeness ---------- */ .ms-completeness { max-width: 520px; margin: 0 auto 16px; padding: 16px 20px; background: var(--ms-card); border: 1px solid var(--ms-border); border-radius: var(--ms-radius); } .ms-completeness-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .ms-completeness-pct { font-weight: 700; color: var(--ms-primary); font-size: 18px; } .ms-progress { height: 10px; background: var(--ms-hover); border-radius: 999px; overflow: hidden; } .ms-progress-bar { height: 100%; background: linear-gradient(90deg, var(--ms-primary), #a855f7); border-radius: 999px; transition: width .4s ease; } .ms-completeness-hint { margin: 12px 0 6px; font-size: 13px; color: var(--ms-muted); } .ms-completeness-list { margin: 0; padding-left: 18px; } .ms-completeness-list a { color: var(--ms-primary); text-decoration: none; } .ms-completeness-list a:hover { text-decoration: underline; } .ms-completeness-done { margin: 12px 0 0; color: var(--ms-like); font-weight: 600; } /* ---------- Profile badges ---------- */ .ms-badges { display: flex; flex-wrap: wrap; gap: 5px; margin: 2px 0 6px; } .ms-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; border: 1px solid transparent; } .ms-badge-verified-chip { background: #ecfdf5; color: #047857; } .ms-badge-active { background: #fff7ed; color: #c2410c; } .ms-badge-premium { background: #fef3c7; color: #92400e; } html.ms-dark .ms-badge-verified-chip { background: #05372a; color: #6ee7b7; } html.ms-dark .ms-badge-active { background: #3a1e08; color: #fdba74; } html.ms-dark .ms-badge-premium { background: #3a2c07; color: #fcd34d; } /* ---------- Advanced filter locked block ---------- */ .ms-adv-locked { flex: 1 1 100%; border: 1px dashed var(--ms-border); border-radius: var(--ms-radius); padding: 14px 18px; background: var(--ms-hover); text-align: center; } .ms-adv-locked-head { font-weight: 700; margin-bottom: 8px; } .ms-adv-locked-fields { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 8px; filter: blur(1px); opacity: .6; } .ms-adv-locked-fields span { background: var(--ms-card); border: 1px solid var(--ms-border); border-radius: 999px; padding: 4px 12px; font-size: 13px; } .ms-adv-locked-note { color: var(--ms-primary); font-weight: 600; margin: 6px 0 10px; } /* ---------- Who viewed me ---------- */ .ms-viewers { max-width: 640px; margin: 0 auto; } .ms-viewers-count { display: inline-block; background: var(--ms-primary); color: #fff; border-radius: 999px; padding: 2px 12px; font-size: 14px; margin-left: 6px; } .ms-locked { text-align: center; padding: 32px 20px; background: var(--ms-card); border: 1px solid var(--ms-border); border-radius: var(--ms-radius); } .ms-locked-icon { font-size: 44px; margin-bottom: 10px; } .ms-viewer-list { list-style: none; margin: 0; padding: 0; } .ms-viewer-item { display: flex; align-items: center; gap: 14px; padding: 12px; border: 1px solid var(--ms-border); border-radius: var(--ms-radius); margin-bottom: 10px; background: var(--ms-card); } .ms-viewer-info { flex: 1 1 auto; display: flex; flex-direction: column; } .ms-viewer-info small { color: var(--ms-muted); } /* ---------- Daily reward popup ---------- */ .ms-reward-popup { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 100001; padding: 20px; } .ms-reward-inner { background: var(--ms-card); color: var(--ms-text); border-radius: 20px; padding: 30px 34px; text-align: center; max-width: 340px; box-shadow: 0 20px 60px rgba(0,0,0,.4); animation: ms-reward-pop .35s cubic-bezier(.18,.89,.32,1.28); } @keyframes ms-reward-pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } } .ms-reward-emoji { font-size: 56px; line-height: 1; margin-bottom: 8px; } .ms-reward-inner h3 { margin: 0 0 12px; font-size: 20px; } .ms-reward-coins { font-size: 30px; font-weight: 800; color: #d97706; margin-bottom: 8px; } .ms-reward-streak { font-size: 15px; color: var(--ms-muted); margin-bottom: 18px; }