:root {
  color-scheme: dark;
  --background: #0b0d0f;
  --surface: #17191c;
  --surface-raised: #23262a;
  --coral: #ff5147;
  --orange: #ff9c35;
  --sage: #50b866;
  --text: #f7f7f4;
  --muted: #a6a7aa;
  --line: #3b3e43;
  --danger: #ff746c;
}
* { box-sizing: border-box; }
html { background: var(--background); }
body { margin: 0; min-height: 100vh; color: var(--text); background: radial-gradient(circle at top, #1b1e21 0, var(--background) 42rem); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: var(--coral); }
.hidden { display: none !important; }
.app-header { position: sticky; z-index: 10; top: 0; display: flex; min-height: 68px; align-items: center; justify-content: space-between; gap: 16px; padding: 14px max(20px, env(safe-area-inset-left)); background: rgba(11,13,15,.9); border-bottom: 1px solid var(--line); backdrop-filter: blur(16px); }
.wordmark { color: var(--text); font-size: 1.35rem; font-weight: 900; text-decoration: none; }.wordmark span { color: var(--coral); }
.header-actions { display: flex; align-items: center; gap: 10px; }.connection { color: var(--muted); font-size: .82rem; }
.app-main { width: min(100% - 28px, 980px); margin: 0 auto; padding: clamp(22px, 5vw, 52px) 0 calc(40px + env(safe-area-inset-bottom)); }
.auth-card { width: min(100%, 480px); margin: 3vh auto; padding: clamp(24px, 6vw, 42px); background: var(--surface); border: 1px solid var(--line); border-radius: 28px; box-shadow: 0 28px 80px rgba(0,0,0,.35); }
h1, h2, p { margin-top: 0; } h1 { margin-bottom: .7rem; font-size: clamp(2rem, 7vw, 3.6rem); line-height: 1.02; letter-spacing: -.035em; } h2 { margin-bottom: .55rem; }
.eyebrow { margin-bottom: .4rem; color: var(--coral); font-size: .78rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.muted { color: var(--muted); }.small { font-size: .88rem; }
.form-stack { display: grid; gap: 15px; }.form-stack label { display: grid; gap: 6px; font-weight: 700; }
input, select { width: 100%; min-height: 48px; padding: 10px 12px; color: var(--text); background: var(--background); border: 1px solid var(--line); border-radius: 12px; }
input[type="range"] { min-height: 32px; padding: 0; accent-color: var(--coral); border: 0; }
input:focus, select:focus, button:focus-visible, a:focus-visible { outline: 3px solid color-mix(in srgb, var(--coral) 38%, transparent); outline-offset: 2px; }
button { cursor: pointer; }.primary-button, .secondary-button, .danger-button { min-height: 50px; padding: 11px 18px; border-radius: 15px; font-weight: 850; }
.primary-button { color: white; background: var(--coral); border: 0; }.secondary-button { color: var(--text); background: transparent; border: 1px solid var(--line); }.danger-button { color: white; background: #a52f2a; border: 0; }
button:disabled { cursor: not-allowed; opacity: .48; }.text-button, .danger-text, .icon-button { padding: 8px; background: none; border: 0; }.text-button { color: var(--coral); }.danger-text { color: var(--danger); }.icon-button { color: var(--text); font-size: 1.6rem; }
.divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--muted); }.divider::before,.divider::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.form-message { min-height: 1.4rem; margin-top: 14px; color: var(--danger); font-weight: 700; }.form-message.success { color: var(--sage); }
.app-shell { padding-bottom: 82px; }.tab-bar { position: fixed; z-index: 12; right: 0; bottom: 0; left: 0; display: flex; justify-content: center; gap: 4px; padding: 8px 14px calc(8px + env(safe-area-inset-bottom)); background: rgba(23,25,28,.96); border-top: 1px solid var(--line); backdrop-filter: blur(16px); }.tab-bar button { flex: 1; max-width: 180px; min-height: 44px; color: var(--muted); background: none; border: 0; border-radius: 12px; font-weight: 800; }.tab-bar button.active { color: white; background: var(--coral); }
.panel { animation: enter .18s ease-out; } @keyframes enter { from { opacity: .4; transform: translateY(5px); } }
.welcome-row, .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }.welcome-row h1 { font-size: clamp(2rem, 8vw, 3.5rem); }.avatar { display: grid; width: 58px; height: 58px; flex: 0 0 auto; place-items: center; color: white; background: var(--sage) center/cover no-repeat; border-radius: 50%; font-weight: 900; }.avatar.has-image { border: 2px solid var(--sage); }
.centered-heading { position: relative; min-height: 84px; justify-content: center; padding-right: 64px; padding-left: 64px; text-align: center; }.centered-heading.heading-with-action { padding-right: 104px; padding-left: 104px; }.centered-heading .icon-button { position: absolute; top: 50%; left: 0; transform: translateY(-50%); }.centered-heading .heading-action { position: absolute; top: 50%; right: 0; transform: translateY(-50%); }
.notice { margin: 18px 0; padding: 14px 16px; color: var(--text); background: color-mix(in srgb, var(--coral) 20%, var(--surface)); border: 1px solid var(--coral); border-radius: 14px; }
.feature-card, .action-card, .restaurant-card { padding: clamp(18px, 4vw, 26px); background: var(--surface); border: 1px solid var(--line); border-radius: 22px; }
.action-grid, .content-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }.action-card { display: grid; gap: 8px; color: var(--text); text-align: left; }.action-card strong { font-size: 1.25rem; }.action-card span { color: var(--muted); }.join-card { cursor: default; }
.member-list { display: grid; gap: 10px; padding: 0; list-style: none; }.member-list li { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }.member-list li::after { content: "Ready"; color: var(--sage); font-size: .86rem; }#group-member-list li::after { content: none; }
.bottom-actions { display: grid; gap: 10px; margin-top: 20px; }.button-row { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }.split-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
fieldset { display: flex; flex-wrap: wrap; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; } fieldset legend { padding: 0 6px; font-weight: 850; } fieldset label { display: flex !important; align-items: center; gap: 7px; } fieldset input { width: auto; min-height: 0; accent-color: var(--coral); }
.switch-row { display: flex !important; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 0; }.switch-row span { display: grid; gap: 4px; }.switch-row small { color: var(--muted); font-weight: 400; }.switch-row input { width: 48px; min-height: 26px; accent-color: var(--coral); }
.restaurant-card { width: min(100%, 580px); margin: 14px auto; overflow: hidden; padding: 0; }.restaurant-photo { display: grid; min-height: 300px; place-items: center; background: linear-gradient(135deg, var(--sage), #9ac5a6); background-position: center; background-size: cover; font-size: 7rem; }.restaurant-copy { padding: 22px; }.restaurant-copy h2 { font-size: 2rem; }.link-row { display: flex; flex-wrap: wrap; gap: 8px; }.link-row a { padding: 8px 10px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; }
.swipe-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px; }.swipe-actions button { display: grid; width: 68px; height: 68px; place-items: center; border-radius: 50%; font-size: 1.8rem; }.swipe-actions .undo-button { width: auto; min-width: 108px; height: 48px; padding: 0 18px; border-radius: 24px; font-size: 1rem; }.pass-button, .chat-button { color: var(--coral); background: var(--surface); border: 1px solid var(--line); }.like-button { color: white; background: var(--coral); border: 0; }.chat-button { font-size: 1.45rem !important; }
.match-card { position: fixed; z-index: 20; inset: 50% auto auto 50%; width: min(calc(100% - 32px), 480px); padding: 30px; text-align: center; background: var(--surface-raised); border: 1px solid var(--coral); border-radius: 24px; box-shadow: 0 30px 100px #000; transform: translate(-50%,-50%); }
.chat-list { display: flex; min-height: 52vh; flex-direction: column; gap: 9px; padding: 14px 0; }.chat-bubble { max-width: min(80%, 520px); padding: 11px 14px; background: white; border-radius: 18px; color: #171719; }.chat-bubble.sent { align-self: flex-end; color: white; background: var(--coral); }.chat-bubble strong { display: block; font-size: .72rem; }.chat-form { position: sticky; bottom: 74px; display: flex; gap: 8px; padding: 10px 0; background: var(--background); }.chat-form input { flex: 1; }
.history-list { display: grid; gap: 12px; }.history-card { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; }.history-card h2 { margin: 0; }.history-card button { align-self: start; }.session-card { align-items: center; }.session-card .secondary-button { min-width: 104px; }.session-actions { display: flex; align-items: center; gap: 8px; }
.friend-card { align-items: center; }.success-label { color: var(--sage); font-weight: 800; }.compact-button { min-height: 40px; padding: 7px 12px; }.sub-card { padding: 16px; background: var(--surface-raised); border-radius: 16px; }.sub-card h2 { margin: 0; }.profile-editor { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }.profile-editor .avatar { width: 82px; height: 82px; margin-right: 8px; }.file-button { display: grid; place-items: center; cursor: pointer; }.file-button input { display: none; }.input-prefix { display: grid; grid-template-columns: auto 1fr; align-items: center; background: var(--background); border: 1px solid var(--line); border-radius: 12px; }.input-prefix span { padding-left: 12px; font-size: 1.2rem; }.input-prefix input { border: 0; }.center-link { display: grid; place-items: center; text-decoration: none; }.centered { text-align: center; }
.friend-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }.compact-list .history-card { padding: 12px 14px; }.restaurant-copy > .danger-text { margin-top: 14px; padding-left: 0; }
.readonly-value { min-height: 54px; margin-top: 8px; }.readonly-value strong { padding: 14px 12px; }
.unread-badge { display: inline-block; margin-left: 8px; padding: 2px 7px; border-radius: 20px; background: var(--coral); color: white; font-size: .8rem; font-weight: 800; }
#member-list li::after { content: none; }
.participant-status { font-size: .86rem; color: var(--muted); }.participant-status.finished { color: var(--sage); }
#setup-friends-list { width: 100%; max-height: 280px; overflow-y: auto; }
.social-avatar { width: 32px; height: 32px; font-size: .75rem; }
.avatar { overflow: hidden; }.avatar img { width: 100%; height: 100%; object-fit: cover; }
.member-identity, #setup-friends-list label, .invitation-row { display: flex; align-items: center; gap: 10px; }
.member-identity .social-avatar { order: -1; }.invitation-row { flex-wrap: wrap; padding: 12px 0; }
.warning-note { margin: 0; color: var(--orange); font-weight: 750; text-align: center; }
.confirmation-dialog { width: min(calc(100% - 32px), 520px); padding: 0; color: var(--text); background: transparent; border: 0; }
.confirmation-dialog::backdrop { background: rgba(0,0,0,.72); backdrop-filter: blur(3px); }
.confirmation-card { display: grid; gap: 16px; padding: 26px; background: var(--surface-raised); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 30px 100px #000; }
.confirmation-card h2, .confirmation-card p { margin: 0; }
@media (min-width: 820px) { .app-shell { padding: 0 0 20px 190px; }.tab-bar { position: fixed; top: 96px; right: auto; bottom: auto; left: max(20px, calc(50vw - 490px)); width: 150px; flex-direction: column; padding: 0; background: transparent; border: 0; }.tab-bar button { width: 150px; flex: none; text-align: left; }.chat-form { bottom: 0; } }
@media (max-width: 680px) { .action-grid, .content-grid { grid-template-columns: 1fr; }.app-header { padding-right: 14px; padding-left: 14px; }.connection { display: none; }.section-heading { align-items: flex-start; }.section-heading h1 { font-size: 2.15rem; }.centered-heading.heading-with-action { padding-right: 52px; padding-bottom: 54px; padding-left: 52px; }.centered-heading .heading-action { top: auto; right: 0; bottom: 0; transform: none; }.session-card { grid-template-columns: 1fr; }.session-actions { justify-content: flex-end; }.restaurant-photo { min-height: 240px; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }