@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Fredoka:wght@400;500;600;700&display=swap');

:root {
  color-scheme: light;
  --ink: #24232a;
  --muted: #89868c;
  --line: #efedf0;
  --paper: #fff;
  --canvas: #f8f7f8;
  --coral: #ff625f;
  --coral-deep: #ec4f62;
  --pink: #ff7a79;
  --lavender: #8973ed;
  --mint: #40c7a2;
  --shadow: 0 18px 48px rgba(52, 42, 52, .09);
  font-family: 'DM Sans', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--canvas); color: var(--ink); }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(255, 98, 95, .34); outline-offset: 3px;
}
button:disabled { cursor: not-allowed; opacity: .48; }
.hidden { display: none !important; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 328px minmax(0, 1fr); }
.sidebar {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column;
  padding: 28px 20px 18px; background: #fff; border-right: 1px solid #f0edf0; z-index: 3;
}
.brand { display: flex; align-items: center; gap: 11px; padding: 2px 12px 28px; color: var(--ink); text-decoration: none; }
.brand-mark {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 15px;
  color: white; background: linear-gradient(145deg, #ff8a75, #f24e69); box-shadow: 0 8px 18px rgba(242, 78, 105, .22);
  font-size: 23px; line-height: 1;
}
.brand-name { font: 800 19px/1.05 'Manrope', sans-serif; letter-spacing: -.7px; }
.brand-name span { display: block; margin-top: 4px; color: var(--coral); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.side-nav { display: grid; gap: 6px; padding: 0 3px; }
.side-nav button, .side-nav a {
  min-height: 48px; width: 100%; display: flex; align-items: center; gap: 13px; padding: 0 13px;
  border: 0; border-radius: 13px; background: transparent; color: #77737b; text-align: left;
  font-size: 14px; font-weight: 700; cursor: pointer; transition: background .18s, color .18s, transform .18s;
}
.side-nav button:hover, .side-nav a:hover { background: #fff5f4; color: var(--coral-deep); }
.side-nav button.active, .side-nav button[aria-current="page"] { color: var(--coral-deep); background: #fff0ef; }
.nav-icon { display: grid; place-items: center; width: 23px; font-size: 19px; }
.nav-count { margin-left: auto; min-width: 22px; padding: 3px 7px; border-radius: 20px; color: #fff; background: var(--coral); font-size: 11px; text-align: center; }
.sidebar-section { margin-top: 29px; }
.sidebar-heading { display: flex; align-items: center; justify-content: space-between; padding: 0 12px 11px; color: #a19da3; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.sidebar-heading button { border: 0; background: transparent; color: var(--coral); font-size: 12px; font-weight: 700; cursor: pointer; }
#matches-list { display: grid; gap: 2px; overflow-y: auto; }
.match-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 11px; border: 0; border-radius: 13px; background: transparent; text-align: left; cursor: pointer; }
.match-row:hover { background: #faf8fa; }
.match-avatar, .avatar, .match-photo { position: relative; flex: none; width: 46px; height: 46px; overflow: hidden; border-radius: 50%; background: #f2e8e7; }
.match-avatar img, .avatar img, .match-photo img { width: 100%; height: 100%; object-fit: cover; }
.match-avatar::after { content: ''; position: absolute; right: 1px; bottom: 1px; width: 10px; height: 10px; border: 2px solid #fff; border-radius: 50%; background: #45c89c; }
.match-copy { min-width: 0; flex: 1; }
.match-name { overflow: hidden; color: #39363e; font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.match-preview { overflow: hidden; margin-top: 4px; color: #aaa6ad; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.match-time { align-self: flex-start; margin-top: 4px; color: #b3afb5; font-size: 10px; }
.sidebar-spacer { flex: 1; min-height: 20px; }
#profile-trigger, .sidebar-profile {
  width: 100%; display: flex; align-items: center; gap: 11px; padding: 13px 12px; border: 1px solid #f1eef1;
  border-radius: 16px; background: #fff; text-align: left; cursor: pointer; transition: box-shadow .18s, border-color .18s;
}
#profile-trigger:hover, .sidebar-profile:hover { border-color: #ffd3d0; box-shadow: 0 7px 20px rgba(57, 42, 55, .05); }
.profile-avatar { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 13px; background: #fff0ed; font-size: 22px; }
.profile-user-copy { min-width: 0; flex: 1; }
.profile-user-name { overflow: hidden; color: #39363e; font-size: 12px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.profile-user-caption { margin-top: 4px; color: #aaa6ad; font-size: 10px; }
.profile-menu-icon { color: #aaa6ad; font-size: 18px; }

.main-content { min-width: 0; min-height: 100vh; padding: 0 34px 34px; }
.topbar { height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1170px; margin: 0 auto; }
.topbar-title { margin: 0; color: #34313a; font: 800 19px/1.2 'Manrope', sans-serif; letter-spacing: -.45px; }
.topbar-subtitle { margin: 5px 0 0; color: #aaa6ad; font-size: 11px; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.icon-button, .filter-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 13px;
  border: 1px solid #eeeaee; border-radius: 12px; background: #fff; color: #77727a; font-size: 12px; font-weight: 700;
  cursor: pointer; transition: .18s ease;
}
.icon-button { width: 40px; padding: 0; font-size: 17px; }
.icon-button:hover, .filter-button:hover { border-color: #ffd3d0; color: var(--coral-deep); box-shadow: 0 5px 15px rgba(57, 42, 55, .05); }
.view { max-width: 1170px; margin: 0 auto; }
#discover-view:not(.hidden) { display: flex; align-items: center; flex-direction: column; padding-top: 0; }
#deck-area { width: min(100%, 450px); display: flex; align-items: center; flex-direction: column; }
.dog-card {
  position: relative; width: 100%; height: min(66vh, 590px); min-height: 440px; overflow: hidden;
  border: 5px solid #fff; border-radius: 24px; background: linear-gradient(140deg, #f3d4ca, #a27d71);
  box-shadow: 0 20px 55px rgba(57, 42, 55, .18), 0 2px 6px rgba(57, 42, 55, .07); isolation: isolate;
}
#dog-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: opacity .22s; }
.dog-card::before { content: ''; position: absolute; z-index: 1; inset: 32% 0 0; background: linear-gradient(180deg, transparent 0%, rgba(15, 17, 21, .28) 35%, rgba(15, 17, 21, .82) 100%); pointer-events: none; }
.dog-photo-indicators, #dog-photo-count { position: absolute; z-index: 2; top: 13px; left: 14px; right: 14px; }
.dog-photo-indicators { display: flex; gap: 5px; }
.dog-photo-indicators span { height: 3px; flex: 1; border-radius: 9px; background: rgba(255, 255, 255, .47); }
.dog-photo-indicators span.active { background: #fff; }
#dog-photo-count { left: auto; right: 14px; width: fit-content; padding: 6px 9px; border-radius: 20px; background: rgba(26, 25, 28, .36); color: #fff; font-size: 10px; font-weight: 700; backdrop-filter: blur(8px); }
.dog-info, #dog-info { position: absolute; z-index: 2; left: 23px; right: 23px; bottom: 20px; color: #fff; }
.dog-title-row { display: flex; align-items: center; gap: 8px; }
.dog-name { margin: 0; font: 800 31px/1.05 'Manrope', sans-serif; letter-spacing: -.8px; }
.dog-age { font-size: 25px; font-weight: 500; }
.verified-badge { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #51b8ff; color: white; font-size: 11px; }
.dog-breed, .dog-location { margin-top: 8px; font-size: 13px; font-weight: 600; text-shadow: 0 1px 4px rgba(0, 0, 0, .2); }
.dog-location { color: rgba(255, 255, 255, .83); font-size: 11px; }
#dog-bio { margin: 12px 0 0; color: rgba(255,255,255,.91); font-size: 12px; line-height: 1.48; }
#dog-tags, .dog-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.dog-tag, #dog-tags span { display: inline-flex; padding: 6px 9px; border: 1px solid rgba(255,255,255,.24); border-radius: 20px; background: rgba(255,255,255,.16); color: #fff; font-size: 10px; font-weight: 700; backdrop-filter: blur(7px); }
.deck-actions { display: flex; justify-content: center; align-items: center; gap: 17px; margin: 20px 0 0; }
.action-button { display: grid; place-items: center; flex: none; width: 54px; height: 54px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 9px 25px rgba(57, 42, 55, .09); cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
.action-button:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 12px 26px rgba(57, 42, 55, .14); }
.action-button:active { transform: scale(.95); }
.action-button .action-icon { font-size: 21px; line-height: 1; }
#rewind-btn { width: 43px; height: 43px; color: #e6ad47; }
#rewind-btn .action-icon { font-size: 17px; }
#nope-btn { color: #fb6472; }
#like-btn { color: #30c69d; }
#superlike-btn { width: 47px; height: 47px; color: #5b9fea; }
#superlike-btn .action-icon { font-size: 19px; }
#boost-btn { width: 43px; height: 43px; color: #9174e9; }
#boost-btn .action-icon { font-size: 17px; }
.action-hints { display: flex; justify-content: center; gap: 25px; margin-top: 12px; color: #aaa5ad; font-size: 10px; }
.action-hint kbd { min-width: 17px; display: inline-grid; place-items: center; margin-right: 4px; padding: 2px 4px; border: 1px solid #e9e5e9; border-radius: 4px; background: #fff; color: #908b93; font: 600 9px/1.2 inherit; }
#deck-status { min-height: 18px; margin-top: 7px; color: #aaa5ad; font-size: 11px; text-align: center; }

.view-panel { padding: 28px 0; }
.view-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 23px; }
.view-heading h2 { margin: 0; color: #302d35; font: 800 25px/1.2 'Manrope', sans-serif; letter-spacing: -.7px; }
.view-heading p { margin: 7px 0 0; color: #9a959d; font-size: 13px; }
.matches-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); gap: 18px; }
.match-card { position: relative; overflow: hidden; min-height: 250px; border: 4px solid #fff; border-radius: 19px; background: #eee3df; box-shadow: 0 8px 24px rgba(57, 42, 55, .07); cursor: pointer; transition: transform .18s, box-shadow .18s; }
.match-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.match-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.match-card::after { content: ''; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(18, 18, 20, .78)); }
.match-card-copy { position: absolute; z-index: 1; right: 14px; bottom: 14px; left: 14px; color: #fff; }
.match-card-copy strong { font-size: 16px; }
.match-card-copy span { display: block; margin-top: 5px; color: rgba(255,255,255,.8); font-size: 11px; }
.empty-state { display: grid; place-items: center; min-height: 330px; padding: 38px 20px; border: 1px dashed #e8e2e8; border-radius: 22px; background: rgba(255,255,255,.55); text-align: center; }
.empty-emoji { display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto 16px; border-radius: 20px; background: #fff0ed; font-size: 30px; }
.empty-state h3 { margin: 0; font: 800 19px 'Manrope', sans-serif; }
.empty-state p { max-width: 310px; margin: 9px auto 18px; color: #98939b; font-size: 13px; line-height: 1.55; }
.primary-button { display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 43px; padding: 0 17px; border: 0; border-radius: 12px; background: linear-gradient(120deg, #ff7c73, #f25469); color: #fff; font-size: 12px; font-weight: 800; box-shadow: 0 8px 18px rgba(242, 78, 105, .18); cursor: pointer; transition: transform .18s, box-shadow .18s; }
.primary-button:hover { transform: translateY(-1px); box-shadow: 0 11px 22px rgba(242, 78, 105, .25); }

.messages-layout { display: grid; grid-template-columns: minmax(210px, 280px) minmax(0, 1fr); min-height: min(70vh, 650px); overflow: hidden; border: 1px solid #efebef; border-radius: 20px; background: #fff; box-shadow: 0 10px 35px rgba(57,42,55,.04); }
.conversation-list { padding: 15px 10px; border-right: 1px solid #f0edf0; }
.conversation-list h3 { margin: 3px 11px 12px; color: #8d8790; font-size: 10px; letter-spacing: .13em; text-transform: uppercase; }
.conversation-row { width: 100%; display: flex; align-items: center; gap: 11px; padding: 10px; border: 0; border-radius: 12px; background: transparent; text-align: left; cursor: pointer; }
.conversation-row:hover, .conversation-row.active { background: #fff3f2; }
.conversation-content { min-width: 0; flex: 1; }
.conversation-content strong { display: block; color: #413d45; font-size: 12px; }
.conversation-content span { display: block; overflow: hidden; margin-top: 4px; color: #a39da5; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.chat-thread { display: flex; flex-direction: column; min-width: 0; }
.chat-header { display: flex; align-items: center; gap: 11px; padding: 13px 17px; border-bottom: 1px solid #f0edf0; }
.chat-header strong { font-size: 13px; }
.chat-header span { display: block; margin-top: 3px; color: #9e98a0; font-size: 10px; }
.chat-messages { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 18px; overflow-y: auto; }
.chat-bubble { max-width: 75%; padding: 10px 13px; border-radius: 15px 15px 15px 4px; background: #f4f1f4; color: #57525b; font-size: 12px; line-height: 1.45; }
.chat-bubble.mine { align-self: flex-end; border-radius: 15px 15px 4px 15px; background: #ffefed; color: #8e4c4e; }
.chat-compose { display: flex; gap: 8px; padding: 13px; border-top: 1px solid #f0edf0; }
.chat-compose input { min-width: 0; flex: 1; height: 42px; padding: 0 13px; border: 1px solid #eee9ee; border-radius: 12px; background: #fbfafb; font-size: 12px; }

.modal-backdrop, dialog::backdrop { position: fixed; z-index: 10; inset: 0; background: rgba(33, 28, 36, .38); backdrop-filter: blur(5px); }
.modal, .modal-card, dialog {
  position: fixed; z-index: 11; top: 50%; left: 50%; width: min(92vw, 470px); max-height: min(86vh, 760px); overflow: auto;
  padding: 27px; border: 1px solid rgba(255,255,255,.72); border-radius: 22px; background: #fff; box-shadow: 0 28px 80px rgba(39,31,41,.22);
  transform: translate(-50%, -50%);
}
dialog { margin: 0; }
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 21px; }
.modal-header h2, .modal h2, .modal-card h2, dialog h2 { margin: 0; color: #302c35; font: 800 21px/1.2 'Manrope', sans-serif; letter-spacing: -.5px; }
.modal-header p, .modal-intro { margin: 7px 0 0; color: #99939c; font-size: 12px; line-height: 1.45; }
.modal-close { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border: 0; border-radius: 10px; background: #f8f6f8; color: #858089; font-size: 20px; cursor: pointer; }
.modal-close:hover { background: #fff0ef; color: var(--coral-deep); }
.form-field { display: grid; gap: 7px; margin-bottom: 15px; }
.form-field label, .field-label { color: #625d66; font-size: 11px; font-weight: 800; }
.form-field input, .form-field select, .form-field textarea, .modal input, .modal select, .modal textarea { width: 100%; min-height: 43px; padding: 0 12px; border: 1px solid #ece8ed; border-radius: 11px; background: #fcfbfc; color: #403c44; font-size: 12px; }
.form-field textarea, .modal textarea { min-height: 82px; padding: 11px 12px; resize: vertical; }
.range-field { margin: 18px 0; }
.range-field input[type="range"] { accent-color: var(--coral); }
.range-values { display: flex; justify-content: space-between; margin-top: 5px; color: #98929b; font-size: 10px; }
.chip-picker { display: flex; flex-wrap: wrap; gap: 8px; margin: 9px 0 20px; }
.chip-picker label, .filter-chip { padding: 8px 11px; border: 1px solid #eee9ee; border-radius: 20px; color: #77717a; font-size: 11px; cursor: pointer; }
.chip-picker input { width: auto !important; min-height: auto !important; margin-right: 4px; accent-color: var(--coral); }
.modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 20px; }
.secondary-button { min-height: 41px; padding: 0 14px; border: 1px solid #ece7ec; border-radius: 11px; background: #fff; color: #77717a; font-size: 12px; font-weight: 700; cursor: pointer; }
.match-modal-content { text-align: center; }
.match-sparkle { margin-bottom: 6px; color: #ffbe61; font-size: 27px; }
.match-photos { display: flex; justify-content: center; margin: 20px auto; }
.match-photos .match-photo { width: 100px; height: 100px; border: 4px solid #fff; box-shadow: 0 7px 20px rgba(57,42,55,.12); }
.match-photos .match-photo + .match-photo { margin-left: -19px; }
.match-modal-content .primary-button { width: 100%; }
.toast, #toast { position: fixed; z-index: 20; right: 24px; bottom: 24px; max-width: min(360px, calc(100vw - 32px)); padding: 13px 17px; border-radius: 13px; background: #302c35; color: #fff; font-size: 12px; font-weight: 700; box-shadow: 0 12px 32px rgba(30,25,32,.2); animation: toast-in .2s ease-out; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* App-specific structure */
.brand > span:last-child { font: 800 18px/1 'Manrope', sans-serif; letter-spacing: -.7px; }
.brand .brand-for { color: #a9a3ab; font-weight: 500; }
.sidebar-section-label { padding: 0 12px 10px; color: #aaa5ad; font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.side-nav .nav-item { position: relative; }
.sidebar-rule { height: 1px; margin: 20px 7px 22px; background: #f1edf1; }
.sidebar-heading { padding-bottom: 10px; text-transform: none; letter-spacing: .01em; color: #6f6973; font-size: 12px; }
.sidebar-heading .text-button { color: var(--coral); }
.sidebar-matches { display: grid; gap: 3px; overflow-y: auto; }
.sidebar-bottom { margin-top: auto; }
.tip-card { display: flex; gap: 10px; margin: 0 3px 14px; padding: 14px 13px; border-radius: 15px; background: #fff7f4; }
.tip-sparkle { color: #f2ab67; font-size: 17px; }
.tip-card strong { color: #59494a; font-size: 11px; }
.tip-card p { margin: 4px 0 0; color: #a18f90; font-size: 10px; line-height: 1.45; }
.user-profile { border-color: #f1edf1 !important; }
.user-avatar, .top-avatar { display: grid; place-items: center; width: 39px; height: 39px; border: 0; border-radius: 13px; background: #fff0ed; font-size: 20px; }
.user-copy { min-width: 0; flex: 1; text-align: left; }
.user-copy strong { display: block; color: #39363e; font-size: 12px; }
.user-copy small { display: block; margin-top: 4px; color: #aaa6ad; font-size: 10px; }
.more-dots { color: #aaa6ad; font-size: 18px; }
.page-heading { min-width: 0; }
.page-heading h1 { margin: 4px 0 0; color: #34313a; font: 800 19px/1.2 'Manrope', sans-serif; letter-spacing: -.45px; }
.eyebrow { color: #aaa2ab; font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.location-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 35px; padding: 0 10px; border: 1px solid #efebef; border-radius: 11px; background: #fff; color: #807a83; font-size: 11px; font-weight: 700; }
.top-avatar { width: 37px; height: 37px; cursor: pointer; }
.mobile-brand { display: none; }
.discover-view { display: block; }
.deck-layout { display: grid; grid-template-columns: minmax(0, 1fr) 235px; align-items: center; gap: 25px; max-width: 850px; margin: 0 auto; }
.deck-area { position: relative; display: flex; align-items: center; flex-direction: column; width: 100%; }
.deck-glow { position: absolute; z-index: -1; inset: 12% -8% 8%; border-radius: 50%; background: radial-gradient(ellipse, rgba(255,216,204,.42), transparent 68%); filter: blur(8px); }
.dog-card { height: auto; min-height: 0; width: min(100%, 416px); border: 0; overflow: hidden; border-radius: 23px; background: #fff; }
.dog-card::before { content: none; }
.dog-photo-wrap { position: relative; height: min(54vh, 490px); min-height: 400px; overflow: hidden; background: #f2dfd8; }
.dog-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-shade { position: absolute; z-index: 1; inset: 30% 0 0; background: linear-gradient(180deg, transparent, rgba(21,20,21,.74)); pointer-events: none; }
.photo-dots { position: absolute; z-index: 3; top: 13px; left: 13px; right: 66px; display: flex; gap: 5px; }
.photo-dots span, .photo-dot { height: 3px; flex: 1; border-radius: 10px; background: rgba(255,255,255,.48); }
.photo-dots span.active, .photo-dot.active { background: #fff; }
.photo-counter { position: absolute; z-index: 3; top: 9px; right: 11px; padding: 6px 9px; border-radius: 15px; background: rgba(27,24,26,.38); color: #fff; font-size: 10px; font-weight: 700; backdrop-filter: blur(8px); }
.photo-arrow { position: absolute; z-index: 4; top: 50%; display: grid; place-items: center; width: 31px; height: 31px; border: 0; border-radius: 50%; background: rgba(255,255,255,.78); color: #5c555d; font-size: 23px; line-height: 1; opacity: 0; cursor: pointer; transform: translateY(-50%); transition: opacity .18s; }
.dog-photo-wrap:hover .photo-arrow, .photo-arrow:focus-visible { opacity: 1; }
.photo-prev { left: 10px; }
.photo-next { right: 10px; }
.card-top-badges { position: absolute; z-index: 3; top: 37px; left: 13px; display: flex; gap: 6px; }
.verified-badge, .online-badge { display: inline-flex; align-items: center; gap: 4px; width: auto; height: auto; padding: 6px 8px; border-radius: 15px; background: rgba(31,29,32,.32); color: #fff; font-size: 9px; font-weight: 700; backdrop-filter: blur(8px); }
.verified-badge span { color: #5ac0ff; }
.online-badge { background: rgba(31,29,32,.26); }
.online-badge i, .active-status i, .chat-header p i { width: 6px; height: 6px; border-radius: 50%; background: #62d4a6; }
.dog-info { bottom: 19px; left: 20px; right: 20px; }
.dog-title-row { gap: 7px; }
.dog-info h2, .dog-info h3, .dog-info .dog-name { margin: 0; color: #fff; font: 800 30px/1.1 'Manrope', sans-serif; letter-spacing: -.8px; }
.dog-info .dog-age { color: rgba(255,255,255,.92); font-size: 24px; font-weight: 500; }
.dog-info .verified-badge { width: 19px; height: 19px; padding: 0; background: #48b6f7; }
.dog-info .dog-breed, .dog-info p, .dog-info .breed-line { margin: 7px 0 0; color: rgba(255,255,255,.9); font-size: 12px; font-weight: 600; text-shadow: 0 1px 4px rgba(0,0,0,.25); }
.dog-info .dog-location { font-size: 10px; }
.dog-card-details { padding: 12px 17px 13px; }
.dog-bio { color: #77717a; font-size: 11px; line-height: 1.45; }
#dog-bio { margin: 0; color: #77717a; font-size: 11px; line-height: 1.45; }
.dog-tags { gap: 6px; margin-top: 9px; }
.dog-tags span { padding: 5px 8px; border: 0; background: #fff2ef; color: #c36c68; font-size: 9px; backdrop-filter: none; }
#dog-tags { gap: 6px; margin-top: 9px; }
#dog-tags span { padding: 5px 8px; border: 0; background: #fff2ef; color: #c36c68; font-size: 9px; backdrop-filter: none; }
.dog-card-footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; color: #a09aa2; font-size: 9px; }
.profile-prompt { color: #f07670; font-weight: 700; }
.swipe-stamp { position: absolute; z-index: 5; top: 20%; padding: 6px 10px; border: 3px solid currentColor; border-radius: 8px; font-size: 21px; font-weight: 900; letter-spacing: .08em; opacity: 0; transform: rotate(-13deg); }
.stamp-like { left: 18px; color: #42c8a3; }
.stamp-nope { right: 18px; color: #fb6472; transform: rotate(13deg); }
.stamp-super { left: 50%; color: #609eed; font-size: 15px; transform: translateX(-50%) rotate(-7deg); }
.deck-hint { margin-top: 8px; color: #a6a0a8; font-size: 10px; }
.hint-swipe { margin-right: 5px; color: #f27e78; font-size: 15px; }
.discovery-aside { display: grid; gap: 13px; }
.aside-note { display: flex; gap: 11px; padding: 16px 14px; border: 1px solid #f2e9e7; border-radius: 17px; background: rgba(255,255,255,.8); }
.note-icon { color: #f3b961; font-size: 20px; }
.aside-note .eyebrow { font-size: 8px; }
.aside-note h2 { margin: 7px 0 6px; font: 800 14px 'Manrope', sans-serif; }
.aside-note p { margin: 0; color: #918991; font-size: 10px; line-height: 1.5; }
.learn-link { margin-top: 10px; padding: 0; border: 0; background: transparent; color: #ed716c; font-size: 10px; font-weight: 800; cursor: pointer; }
.active-dogs { display: flex; align-items: center; gap: 9px; padding: 12px; border: 1px solid #f0edf0; border-radius: 15px; background: #fff; }
.active-dots { display: flex; }
.active-dots i { display: grid; place-items: center; width: 25px; height: 25px; margin-left: -5px; border: 2px solid white; border-radius: 50%; background: #fff0ed; font-size: 12px; font-style: normal; }
.active-dots i:first-child { margin-left: 0; }
.active-dogs strong, .active-dogs small { display: block; }
.active-dogs strong { color: #555059; font-size: 10px; }
.active-dogs small { margin-top: 3px; color: #aaa4ac; font-size: 8px; }
.active-status { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: #8f8991; font-size: 9px; }
.active-status i { width: 5px; height: 5px; }
.safety-note { display: flex; align-items: flex-start; gap: 8px; padding: 3px 5px; color: #dc8d83; }
.safety-note p { margin: 0; color: #aaa2aa; font-size: 9px; line-height: 1.45; }
.deck-actions { gap: 15px; margin-top: 9px; }
.action-caption { width: min(100%, 320px); display: flex; justify-content: space-between; margin: 8px auto 0; padding: 0 1px; color: #a7a1a9; font-size: 9px; }
.action-rewind { color: #e7b24c; }
.action-nope { color: #fa6572; }
.action-superlike { color: #629ee8; }
.action-like { color: #37c59f; }
.action-boost { color: #9174e9; }
.content-view { max-width: 1000px; padding-top: 32px; }
.section-intro { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 25px; }
.section-intro h2 { margin: 6px 0; color: #302d35; font: 800 25px/1.2 'Manrope', sans-serif; letter-spacing: -.7px; }
.section-intro p { margin: 0; color: #9a959d; font-size: 12px; }
.empty-state > span { display: grid; place-items: center; width: 62px; height: 62px; margin-bottom: 12px; border-radius: 20px; background: #fff0ed; font-size: 29px; }
.conversation-list { min-width: 220px; }
.conversation-panel { display: flex; flex-direction: column; min-width: 0; }
.conversation-welcome { display: grid; place-content: center; flex: 1; min-height: 260px; padding: 20px; text-align: center; }
.conversation-welcome > span { font-size: 32px; }
.conversation-welcome h3 { margin: 12px 0 6px; font: 800 16px 'Manrope', sans-serif; }
.conversation-welcome p { margin: 0; color: #9a959d; font-size: 11px; }
.app-footer { display: flex; justify-content: space-between; max-width: 850px; margin: 22px auto 0; color: #b0aab2; font-size: 9px; }
.app-footer span span { color: var(--coral); }
.modal-panel { position: absolute; top: 50%; left: 50%; width: min(92vw, 470px); max-height: min(88vh, 760px); overflow: auto; padding: 28px; border: 1px solid rgba(255,255,255,.72); border-radius: 22px; background: #fff; box-shadow: 0 28px 80px rgba(39,31,41,.22); transform: translate(-50%, -50%); }
.modal-backdrop { position: fixed; z-index: 0; inset: 0; background: rgba(33,28,36,.38); backdrop-filter: blur(5px); }
.modal { position: fixed; z-index: 11; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; padding: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; transform: none; }
.modal-panel { z-index: 1; }
.modal-panel h2 { margin: 6px 0 7px; color: #302c35; font: 800 21px/1.2 'Manrope', sans-serif; letter-spacing: -.5px; }
.modal-panel > p { margin: 0 0 20px; color: #99939c; font-size: 11px; line-height: 1.5; }
.modal-close { position: absolute; top: 17px; right: 17px; }
.form-label { display: flex; align-items: center; justify-content: space-between; margin: 15px 0 7px; color: #625d66; font-size: 10px; font-weight: 800; }
.form-label strong { color: #e8736c; }
.modal-panel input:not([type="range"]):not([type="checkbox"]), .modal-panel textarea, .modal-panel select { width: 100%; min-height: 40px; padding: 0 11px; border: 1px solid #ece8ed; border-radius: 10px; background: #fcfbfc; color: #403c44; font-size: 11px; }
.modal-panel textarea { padding: 10px 11px; }
.modal-panel input[type="range"] { width: 100%; accent-color: var(--coral); }
.age-fields { display: flex; align-items: center; gap: 9px; color: #9b959d; font-size: 11px; }
.age-fields input { width: 70px !important; }
.checkbox-row { display: flex; align-items: center; gap: 8px; margin-top: 15px; color: #736e77; font-size: 11px; }
.checkbox-row input { accent-color: var(--coral); }
.match-confetti { margin-bottom: 8px; color: #f5b454; font-size: 24px; text-align: center; }
.match-panel { width: min(92vw, 410px); text-align: center; }
.match-panel .eyebrow { color: #f17971; }
.match-panel h2 { margin-top: 7px; font-size: 25px; }
.match-panel > p { max-width: 280px; margin: 8px auto 0; }
.match-portraits { display: flex; justify-content: center; margin: 21px auto; }
.match-portraits .portrait, .match-portraits img { width: 95px; height: 95px; object-fit: cover; border: 4px solid #fff; border-radius: 50%; background: #f4e4df; box-shadow: 0 6px 18px rgba(57,42,55,.12); }
.match-portraits .portrait + .portrait, .match-portraits img + img { margin-left: -17px; }
.match-portraits .match-portrait { width: 95px; height: 95px; object-fit: cover; border: 4px solid #fff; border-radius: 50%; background: #f4e4df; box-shadow: 0 6px 18px rgba(57,42,55,.12); }
.match-portraits .your-portrait { display: grid; place-items: center; background: linear-gradient(140deg,#ffd9cb,#ffaaa1); color: #fff; font: 800 29px 'Manrope',sans-serif; }
.match-portraits .match-heart { display: grid; place-items: center; z-index: 1; width: 30px; height: 30px; margin: 32px -8px 0; border-radius: 50%; background: #fff; color: var(--coral); box-shadow: 0 3px 12px rgba(57,42,55,.12); }
.match-modal-actions { display: grid; gap: 9px; }
.chat-panel { display: flex; flex-direction: column; width: min(94vw, 470px); height: min(82vh, 650px); padding: 0; }
.chat-header { flex: none; padding: 18px 20px; }
.chat-avatar { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: #fff0ed; font-size: 21px; }
.chat-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.chat-header h2 { margin: 0; font-size: 15px; }
.chat-header p { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; color: #9e98a0; font-size: 10px; }
.chat-header p i { display: inline-block; }
.chat-messages { min-height: 0; }
.chat-compose { flex: none; }
.chat-compose button { width: 42px; height: 42px; border: 0; border-radius: 12px; background: var(--coral); color: #fff; cursor: pointer; }
.toast:empty { display: none; }
.dog-subtitle { margin-top: 7px; color: rgba(255,255,255,.9); font-size: 12px; font-weight: 600; text-shadow: 0 1px 4px rgba(0,0,0,.25); }
.verified-check { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 3px; border-radius: 50%; background: #48b6f7; color: #fff; font: 700 11px/1 sans-serif; vertical-align: 4px; }
.photo-dot { flex: 1; min-width: 0; padding: 0; border: 0; cursor: pointer; }
.photo-changing { opacity: .72; }
.sidebar-match { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 12px; background: transparent; text-align: left; cursor: pointer; }
.sidebar-match:hover { background: #faf7f9; }
.sidebar-match > img { flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.sidebar-match > span { min-width: 0; flex: 1; }
.sidebar-match strong, .sidebar-match small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-match strong { color: #49444d; font-size: 11px; }
.sidebar-match small { margin-top: 3px; color: #aaa4ac; font-size: 9px; }
.sidebar-match > i { width: 7px; height: 7px; flex: none; border-radius: 50%; background: #f28b81; }
.no-matches-note { padding: 13px 12px; color: #aaa4ac; font-size: 10px; line-height: 1.5; }
.match-card { min-height: 0; height: 295px; padding: 0; border-width: 1px; border-radius: 17px; background: #fff; }
.match-card::after { display: none; }
.match-card-photo { position: relative; display: block; width: 100%; height: 205px; overflow: hidden; padding: 0; border: 0; background: #f2e8e7; cursor: pointer; }
.match-card-photo img { position: static; display: block; width: 100%; height: 100%; object-fit: cover; }
.match-chip { position: absolute; left: 10px; bottom: 10px; padding: 6px 8px; border-radius: 12px; background: rgba(255,255,255,.92); color: #e6666c; font-size: 9px; font-weight: 800; }
.match-card-copy { position: static; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px; color: var(--ink); }
.match-card-copy h3 { margin: 0; color: #403b44; font-size: 12px; }
.match-card-copy p { margin: 5px 0 0; color: #99939c; font-size: 9px; }
.message-match-btn { display: grid; place-items: center; width: 31px; height: 31px; flex: none; border: 0; border-radius: 10px; background: #fff0ed; color: #ef6c68; cursor: pointer; }
.conversation-list { padding: 10px; }
.conversation-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; border: 0; border-radius: 12px; background: transparent; text-align: left; cursor: pointer; }
.conversation-item:hover, .conversation-item.selected { background: #fff3f2; }
.conversation-item > img { width: 39px; height: 39px; flex: none; border-radius: 13px; object-fit: cover; }
.conversation-copy { min-width: 0; flex: 1; }
.conversation-copy strong, .conversation-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation-copy strong { color: #4a454e; font-size: 11px; }
.conversation-copy small { margin-top: 4px; color: #a29ba4; font-size: 9px; }
.conversation-time { align-self: flex-start; margin-top: 2px; color: #b0aab2; font-size: 9px; }
.conversation-empty { padding: 15px 10px; color: #a29ba4; font-size: 10px; line-height: 1.5; }
.conversation-header { display: flex; align-items: center; gap: 10px; padding: 14px 17px; border-bottom: 1px solid #f0edf0; }
.conversation-header img { width: 39px; height: 39px; border-radius: 13px; object-fit: cover; }
.conversation-header h3 { margin: 0; color: #423d46; font-size: 12px; }
.conversation-header p { margin: 4px 0 0; color: #9e98a0; font-size: 9px; }
.chat-live { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; color: #8e8991; font-size: 9px; }
.chat-live i { width: 6px; height: 6px; border-radius: 50%; background: #59c99f; }
.conversation-stream { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 16px; overflow: auto; }
.message-bubble { max-width: 75%; padding: 10px 12px; border-radius: 14px 14px 14px 4px; background: #f4f1f4; color: #5a555e; font-size: 11px; line-height: 1.45; }
.message-bubble.mine { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: #ffefed; color: #8e4c4e; }
.message-bubble small { display: block; margin-top: 5px; color: #a8a1aa; font-size: 8px; }
.demo-note { align-self: center; margin: 5px 0; color: #b0aab2; font-size: 9px; text-align: center; }
.inline-chat-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid #f0edf0; }
.inline-chat-form input { min-width: 0; flex: 1; height: 39px; padding: 0 11px; border: 1px solid #eee9ee; border-radius: 11px; background: #fbfafb; font-size: 11px; }
.inline-chat-form button { width: 39px; flex: none; border: 0; border-radius: 11px; background: var(--coral); color: white; cursor: pointer; }
.empty-deck { display: grid; place-items: center; padding: 34px 20px; border: 1px dashed #e8e2e8; border-radius: 22px; background: rgba(255,255,255,.76); text-align: center; }
.empty-deck .empty-illustration { font-size: 42px; }
.empty-deck h2 { margin: 4px 0 8px; font: 800 19px 'Manrope',sans-serif; }
.empty-deck p:not(.eyebrow) { max-width: 300px; color: #98939b; font-size: 11px; line-height: 1.55; }
.card--swipe-left { animation: card-left .28s ease-in forwards; }
.card--swipe-right { animation: card-right .28s ease-in forwards; }
.card--swipe-up { animation: card-up .28s ease-in forwards; }
.card--swipe-right .stamp-like, .card--swipe-left .stamp-nope, .card--swipe-up .stamp-super { opacity: 1; }
@keyframes card-left { to { opacity: 0; transform: translate(-90px, 12px) rotate(-9deg); } }
@keyframes card-right { to { opacity: 0; transform: translate(90px, 12px) rotate(9deg); } }
@keyframes card-up { to { opacity: 0; transform: translateY(-90px) rotate(4deg); } }
.toast.visible { display: block; }

@media (max-width: 680px) {
  .sidebar-section-label, .sidebar-rule, .sidebar-heading, .sidebar-matches, .sidebar-bottom { display: none !important; }
  .mobile-brand { display: flex; align-items: center; gap: 7px; white-space: nowrap; color: #34313a; font: 800 13px/1 'Manrope', sans-serif; letter-spacing: -.3px; }
  .mobile-brand .brand-mark { width: 29px; height: 29px; border-radius: 10px; font-size: 16px; }
  .page-heading, .location-pill { display: none !important; }
  .topbar { height: 50px; justify-content: space-between; }
  .topbar-actions { margin-left: auto; gap: 7px; }
  .top-avatar { width: 36px; height: 36px; }
  .main-content { padding-top: 0; }
  .discover-view { padding-top: 0; }
  .deck-layout { display: block; max-width: 430px; }
  .deck-area { width: 100%; }
  .discovery-aside, .deck-hint { display: none !important; }
  .dog-card { width: 100%; }
  .dog-photo-wrap { height: min(calc(100dvh - 340px), 335px); min-height: 245px; }
  .dog-card-details { padding: 9px 13px 10px; }
  .dog-bio { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .dog-tags { margin-top: 7px; }
  .dog-card-footer { margin-top: 6px; }
  .deck-actions { gap: clamp(8px, 3vw, 14px); margin-top: 8px; }
  .action-caption { width: min(100%, 300px); margin-top: 5px; font-size: 8px; }
  .app-footer { display: none; }
  .content-view { padding-top: 18px; }
  .section-intro { align-items: flex-start; }
  .messages-layout { min-height: calc(100dvh - 160px); }
  .conversation-panel { min-height: 53vh; }
  .chat-panel { height: min(82vh, 650px); }
}

@media (max-width: 390px) {
  .dog-photo-wrap { height: min(calc(100dvh - 350px), 335px); min-height: 225px; }
  .dog-card-details { padding: 8px 11px; }
  .dog-info { left: 16px; right: 16px; bottom: 15px; }
  .dog-info h2, .dog-info h3, .dog-info .dog-name { font-size: 26px; }
  .dog-tags span { padding: 4px 7px; font-size: 8px; }
  .deck-actions { gap: 7px; }
  .action-caption { width: min(100%, 275px); }
}

@media (min-height: 900px) {
  .dog-card { height: min(68vh, 630px); }
}
@media (max-width: 900px) {
  .app-shell { grid-template-columns: 260px minmax(0, 1fr); }
  .sidebar { padding-right: 14px; padding-left: 14px; }
  .main-content { padding-right: 23px; padding-left: 23px; }
  .deck-actions { gap: 12px; }
}
@media (max-width: 680px) {
  body { background: #fff; }
  .app-shell { display: flex; flex-direction: column; min-height: 100dvh; }
  .sidebar { position: fixed; z-index: 8; inset: auto 0 0; width: 100%; height: auto; padding: 6px 14px calc(7px + env(safe-area-inset-bottom)); border-top: 1px solid #f0edf0; border-right: 0; box-shadow: 0 -6px 22px rgba(45,35,45,.04); }
  .brand, .sidebar-section, .sidebar-spacer, #profile-trigger, .sidebar-profile { display: none !important; }
  .side-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 0; }
  .side-nav button, .side-nav a { display: flex; min-height: 51px; justify-content: center; flex-direction: column; gap: 2px; padding: 4px 5px; border-radius: 10px; font-size: 9px; }
  .nav-icon { width: auto; font-size: 18px; }
  .nav-count { position: absolute; transform: translate(13px, -13px); min-width: 17px; padding: 2px 4px; font-size: 8px; }
  .main-content { min-height: 100dvh; padding: 0 14px calc(80px + env(safe-area-inset-bottom)); }
  .topbar { height: 62px; }
  .topbar-title { font-size: 17px; }
  .topbar-subtitle { display: none; }
  .filter-button { min-height: 36px; padding: 0 10px; font-size: 11px; }
  .icon-button { width: 36px; min-height: 36px; }
  #discover-view { padding-top: 0; }
  #deck-area { width: min(100%, 430px); }
  .dog-card { height: min(calc(100dvh - 178px), 620px); min-height: 390px; border-width: 3px; border-radius: 20px; }
  .dog-info, #dog-info { left: 18px; right: 18px; bottom: 16px; }
  .dog-name { font-size: 28px; }
  .deck-actions { gap: clamp(10px, 4vw, 17px); margin-top: 14px; }
  .action-button { width: 49px; height: 49px; }
  #rewind-btn, #boost-btn { width: 39px; height: 39px; }
  #superlike-btn { width: 43px; height: 43px; }
  .action-hints { display: none; }
  #deck-status { margin-top: 5px; }
  .view-panel { padding-top: 17px; }
  .view-heading h2 { font-size: 22px; }
  .matches-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
  .match-card { min-height: 220px; border-width: 3px; border-radius: 15px; }
  .messages-layout { display: block; min-height: calc(100dvh - 155px); border-radius: 16px; }
  .conversation-list { border-right: 0; }
  .chat-thread { min-height: 55vh; }
}
@media (max-width: 380px) {
  .main-content { padding-right: 10px; padding-left: 10px; }
  .dog-card { height: min(calc(100dvh - 165px), 580px); min-height: 360px; }
  .deck-actions { gap: 8px; }
  .action-button { width: 45px; height: 45px; }
  #rewind-btn, #boost-btn { width: 35px; height: 35px; }
  #superlike-btn { width: 40px; height: 40px; }
}

/* App card dimensions supersede the generic starter-card viewport sizing above. */
@media (max-width: 680px) {
  .dog-card { height: auto; min-height: 0; }
  #dog-bio { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  #dog-tags { margin-top: 7px; }
  #dog-tags span { padding: 4px 7px; font-size: 8px; }
  .dog-card-footer { margin-top: 6px; }
  .deck-actions { margin-top: 8px; }
}
@media (max-width: 390px) {
  .action-button { width: 48px; height: 48px; }
  #rewind-btn, #boost-btn { width: 37px; height: 37px; }
  #superlike-btn { width: 43px; height: 43px; }
}

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

/* Nearby map */
#nearby-view { padding-top: 24px; }
.nearby-layout { display: grid; grid-template-columns: minmax(0, 1fr) 306px; grid-template-rows: minmax(235px, auto) minmax(0, 1fr); align-items: start; gap: 14px 18px; }
.nearby-layout > #nearby-map { grid-column: 1; grid-row: 1 / span 2; }
.nearby-layout > #nearby-list { grid-column: 2; grid-row: 1; }
.nearby-layout > #nearby-preview { grid-column: 2; grid-row: 2; }
.map-container, #nearby-map {
  position: relative; width: 100%; height: min(61vh, 555px); min-height: 410px; overflow: hidden;
  border: 4px solid #fff; border-radius: 21px; background-color: #e9f0e8;
  box-shadow: 0 12px 35px rgba(54, 48, 57, .09); isolation: isolate;
}
.leaflet-container { width: 100%; height: 100%; border-radius: 17px; background: #e9f0e8; color: #49444d; font: 11px 'DM Sans', sans-serif; }
.leaflet-control-attribution { border-radius: 7px 0 0 !important; background: rgba(255,255,255,.82) !important; color: #77717a !important; font-size: 8px !important; }
.leaflet-control-attribution a { color: #d46b69 !important; }
.leaflet-bar { overflow: hidden; border: 1px solid rgba(55,49,56,.1) !important; border-radius: 11px !important; box-shadow: 0 3px 12px rgba(55,49,56,.14) !important; }
.leaflet-bar a { width: 31px !important; height: 31px !important; border-bottom-color: #eee9ed !important; color: #625b65 !important; line-height: 31px !important; }
.leaflet-bar a:hover { background: #fff5f3 !important; color: var(--coral-deep) !important; }
.maplibregl-ctrl-attrib { border-radius: 7px 0 0 !important; background: rgba(255,255,255,.88) !important; color: #77717a !important; font-size: 8px !important; }
.maplibregl-ctrl-attrib a { color: #d46b69 !important; }
.maplibregl-ctrl-group { overflow: hidden; border: 1px solid rgba(55,49,56,.1) !important; border-radius: 11px !important; background: #fff !important; box-shadow: 0 3px 12px rgba(55,49,56,.14) !important; }
.maplibregl-ctrl-group button { width: 31px !important; height: 31px !important; background-color: #fff !important; }
.maplibregl-ctrl-group button:hover { background-color: #fff5f3 !important; }
.map-tools { position: absolute; z-index: 500; top: 13px; right: 13px; display: flex; align-items: flex-start; flex-direction: column; gap: 8px; pointer-events: none; }
.map-tools > * { pointer-events: auto; }
#recenter-map, .map-control-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 37px; padding: 0 11px; border: 1px solid rgba(235,229,234,.94); border-radius: 12px; background: rgba(255,255,255,.95); color: #69636c; font-size: 10px; font-weight: 800; box-shadow: 0 4px 14px rgba(45,37,46,.1); backdrop-filter: blur(7px); cursor: pointer; transition: transform .15s, color .15s, border-color .15s; }
#recenter-map:hover, .map-control-button:hover { transform: translateY(-1px); border-color: #ffd0cb; color: var(--coral-deep); }
.park-chips, .nearby-parks { position: absolute; z-index: 500; top: 13px; left: 13px; display: flex; flex-wrap: wrap; gap: 6px; max-width: calc(100% - 115px); }
.park-chips button, .nearby-parks button, button[data-park] { min-height: 31px; padding: 0 10px; border: 1px solid rgba(239,233,238,.93); border-radius: 18px; background: rgba(255,255,255,.95); color: #77717a; font-size: 9px; font-weight: 800; box-shadow: 0 3px 11px rgba(45,37,46,.08); cursor: pointer; backdrop-filter: blur(7px); transition: .15s; }
.park-chips button:hover, .nearby-parks button:hover, button[data-park]:hover { border-color: #ffc9c4; color: #df6263; }
.park-chips button.active, .nearby-parks button.active, button[data-park].active, button[data-park][aria-pressed="true"] { border-color: #ffbdb7; background: #fff0ed; color: #dd6264; }
#map-status { position: absolute; z-index: 450; bottom: 13px; left: 13px; max-width: calc(100% - 100px); padding: 7px 10px; border: 1px solid rgba(239,233,238,.9); border-radius: 10px; background: rgba(255,255,255,.9); color: #746e77; font-size: 9px; box-shadow: 0 2px 9px rgba(45,37,46,.07); backdrop-filter: blur(7px); }
#nearby-count { color: #a19aa3; font-size: 10px; font-weight: 700; }
.dog-map-marker { position: relative; display: grid; place-items: center; width: 52px !important; height: 62px !important; border: 0 !important; background: transparent !important; cursor: pointer; }
.dog-marker-avatar { position: relative; display: block; width: 43px; height: 43px; overflow: hidden; border: 3px solid #fff; border-radius: 50%; background: #fff0ed; box-shadow: 0 0 0 2px rgba(255,98,95,.9),0 3px 12px rgba(43,34,43,.24); transition: transform .16s, border-color .16s; }
.dog-marker-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.dog-marker-avatar::after { content: ''; position: absolute; inset: -3px; border: 2px solid var(--coral); border-radius: 50%; pointer-events: none; }
.dog-map-marker::after { content: ''; position: absolute; left: 50%; bottom: 2px; width: 11px; height: 11px; border-right: 2px solid #ff655f; border-bottom: 2px solid #ff655f; border-radius: 0 0 3px 0; background: #fff; transform: translateX(-50%) rotate(45deg); }
.dog-marker-label, .dog-map-marker .marker-name { position: absolute; top: -5px; left: 50%; z-index: 1; width: max-content; max-width: 130px; overflow: hidden; padding: 4px 7px; border: 1px solid rgba(244,233,232,.9); border-radius: 9px; background: #fff; color: #554d57; font-size: 9px; font-weight: 800; box-shadow: 0 2px 9px rgba(43,34,43,.15); text-overflow: ellipsis; white-space: nowrap; opacity: 0; transform: translate(-50%, -2px); transition: opacity .14s, transform .14s; pointer-events: none; }
.dog-map-marker:hover .dog-marker-label, .dog-map-marker:hover .marker-name, .dog-marker-selected .dog-marker-label, .dog-marker-selected .marker-name { opacity: 1; transform: translate(-50%, 0); }
.dog-map-marker:hover .dog-marker-avatar, .dog-marker-selected .dog-marker-avatar { transform: scale(1.12); border-color: #ff8077; }
.nearby-side-panel { display: grid; gap: 13px; min-width: 0; }
#nearby-list { min-height: 0; max-height: 320px; overflow-y: auto; padding: 13px; border: 1px solid #efebef; border-radius: 18px; background: #fff; box-shadow: 0 8px 24px rgba(54,48,57,.05); }
.nearby-list-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 7px; }
.nearby-list-heading h3 { margin: 0; color: #47414a; font: 800 13px 'Manrope', sans-serif; }
.nearby-dog-card { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 7px; border: 0; border-bottom: 1px solid #f3eff2; border-radius: 10px; background: #fff; text-align: left; cursor: pointer; transition: background .15s; }
.nearby-dog-card:last-child { border-bottom: 0; }
.nearby-dog-card:hover, .nearby-dog-card.selected, .nearby-dog-card[aria-pressed="true"] { background: #fff5f3; }
.nearby-dog-card img { width: 43px; height: 43px; flex: none; border-radius: 14px; object-fit: cover; }
.nearby-dog-copy { min-width: 0; flex: 1; }
.nearby-dog-copy strong, .nearby-dog-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nearby-dog-copy strong { color: #47414a; font-size: 11px; }
.nearby-dog-copy small { margin-top: 4px; color: #9e97a0; font-size: 9px; }
.nearby-dog-distance { flex: none; color: #928b94; font-size: 9px; }
.nearby-preview { min-width: 0; overflow: hidden; border: 1px solid #efebef; border-radius: 18px; background: #fff; box-shadow: 0 8px 24px rgba(54,48,57,.05); }
#nearby-preview:empty { display: none; }
.nearby-preview-photo, #nearby-preview-photo { display: block; width: 100%; height: 128px; object-fit: cover; background: #f2e5df; }
.nearby-preview-content { padding: 12px 14px 14px; }
.nearby-preview h3, #nearby-preview-name { margin: 0; color: #3e3942; font: 800 15px 'Manrope', sans-serif; }
.nearby-preview-meta, #nearby-preview-meta { margin-top: 5px; color: #9b949d; font-size: 9px; }
.nearby-preview-bio, #nearby-preview-bio { margin: 9px 0; color: #78727b; font-size: 10px; line-height: 1.45; }
.nearby-preview-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 12px; }
.nearby-preview-tags span { padding: 5px 7px; border-radius: 13px; background: #fff1ee; color: #bd6a67; font-size: 8px; font-weight: 700; }
.nearby-preview-actions { display: flex; gap: 7px; }
.nearby-preview-actions button { min-height: 36px; flex: 1; padding: 0 9px; border-radius: 10px; font-size: 10px; }
.nearby-disclaimer { margin: 2px 2px 0; color: #aaa3ab; font-size: 8px; line-height: 1.45; }
.nearby-empty { padding: 17px 12px; color: #9c959e; font-size: 10px; line-height: 1.5; text-align: center; }
.brand-lockup { min-width: 0; display: flex; align-items: flex-start; flex-direction: column; gap: 2px; }
.brand-lockup .brand-name { color: #302d35; font: 900 22px/1 'Manrope',sans-serif; letter-spacing: -.8px; }
.brand-descriptor { color: #ee6c69; font: 800 11px/1.1 'DM Sans',sans-serif; letter-spacing: .02em; text-transform: none; }
.brand + .brand-tagline { margin: -22px 0 23px 65px; color: #a58e98; font-size: 8px; font-weight: 700; letter-spacing: .025em; }
.mobile-brand { display: none; grid-template-columns: 29px auto; grid-template-rows: 1fr 1fr; column-gap: 7px; row-gap: 1px; white-space: nowrap; }
.mobile-brand .brand-mark { grid-column: 1; grid-row: 1 / span 2; }
.mobile-brand-name { grid-column: 2; align-self: end; }
.mobile-brand-tagline { grid-column: 2; align-self: start; color: #c4817c; font: 700 8px/1.1 'DM Sans',sans-serif; letter-spacing: .025em; }
.deck-actions { gap: 13px; margin-top: 11px; }
.action-button { width: 64px; height: 64px; border: 2px solid currentColor; box-shadow: 0 8px 22px rgba(57,42,55,.1); }
.action-button .action-icon { display: grid; place-items: center; font-size: 28px; }
.action-button svg { display: block; width: 29px; height: 29px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.action-nope { width: 64px; height: 64px; border-color: #ffb8bd; background: #fff0f1; color: #ed4f64; }
.action-like { width: 64px; height: 64px; border-color: #a7e8d5; background: #eafff7; color: #20ad83; }
.action-superlike { width: 56px; height: 56px; border-color: #b9d7fa; background: #eff6ff; color: #4188dc; }
.action-rewind { width: 51px; height: 51px; border-color: #f1d89f; background: #fff8e8; color: #c58a22; }
.action-boost { width: 51px; height: 51px; border-color: #d3c7f7; background: #f5f1ff; color: #8064d8; }
.action-rewind svg, .action-boost svg { width: 24px; height: 24px; }
.action-superlike svg { width: 27px; height: 27px; fill: currentColor; stroke: currentColor; }
.action-nope svg, .action-like svg { width: 31px; height: 31px; }
.action-like svg { fill: currentColor; stroke: currentColor; }
.action-caption { width: min(100%, 345px); margin-top: 8px; color: #827b85; font-size: 10px; font-weight: 700; }
.action-button:hover { transform: translateY(-3px) scale(1.06); box-shadow: 0 12px 25px rgba(57,42,55,.17); }

@media (max-width: 900px) {
  .nearby-layout { grid-template-columns: minmax(0, 1fr) 265px; gap: 12px; }
  .map-container, #nearby-map { height: min(55vh, 500px); min-height: 370px; }
}
@media (max-width: 680px) {
  .side-nav { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .nearby-layout { display: flex; flex-direction: column; gap: 12px; width: 100%; }
  .map-container, #nearby-map { width: 100%; height: min(42dvh, 345px); min-height: 275px; border-width: 3px; border-radius: 17px; }
  .leaflet-container { border-radius: 14px; }
  .map-tools { top: 9px; right: 9px; gap: 6px; }
  #recenter-map, .map-control-button { min-height: 34px; padding: 0 9px; font-size: 9px; }
  .park-chips, .nearby-parks { top: 9px; left: 9px; gap: 5px; max-width: calc(100% - 103px); }
  .park-chips button, .nearby-parks button, button[data-park] { min-height: 28px; padding: 0 8px; font-size: 8px; }
  #map-status { bottom: 9px; left: 9px; font-size: 8px; }
  .nearby-side-panel { width: 100%; grid-template-columns: 1fr; }
  #nearby-list { width: 100%; max-height: 220px; padding: 10px; }
  .nearby-preview { width: 100%; }
  .nearby-preview-photo, #nearby-preview-photo { height: 116px; }
  #nearby-view { padding-top: 15px; }
  #nearby-view .section-intro { margin-bottom: 13px; }
  #nearby-view .section-intro h2 { margin-top: 4px; font-size: 21px; }
  #nearby-view .section-intro p { font-size: 10px; }
  .nearby-disclaimer { padding: 2px 3px 0; }
  .action-button { width: 55px; height: 55px; }
  .action-nope, .action-like { width: 55px; height: 55px; }
  .action-superlike { width: 50px; height: 50px; }
  .action-rewind, .action-boost { width: 44px; height: 44px; }
  .action-button .action-icon { font-size: 25px; }
  .action-nope svg, .action-like svg { width: 27px; height: 27px; }
  .action-caption { width: min(100%, 306px); margin-top: 7px; font-size: 9px; }
  .deck-actions { gap: 8px; }
}
@media (max-width: 390px) {
  .mobile-brand { column-gap: 6px; }
  .mobile-brand-name { font-size: 12px; }
  .mobile-brand-tagline { font-size: 7px; }
  .nearby-layout { gap: 10px; }
  .map-container, #nearby-map { height: min(40dvh, 325px); min-height: 255px; }
  .park-chips, .nearby-parks { max-width: calc(100% - 95px); }
  .park-chips button, .nearby-parks button, button[data-park] { padding: 0 7px; font-size: 7px; }
  .nearby-dog-card img { width: 39px; height: 39px; }
  .action-button { width: 53px; height: 53px; }
  .action-nope, .action-like { width: 53px; height: 53px; }
  .action-superlike { width: 48px; height: 48px; }
  .action-rewind, .action-boost { width: 42px; height: 42px; }
  .action-caption { width: min(100%, 286px); font-size: 8px; }
}

/* Current Nearby DOM: park filters sit above a map/list column and profile panel. */
.demo-location-label { display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; border: 1px solid #f0e8eb; border-radius: 12px; background: #fff; color: #9a8792; font-size: 9px; font-weight: 700; white-space: nowrap; }
.park-filters { display: flex; flex-wrap: wrap; gap: 7px; margin: -7px 0 13px; }
.park-chip { min-height: 31px; padding: 0 12px; border: 1px solid #eee8ed; border-radius: 20px; background: #fff; color: #77717a; font-size: 9px; font-weight: 800; box-shadow: 0 3px 10px rgba(45,37,46,.04); cursor: pointer; transition: .15s; }
.park-chip:hover { border-color: #ffc9c4; color: #df6263; }
.park-chip.active, .park-chip[aria-pressed="true"] { border-color: #ffbdb7; background: #fff0ed; color: #dd6264; }
.nearby-layout { grid-template-rows: auto; grid-auto-rows: auto; align-items: start; }
.nearby-layout > .nearby-map-column { grid-column: 1; grid-row: 1; min-width: 0; }
.nearby-layout > #nearby-preview { grid-column: 2; grid-row: 1; align-self: start; }
.nearby-map-column { position: relative; min-width: 0; }
.nearby-map-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.nearby-map-toolbar > div { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; min-width: 0; }
.nearby-map-toolbar strong { color: #57515b; font-size: 11px; }
#nearby-status { color: #aaa3ab; font-size: 9px; }
.nearby-map-toolbar #recenter-map { position: static; flex: none; min-height: 34px; }
.nearby-map-column #nearby-map { height: min(58vh, 500px); min-height: 380px; }
.nearby-map-column .map-status { position: relative; z-index: 450; width: fit-content; max-width: calc(100% - 28px); margin: -36px 14px 14px; padding: 7px 10px; border: 1px solid rgba(239,233,238,.9); border-radius: 10px; background: rgba(255,255,255,.93); color: #746e77; font-size: 9px; box-shadow: 0 2px 9px rgba(45,37,46,.07); pointer-events: none; }
.nearby-list-wrap { padding: 13px 14px 9px; border: 1px solid #efebef; border-radius: 17px; background: #fff; box-shadow: 0 7px 22px rgba(54,48,57,.045); }
.nearby-list-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 7px; margin: 0 0 6px; }
.nearby-list-heading h3 { margin: 0; color: #47414a; font: 800 12px 'Manrope',sans-serif; }
.nearby-list-heading span { color: #aaa3ab; font-size: 8px; }
ul#nearby-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2px 10px; max-height: 205px; overflow-y: auto; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; list-style: none; }
ul#nearby-list li { min-width: 0; margin: 0; padding: 0; }
ul#nearby-list .nearby-dog-card { min-height: 58px; padding: 7px 5px; border-bottom: 1px solid #f3eff2; }
.nearby-card-arrow { color: #b8afb9; font-size: 19px; }
.nearby-preview { min-height: 230px; }
.nearby-preview-empty { display: grid; align-content: center; justify-items: center; min-height: 245px; padding: 25px; border-radius: 17px; background: linear-gradient(145deg,#fff9f7,#fff); text-align: center; }
.nearby-preview-empty > span { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 13px; border-radius: 17px; background: #fff0ed; font-size: 24px; }
.nearby-preview-empty h3 { margin: 0; color: #504953; font: 800 13px 'Manrope',sans-serif; }
.nearby-preview-empty p { max-width: 205px; margin: 7px 0 0; color: #9c959e; font-size: 9px; line-height: 1.5; }
.nearby-preview-content:not(.hidden) { display: block; }
.nearby-preview-photo { height: 204px; }
.nearby-preview-copy { padding: 14px 15px 15px; }
.nearby-preview-copy h3 { margin: 5px 0 0; color: #403b44; font: 800 16px 'Manrope',sans-serif; }
.nearby-preview-copy #nearby-preview-meta { margin: 5px 0 0; color: #98919a; font-size: 9px; }
.nearby-preview-copy #nearby-preview-bio { margin: 10px 0 0; color: #77717a; font-size: 10px; line-height: 1.48; }
.nearby-preview-park { margin: 9px 0 0; color: #c07974; font-size: 9px; font-weight: 700; }
.nearby-preview-tags { margin: 9px 0 12px; }
.dog-map-marker { width: 54px !important; height: 60px !important; }
.dog-map-marker::after { bottom: 8px; z-index: -1; width: 12px; height: 12px; background: #fff; }
.dog-marker-avatar.dog-marker-selected { transform: scale(1.14); border-color: #f45c63; box-shadow: 0 0 0 4px rgba(244,92,99,.32),0 4px 14px rgba(43,34,43,.25); }
.dog-marker-avatar.dog-marker-selected::after { border-color: #f45c63; }
.dog-map-marker:hover .dog-marker-avatar { transform: scale(1.1); }
.leaflet-container .dog-marker-avatar { width: 48px; height: 48px; }
.leaflet-container .dog-marker-avatar img { position: absolute; inset: 0; display: block; width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; max-width: none !important; max-height: none !important; object-fit: cover; border-radius: 50%; }
.dog-marker-avatar.dog-marker-selected + .dog-marker-label, .dog-map-marker:focus-visible .dog-marker-label { opacity: 1; transform: translate(-50%,0); }
.leaflet-tooltip.dog-marker-label { padding: 5px 8px; border: 1px solid #f0dedd; border-radius: 10px; background: #fff; color: #514a54; font: 800 9px 'DM Sans',sans-serif; box-shadow: 0 3px 11px rgba(43,34,43,.13); }
.leaflet-tooltip.dog-marker-label::before { border-top-color: #fff; }
.nearby-map-column .map-attribution { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 3px; margin: 6px 7px 3px; color: #a09aa3; font-size: 7px; line-height: 1.35; }
.nearby-map-column .map-attribution a { color: #c27b78; text-decoration: none; }
.nearby-map-column .map-attribution a:hover { text-decoration: underline; }
#nearby-view #map-status { position: static; display: inline-flex; width: fit-content; max-width: 100%; margin: 0 0 12px; padding: 6px 9px; border: 1px solid #f0ebef; border-radius: 10px; background: #fff; color: #89828b; font-size: 8px; box-shadow: none; pointer-events: auto; }
#nearby-view #map-status.map-unavailable-message { border-color: #f4d4d1; background: #fff7f5; color: #a35f5c; }

@media (max-width: 900px) {
  .nearby-map-column #nearby-map { height: min(51vh, 450px); min-height: 350px; }
  ul#nearby-list { grid-template-columns: 1fr; max-height: 245px; }
}
@media (max-width: 680px) {
  .sidebar .brand-tagline { display: none !important; }
  .sidebar > .brand-tagline { display: none !important; }
  .mobile-brand { display: grid !important; }
  .nav-icon svg { display: block; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  #nearby-view { padding-top: 15px; }
  .nearby-intro { margin-bottom: 14px; }
  .nearby-intro h2 { font-size: 21px; }
  .nearby-intro p { font-size: 10px; }
  .demo-location-label { padding: 5px 7px; font-size: 8px; }
  .park-filters { gap: 6px; margin: -3px 0 10px; }
  .park-chip { min-height: 29px; padding: 0 10px; font-size: 8px; }
  .nearby-layout { display: flex; flex-direction: column; gap: 11px; }
  .nearby-map-column { width: 100%; }
  .nearby-map-toolbar { margin-bottom: 7px; }
  .nearby-map-column #nearby-map { height: min(42dvh, 345px); min-height: 275px; border-radius: 16px; }
  #nearby-view #map-status { margin-bottom: 10px; padding: 6px 8px; font-size: 8px; }
  .nearby-list-wrap { padding: 11px 10px 8px; }
  ul#nearby-list { grid-template-columns: 1fr; max-height: 205px; }
  .nearby-layout > #nearby-preview { width: 100%; }
  .nearby-preview { min-height: 0; }
  .nearby-preview-empty { min-height: 145px; padding: 17px; }
  .nearby-preview-photo { height: 140px; }
  .nearby-preview-copy { padding: 12px; }
  .nearby-disclaimer { margin-bottom: 4px; }
  .dog-map-marker { width: 48px !important; height: 60px !important; }
  .leaflet-container .dog-marker-avatar { width: 44px; height: 44px; }
  .leaflet-tooltip.dog-marker-label { font-size: 8px; }
}
@media (max-width: 390px) {
  .nearby-map-column #nearby-map { height: min(39dvh, 320px); min-height: 250px; }
  .demo-location-label { white-space: normal; text-align: right; }
}

/* Laptop and widescreen layout: share centered content frames across headers and views. */
.app-shell { grid-template-columns: 300px minmax(0, 1fr); }
.main-content { min-width: 0; padding: 0 clamp(24px, 3vw, 48px) 32px; }
.topbar, .view, .content-view { width: 100%; max-width: 1170px; }
.topbar { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 20px; }
.page-heading { min-width: 0; }
.page-heading h1 { max-width: 100%; font-size: clamp(17px,1.3vw,20px); }
.topbar-actions { min-width: 0; flex: none; gap: 8px; }
.content-view { padding-top: 12px; }
.section-intro { margin-bottom: 15px; }
.section-intro h2 { font-size: clamp(21px,1.8vw,25px); }
.app-footer { width: 100%; max-width: 1170px; }
.main-content[data-current-view="discover"] .topbar,
.main-content[data-current-view="discover"] .app-footer { max-width: 850px; }
#discover-view:not(.hidden) { display: block; width: 100%; max-width: 850px; margin: 0 auto; }
#discover-view .deck-layout { width: 100%; max-width: 850px; grid-template-columns: minmax(0,1fr) 235px; gap: 25px; margin: 0 auto; }
#discover-view #deck-area { width: 100%; max-width: 450px; }
#discover-view .dog-card { width: min(100%,416px); height: auto; min-height: 0; }
#discover-view .dog-photo-wrap { height: min(54vh,490px); min-height: min(400px,52vh); }
#discover-view .deck-actions { width: 100%; margin: 11px auto 0; }
#discover-view .action-caption { width: min(100%,345px); margin: 8px auto 0; }
#discover-view .deck-hint { width: 100%; text-align: center; }
#discover-view .discovery-aside { align-self: center; }
.main-content[data-current-view="nearby"] #nearby-view .section-intro h2,
.main-content[data-current-view="matches"] #matches-view .section-intro h2,
.main-content[data-current-view="messages"] #messages-view .section-intro h2 { display: none; }
.main-content[data-current-view="nearby"] #nearby-view { padding-top: 10px; }
.main-content[data-current-view="nearby"] #nearby-view .section-intro { margin-bottom: 10px; }
.main-content[data-current-view="nearby"] #nearby-view .section-intro p { margin: 1px 0 0; }
.nearby-layout { width: 100%; max-width: 1170px; grid-template-columns: minmax(0,1fr) 290px; gap: 14px 18px; }
.nearby-layout > .nearby-map-column { min-width: 0; }
.nearby-layout > #nearby-preview { margin-top: 43px; }
.nearby-map-column #nearby-map { height: clamp(280px,36vh,420px); min-height: 0; }
.nearby-list-wrap { padding: 10px 12px 7px; }
ul#nearby-list { max-height: 175px; }
.nearby-list-heading { margin-bottom: 3px; }
.main-content[data-current-view="nearby"] .topbar,
.main-content[data-current-view="matches"] .topbar,
.main-content[data-current-view="messages"] .topbar { max-width: 1170px; }

@media (min-width: 1600px) {
  .app-shell { grid-template-columns: 300px minmax(0,1fr); }
  .sidebar { padding-right: 22px; padding-left: 22px; }
}
@media (max-width: 1400px) {
  .app-shell { grid-template-columns: 280px minmax(0,1fr); }
  .main-content { padding-right: 28px; padding-left: 28px; }
  .nearby-layout { grid-template-columns: minmax(0,1fr) 280px; gap: 12px; }
  .nearby-layout > #nearby-preview { margin-top: 42px; }
}
@media (max-width: 1100px) and (min-width: 901px) {
  .main-content { padding-right: 22px; padding-left: 22px; }
  .topbar { gap: 12px; }
  .location-pill { padding-right: 8px; padding-left: 8px; font-size: 10px; }
  .filter-button { min-height: 38px; padding: 0 10px; }
  .nearby-layout { grid-template-columns: minmax(0,1fr) 265px; gap: 11px; }
  .nearby-layout > #nearby-preview { margin-top: 41px; }
  .nearby-preview-photo { height: 170px; }
  #discover-view .deck-layout { grid-template-columns: minmax(0,1fr) 220px; gap: 18px; }
}
@media (min-height: 900px) {
  #discover-view .dog-card { height: auto; min-height: 0; }
}

@media (max-width: 900px) {
  .app-shell { grid-template-columns: 260px minmax(0,1fr); }
  .main-content { padding-right: 22px; padding-left: 22px; }
  #discover-view .deck-layout { grid-template-columns: minmax(0,1fr) 220px; gap: 16px; }
  #discover-view .discovery-aside { display: grid; }
  .nearby-layout { grid-template-columns: minmax(0,1fr) 250px; gap: 10px; }
  .nearby-layout > #nearby-preview { margin-top: 40px; }
}
@media (max-width: 680px) {
  .app-shell { display: flex; flex-direction: column; min-height: 100dvh; }
  .sidebar { position: fixed; z-index: 8; inset: auto 0 0; width: 100%; height: auto; padding: 6px 14px calc(7px + env(safe-area-inset-bottom)); border-top: 1px solid #f0edf0; border-right: 0; box-shadow: 0 -6px 22px rgba(45,35,45,.04); }
  .brand, .sidebar > .brand-tagline, .sidebar-section-label, .sidebar-rule, .sidebar-heading, .sidebar-matches, .sidebar-bottom { display: none !important; }
  .side-nav { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 3px; padding: 0; }
  .side-nav button { min-height: 51px; justify-content: center; flex-direction: column; gap: 2px; padding: 4px 5px; border-radius: 10px; font-size: 9px; }
  .nav-icon { width: 20px; }
  .nav-count { position: absolute; transform: translate(13px,-13px); min-width: 17px; padding: 2px 4px; font-size: 8px; }
  .main-content { min-height: 100dvh; padding: 0 14px calc(80px + env(safe-area-inset-bottom)); }
  .topbar, .main-content[data-current-view="discover"] .topbar { height: 50px; max-width: 100%; }
  .mobile-brand { display: grid !important; }
  .page-heading, .location-pill { display: none !important; }
  .topbar-actions { margin-left: auto; gap: 7px; }
  .top-avatar { width: 36px; height: 36px; }
  .content-view { padding-top: 15px; }
  .section-intro h2,
  .main-content[data-current-view="nearby"] #nearby-view .section-intro h2,
  .main-content[data-current-view="matches"] #matches-view .section-intro h2,
  .main-content[data-current-view="messages"] #messages-view .section-intro h2 { display: block; }
  .section-intro { align-items: flex-start; margin-bottom: 14px; }
  .app-footer { display: none; }
  #discover-view:not(.hidden) { max-width: 430px; padding-top: 0; }
  #discover-view .deck-layout { display: block; width: 100%; max-width: 430px; }
  #discover-view #deck-area { width: 100%; max-width: 100%; }
  #discover-view .discovery-aside, #discover-view .deck-hint { display: none !important; }
  #discover-view .dog-photo-wrap { height: min(calc(100dvh - 340px),335px); min-height: 245px; }
  #discover-view .dog-card-details { padding: 9px 13px 10px; }
  #discover-view .deck-actions { gap: 8px; margin-top: 8px; }
  #discover-view .action-caption { width: min(100%,306px); margin-top: 7px; font-size: 9px; }
  .nearby-layout { display: flex; flex-direction: column; gap: 11px; width: 100%; }
  .nearby-layout > #nearby-preview { width: 100%; margin-top: 0; }
  .nearby-map-column { width: 100%; }
  .nearby-map-column #nearby-map { height: min(42dvh,345px); min-height: 275px; }
  .nearby-map-column #map-status { margin: 0 0 10px; }
  .nearby-preview { min-height: 0; }
  .nearby-preview-empty { min-height: 145px; }
  .nearby-preview-photo { height: 140px; }
  #matches-view, #messages-view { max-width: 100%; }
  .messages-layout { min-height: calc(100dvh - 160px); }
  .conversation-panel { min-height: 53vh; }
  .chat-panel { height: min(82vh,650px); }
  #nearby-view .section-intro { margin-bottom: 13px; }
  .park-filters { gap: 6px; margin: -3px 0 10px; }
  .nearby-map-toolbar { margin-bottom: 7px; }
  .nearby-map-column #nearby-map { border-radius: 16px; }
}
@media (max-width: 390px) {
  .main-content { padding-right: 10px; padding-left: 10px; }
  .nearby-map-column #nearby-map { height: min(39dvh,320px); min-height: 250px; }
  .nearby-layout { gap: 10px; }
}

/* Pup-themed discovery feedback: animations stay over the card and never move layout. */
#discover-view #deck-area { position: relative; }
#discover-view .action-caption { color: #716b74; font-weight: 800; letter-spacing: .005em; }
#discover-view .action-caption span { white-space: nowrap; }
#discover-view .action-nope .action-icon,
#discover-view .action-like .action-icon,
#discover-view .action-superlike .action-icon { width: 33px; height: 33px; stroke-width: 2.15; }
#discover-view .action-nope .action-icon,
#discover-view .action-like .action-icon,
#discover-view .action-superlike .action-icon { fill: none !important; }
#discover-view .action-nope .action-icon path,
#discover-view .action-like .action-icon path,
#discover-view .action-superlike .action-icon path { fill: none !important; }
#discover-view .action-button--activated { animation-duration: 940ms; animation-fill-mode: both; }
#discover-view #nope-btn.action-button--activated { animation-name: pup-walk-away; }
#discover-view #nope-btn.action-button--activated .action-icon { animation: pup-icon-trot 940ms ease-in-out both; }
#discover-view #nope-btn.action-button--activated .action-icon .paw-trail { transform-box: fill-box; transform-origin: left center; animation: paws-forward 920ms ease-in-out both; }
#discover-view #like-btn.action-button--activated { animation-name: pup-wag-bounce; }
#discover-view #like-btn.action-button--activated .action-icon { animation: dog-head-wag 940ms ease-in-out both; }
#discover-view #superlike-btn.action-button--activated { animation-name: pup-zoomies; }
#discover-view #superlike-btn.action-button--activated .action-icon { animation: dog-icon-zoomies 940ms cubic-bezier(.4,0,.2,1) both; }
#discover-view #like-btn.action-button--activated .action-icon .dog-tail {
  transform-box: fill-box; transform-origin: 100% 100%; animation: tail-wag .56s ease-in-out 3;
}
#discover-view #deck-feedback.action-feedback {
  position: absolute; z-index: 8; top: 31%; left: 50%; display: flex; align-items: center; gap: 10px;
  max-width: calc(100% - 28px); padding: 11px 16px 11px 12px; border: 2px solid #fff; border-radius: 19px;
  background: rgba(255,255,255,.96); box-shadow: 0 13px 36px rgba(51,37,44,.2); color: #433c46;
  opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%,-50%) scale(.82); transform-origin: center;
}
#discover-view #deck-feedback.is-visible { visibility: visible; animation: pup-feedback-pop 1.38s cubic-bezier(.18,.76,.3,1) both; }
#discover-view .feedback-icon { display: grid; flex: none; width: 43px; height: 43px; place-items: center; border-radius: 50%; background: #fff0ed; color: #e86669; }
#discover-view .feedback-icon svg { display: block; width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 2.15; stroke-linecap: round; stroke-linejoin: round; }
#discover-view .feedback-text { color: inherit; font: 900 17px/1 'Manrope', 'DM Sans', sans-serif; letter-spacing: -.035em; }
#discover-view #deck-feedback[data-action="next-pup"] { border-color: #ffd6d8; }
#discover-view #deck-feedback[data-action="next-pup"] .feedback-icon { background: #fff0f1; color: #e65368; }
#discover-view #deck-feedback[data-action="next-pup"] .feedback-icon svg { animation: feedback-trot .56s ease-in-out 2; }
#discover-view #deck-feedback[data-action="next-pup"] .feedback-icon svg .paw-trail { transform-box: fill-box; transform-origin: left center; animation: paws-forward .72s ease-in-out 2; }
#discover-view #deck-feedback[data-action="wag-tail"] { border-color: #c9f1e4; }
#discover-view #deck-feedback[data-action="wag-tail"] .feedback-icon { background: #eafff7; color: #20a77f; }
#discover-view #deck-feedback[data-action="wag-tail"] .feedback-icon svg { animation: feedback-wag .44s ease-in-out 3; }
#discover-view #deck-feedback[data-action="wag-tail"] .feedback-icon svg .dog-tail { transform-box: fill-box; transform-origin: 100% 100%; animation: tail-wag .36s ease-in-out 4; }
#discover-view #deck-feedback[data-action="zoomies"] { border-color: #d1e4ff; }
#discover-view #deck-feedback[data-action="zoomies"] .feedback-icon { background: #eff6ff; color: #4086d8; }
#discover-view #deck-feedback[data-action="zoomies"] .feedback-icon svg { animation: feedback-zoom .62s cubic-bezier(.4,0,.2,1) 2; }
#discover-view #deck-feedback[data-action="rewind"] .feedback-icon { background: #fff7e7; color: #bd841e; }

@keyframes pup-walk-away {
  0%, 100% { transform: translate(0,0) rotate(0) scale(1); }
  18%, 52% { transform: translate(1px,-4px) rotate(-12deg) scale(.98); }
  35%, 69% { transform: translate(3px,2px) rotate(10deg) scale(.98); }
  84% { transform: translate(7px,-5px) rotate(-11deg) scale(.91); }
}
@keyframes pup-wag-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  18% { transform: translateY(-8px) scale(1.12); }
  36% { transform: translateY(2px) scale(.94); }
  54% { transform: translateY(-6px) scale(1.08); }
  72% { transform: translateY(1px) scale(.97); }
  88% { transform: translateY(-3px) scale(1.04); }
}
@keyframes tail-wag { 0%,100% { transform: rotate(0); } 25% { transform: rotate(38deg); } 75% { transform: rotate(-32deg); } }
@keyframes paws-forward { 0%,100% { transform: translateX(0) scale(.76); opacity: .55; } 34% { transform: translateX(2px) scale(1.04); opacity: 1; } 67% { transform: translateX(4px) scale(.86); opacity: .7; } }
@keyframes pup-icon-trot { 0%,100% { transform: translateX(0) rotate(0); } 22% { transform: translate(1px,-3px) rotate(-9deg); } 45% { transform: translate(3px,2px) rotate(8deg); } 68% { transform: translate(5px,-3px) rotate(-8deg); } 86% { transform: translate(8px,1px) rotate(5deg); } }
@keyframes dog-head-wag { 0%,100% { transform: rotate(0) scale(1); } 20% { transform: rotate(-13deg) scale(1.12); } 40% { transform: rotate(11deg) scale(.97); } 60% { transform: rotate(-10deg) scale(1.08); } 80% { transform: rotate(8deg) scale(1.01); } }
@keyframes dog-icon-zoomies { 0%,100% { transform: translate(0,0) rotate(0) scale(1); } 18% { transform: translate(3px,-4px) rotate(24deg) scale(1.16); } 38% { transform: translate(-2px,3px) rotate(-28deg) scale(.92); } 58% { transform: translate(3px,-3px) rotate(22deg) scale(1.12); } 78% { transform: translate(-1px,2px) rotate(-14deg) scale(.98); } }
@keyframes pup-zoomies {
  0%,100% { transform: rotate(0) scale(1); }
  24% { transform: rotate(-17deg) scale(1.12); }
  52% { transform: rotate(13deg) scale(.92); }
  78% { transform: rotate(-10deg) scale(1.08); }
}
@keyframes pup-feedback-pop {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.68) rotate(-5deg); }
  14% { opacity: 1; transform: translate(-50%,-50%) scale(1.08) rotate(2deg); }
  24% { opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(0); }
  78% { opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(0); }
  100% { opacity: 0; transform: translate(-50%,-58%) scale(.94) rotate(2deg); }
}
@keyframes feedback-trot { 0%,100% { transform: translateX(0) rotate(0); } 30% { transform: translateX(3px) rotate(-8deg); } 65% { transform: translateX(-2px) rotate(8deg); } }
@keyframes feedback-wag { 0%,100% { transform: rotate(0) scale(1); } 30% { transform: rotate(-10deg) scale(1.08); } 70% { transform: rotate(9deg) scale(1.04); } }
@keyframes feedback-zoom { 0%,100% { transform: translate(0,0) rotate(0) scale(1); } 25% { transform: translate(3px,-2px) rotate(16deg) scale(1.08); } 50% { transform: translate(-2px,2px) rotate(-13deg) scale(.94); } 75% { transform: translate(2px,-2px) rotate(9deg) scale(1.05); } }

@media (max-width: 680px) {
  #discover-view .action-caption { width: min(100%,330px); font-size: 9px; }
  #discover-view .action-feedback { gap: 8px; padding: 9px 13px 9px 10px; }
  #discover-view .feedback-icon { width: 39px; height: 39px; }
  #discover-view .feedback-icon svg { width: 29px; height: 29px; }
  #discover-view .feedback-text { font-size: 15px; }
}
@media (max-width: 390px) {
  #discover-view .action-caption { width: min(100%,300px); font-size: 9px; }
  #discover-view .action-feedback { gap: 7px; padding: 8px 11px 8px 9px; }
  #discover-view .feedback-icon { width: 35px; height: 35px; }
  #discover-view .feedback-icon svg { width: 26px; height: 26px; }
  #discover-view .feedback-text { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  #discover-view .action-button--activated,
  #discover-view .action-button--activated .action-icon,
  #discover-view .action-button--activated .action-icon path,
  #discover-view .action-feedback.is-visible,
  #discover-view .feedback-icon svg { animation: none !important; }
  #discover-view #deck-feedback.is-visible { opacity: 1; visibility: visible; transform: translate(-50%,-50%); }
}

/* DTD design baseline: bright neighborhood dog club, with photography in the lead. */
:root {
  --ink: #172b45;
  --muted: #68788c;
  --line: #e3e9f0;
  --paper: #fff;
  --canvas: #f6f8fb;
  --coral: #f35f67;
  --coral-deep: #d74755;
  --pink: #ff8178;
  --lavender: #3478d4;
  --mint: #15966e;
  --shadow: 0 20px 54px rgba(31,52,78,.1), 0 3px 9px rgba(31,52,78,.06);
  font-family: 'DM Sans', sans-serif;
  color: var(--ink);
}
html { color-scheme: light; }
body {
  background: radial-gradient(ellipse at 84% 5%, rgba(255,232,225,.65), transparent 30%),
              radial-gradient(ellipse at 3% 80%, rgba(225,242,237,.5), transparent 34%), var(--canvas);
  color: var(--ink); font: 15px/1.5 'DM Sans', sans-serif;
}
h1, h2, h3, .brand-name, .brand-descriptor, .mobile-brand-name, .dog-info h2, .match-card-copy h3,
.conversation-welcome h3, .modal-panel h2, #nearby-preview-name { font-family: 'Fredoka', 'DM Sans', sans-serif; }
.eyebrow { display: none !important; }
button, input, select, textarea { font-family: 'DM Sans', sans-serif; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible {
  outline: 3px solid rgba(52,120,212,.68); outline-offset: 3px;
}
.app-shell { grid-template-columns: clamp(258px, 20vw, 300px) minmax(0,1fr); }
.sidebar {
  padding: 28px 17px 18px; background: linear-gradient(180deg,#fff 0%,#fff 82%,#fff9f7 100%);
  border-right: 1px solid #e7ebf1; box-shadow: 5px 0 28px rgba(26,49,77,.025);
}
.brand { gap: 12px; padding: 1px 10px 24px; }
.brand-mark { width: 46px; height: 46px; border-radius: 16px; background: linear-gradient(145deg,#ff8577,#e84f65); box-shadow: 0 8px 18px rgba(224,76,92,.22); }
.brand-lockup .brand-name { color: var(--ink); font-size: 25px; letter-spacing: -.6px; }
.brand-descriptor { margin-top: 3px; color: #d74d5a; font: 600 15px/1 'Fredoka',sans-serif; letter-spacing: 0; }
.brand + .brand-tagline { margin: -19px 0 26px 68px; color: #708096; font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.sidebar-section-label { color: #74849a; font-size: 11px; letter-spacing: .08em; }
.side-nav { gap: 5px; }
.nav-item, .side-nav button, .side-nav a {
  min-height: 49px; padding: 0 13px; border: 1px solid transparent; border-radius: 14px;
  color: #50637a; font-size: 14px; font-weight: 700; transition: background .16s,color .16s,border-color .16s,transform .16s;
}
.nav-icon { width: 23px; height: 23px; }
.side-nav button:hover, .side-nav a:hover, .nav-item:hover { background: #fff4f2; color: #cc4655; }
.side-nav button.active, .side-nav button[aria-current="page"], .nav-item.active {
  border-color: #ffd5d2; background: #fff0ee; color: #c93f50; box-shadow: inset 3px 0 #f35f67;
}
.nav-count { min-width: 24px; padding: 3px 8px; background: #e65361; font-size: 11px; }
.sidebar-rule { margin: 20px 7px 18px; background: #e9edf2; }
.sidebar-heading { padding: 0 10px 10px; color: #50637a; font-size: 11px; letter-spacing: .04em; }
.sidebar-heading button, .text-button { color: #c94251; font-size: 12px; }
.sidebar-matches { gap: 5px; }
.sidebar-match { min-height: 58px; padding: 7px 9px; border-radius: 13px; }
.sidebar-match:hover { background: #f3f6fa; }
.sidebar-match img { width: 42px; height: 42px; }
.sidebar-match strong { color: var(--ink); font-size: 13px; }
.sidebar-match small { color: #718198; font-size: 11px; }
.tip-card { gap: 11px; margin-bottom: 12px; padding: 15px 13px; border: 1px solid #f1ded9; border-radius: 17px; background: #fff4f1; }
.tip-card strong { color: var(--ink); font-size: 13px; }
.tip-card p { color: #5d6e83; font-size: 12px; }
#profile-trigger, .sidebar-profile, .user-profile { min-height: 58px; border-color: #e3e9f0; border-radius: 16px; background: #fff; }
.user-copy strong { color: var(--ink); font-size: 13px; }
.user-copy small { color: #708096; font-size: 11px; }

.main-content { min-width: 0; padding: 0 clamp(22px,3.2vw,52px) 28px; }
.main-content { display: flex; flex-direction: column; align-items: center; }
.topbar, .view, .content-view, .app-footer { width: 100%; max-width: 1280px; margin-left: auto; margin-right: auto; }
.main-content[data-current-view="discover"] .topbar { max-width: 1130px; }
.main-content[data-current-view="discover"] #discover-view { max-width: 1130px; }
.main-content[data-current-view="nearby"] .topbar,
.main-content[data-current-view="matches"] .topbar,
.main-content[data-current-view="messages"] .topbar { max-width: 1280px; }
.main-content[data-current-view="nearby"] #nearby-view,
.main-content[data-current-view="matches"] #matches-view,
.main-content[data-current-view="messages"] #messages-view { max-width: 1280px; }
.topbar { min-height: 86px; height: auto; gap: 24px; border-bottom: 1px solid rgba(220,228,237,.75); }
.page-heading h1, #view-title { margin: 0; color: var(--ink); font: 600 clamp(23px,2vw,30px)/1.12 'Fredoka',sans-serif; letter-spacing: -.025em; }
.topbar-actions { gap: 10px; }
.location-pill { min-height: 43px; padding: 0 13px; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: #50637a; font-size: 13px; font-weight: 700; }
.filter-button { min-height: 44px; padding: 0 15px; border: 1px solid #ffd3ce; border-radius: 14px; background: #fff; color: #bd3f4e; box-shadow: 0 3px 10px rgba(51,64,84,.05); font-size: 13px; font-weight: 800; }
.filter-button:hover { background: #fff1ef; border-color: #f5a7a3; }
.top-avatar { width: 46px; height: 46px; border: 2px solid #fff; box-shadow: 0 0 0 1px #e3e9f0,0 4px 12px rgba(31,52,78,.12); }
.app-footer { margin: 22px auto 0; padding: 12px 2px 0; border-top: 1px solid var(--line); color: #68788c; font-size: 12px; }

/* Discover: broad portrait card, quiet details panel, generous action targets. */
#discover-view:not(.hidden) { width: 100%; max-width: 1130px; margin: 0 auto; padding-top: 8px; }
#discover-view .deck-layout { width: 100%; max-width: 1080px; grid-template-columns: minmax(0,470px) minmax(230px,285px); gap: clamp(28px,4vw,58px); justify-content: center; }
#discover-view #deck-area { width: min(100%,480px); }
#discover-view .dog-card { width: min(100%,456px); overflow: hidden; border: 1px solid #dfe7ef; border-radius: 27px; background: #fff; box-shadow: 0 26px 64px rgba(27,50,76,.18),0 4px 12px rgba(27,50,76,.08); }
#discover-view .dog-photo-wrap { height: min(52vh,500px); min-height: 380px; overflow: hidden; border-radius: 26px 26px 0 0; }
#discover-view .dog-image { transform: scale(1.005); transition: transform .45s ease,object-position .3s ease; }
#discover-view .dog-card:hover .dog-image { transform: scale(1.035); }
#discover-view .photo-shade { background: linear-gradient(180deg,rgba(11,27,45,.12) 0%,transparent 32%,rgba(12,26,43,.05) 53%,rgba(10,23,40,.76) 100%); }
#discover-view .dog-info, #discover-view #dog-info { left: 24px; right: 24px; bottom: 23px; }
#discover-view .dog-info h2 { margin: 0; color: #fff; font-size: clamp(34px,3vw,42px); font-weight: 600; letter-spacing: -.025em; text-shadow: 0 2px 12px rgba(0,0,0,.22); }
#discover-view .dog-info .dog-age { color: rgba(255,255,255,.95); font: 500 27px/1 'Fredoka',sans-serif; }
#discover-view .dog-subtitle { margin-top: 5px; color: rgba(255,255,255,.95); font-size: 15px; font-weight: 700; text-shadow: 0 1px 8px rgba(0,0,0,.3); }
#discover-view .verified-check { color: #b7e3ff; font-size: 20px; }
#discover-view .card-top-badges { top: 17px; left: 17px; right: 17px; }
#discover-view .verified-badge, #discover-view .online-badge { min-height: 31px; padding: 0 11px; border: 1px solid rgba(255,255,255,.46); border-radius: 999px; background: rgba(20,39,60,.4); color: #fff; font-size: 11px; font-weight: 700; backdrop-filter: blur(10px); }
#discover-view .photo-counter { top: 17px; right: 17px; min-width: 52px; min-height: 30px; padding: 5px 9px; border-radius: 999px; background: rgba(20,39,60,.55); color: #fff; font-size: 11px; font-weight: 800; }
#discover-view .photo-arrow { width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; background: rgba(20,39,60,.42); color: #fff; font-size: 28px; backdrop-filter: blur(8px); }
#discover-view .photo-dots { gap: 6px; }
#discover-view .photo-dot { width: 9px; height: 9px; border: 1px solid rgba(255,255,255,.8); }
#discover-view .photo-dot.active { width: 23px; background: #fff; }
#discover-view .dog-card-details { padding: 17px 20px 15px; }
#discover-view #dog-bio { color: #42546a; font-size: 14px; line-height: 1.5; }
#discover-view #dog-tags { gap: 7px; margin-top: 12px; }
#discover-view #dog-tags span { padding: 6px 10px; border: 1px solid #dceee8; border-radius: 999px; background: #eff9f5; color: #28745d; font-size: 11px; font-weight: 800; }
#discover-view .distance-label, #discover-view .profile-prompt { color: #53677e; font-size: 12px; font-weight: 700; }
#discover-view .profile-prompt { color: #c54452; }
#discover-view .deck-hint { margin-top: 13px; color: #68788c; font-size: 12px; }
#discover-view .hint-swipe { color: #d94b59; font-size: 18px; }
#discover-view .deck-actions { gap: 17px; margin-top: 17px; }
#discover-view .action-button { width: 68px; height: 68px; border-width: 2px; border-radius: 50%; box-shadow: 0 11px 25px rgba(30,48,69,.14),0 2px 6px rgba(30,48,69,.08); }
#discover-view .action-button svg { width: 34px; height: 34px; stroke-width: 2.2; }
#discover-view #nope-btn, #discover-view #like-btn { width: 72px; height: 72px; }
#discover-view #superlike-btn { width: 66px; height: 66px; }
#discover-view #rewind-btn, #discover-view #boost-btn { width: 52px; height: 52px; }
#discover-view #nope-btn { border-color: #f5b6bd; background: #fff1f2; color: #cb3e54; }
#discover-view #like-btn { border-color: #a6e3cf; background: #eaf8f2; color: #127b5d; }
#discover-view #superlike-btn { border-color: #b7d0f2; background: #edf4ff; color: #2867bc; }
#discover-view #rewind-btn { border-color: #ecd49e; background: #fff8e8; color: #8b6216; }
#discover-view #boost-btn { border-color: #c7d7f0; background: #eff4fc; color: #416ea9; }
#discover-view .action-caption { width: min(100%,360px); margin-top: 9px; color: #52657c; font-size: 11px; font-weight: 800; }
#discover-view .action-button:hover { transform: translateY(-4px) scale(1.07); box-shadow: 0 15px 30px rgba(30,48,69,.19); }
#discover-view .action-button:active { transform: translateY(0) scale(.96); }
#discover-view .discovery-aside { gap: 14px; }
#discover-view .aside-note { padding: 19px 17px; border: 1px solid #e5ebf1; border-radius: 21px; background: linear-gradient(145deg,#fff 0%,#fff4f1 100%); box-shadow: 0 9px 24px rgba(31,52,78,.06); }
#discover-view .note-icon { width: 37px; height: 37px; border-radius: 13px; background: #fff; color: #d94d5b; font-size: 23px; }
#discover-view .aside-note h2 { margin: 0 0 8px; color: var(--ink); font-size: 22px; font-weight: 500; line-height: 1.12; }
#discover-view .aside-note p { color: #53677e; font-size: 13px; line-height: 1.55; }
#discover-view .aside-note strong { color: #147b5c; }
#discover-view .learn-link { min-height: 42px; margin-top: 12px; color: #c34452; font-size: 13px; font-weight: 800; }
#discover-view .active-dogs, #discover-view .safety-note { padding: 14px; border: 1px solid #e4eaf1; border-radius: 17px; background: rgba(255,255,255,.84); }
#discover-view .active-dogs strong { color: var(--ink); font-size: 13px; }
#discover-view .active-dogs small, #discover-view .safety-note p { color: #5c6f84; font-size: 12px; line-height: 1.45; }

/* All content views share a clear title, comfortable type, and cool white surfaces. */
.content-view { max-width: 1380px; padding-top: 18px; }
.section-intro { align-items: center; margin: 0 0 19px; }
.section-intro h2 { margin: 0; color: var(--ink); font-size: clamp(25px,2.3vw,32px); font-weight: 500; letter-spacing: -.02em; }
.section-intro p { margin-top: 5px; color: #596d83; font-size: 14px; }
.demo-location-label { min-height: 37px; padding: 0 12px; border-color: #dfe6ef; background: #fff; color: #52657b; font-size: 12px; }
.park-filters { gap: 8px; margin: 0 0 14px; }
.park-chip { min-height: 42px; padding: 0 15px; border-color: #dfe6ef; background: #fff; color: #4d6279; font-size: 13px; }
.park-chip:hover { border-color: #ef9c9e; color: #bb3e50; }
.park-chip.active, .park-chip[aria-pressed="true"] { border-color: #f3aaa7; background: #fff0ee; color: #ba394b; }
.nearby-layout { grid-template-columns: minmax(0,1fr) minmax(290px,340px); gap: 18px 22px; }
.nearby-layout > .nearby-map-column { grid-column: 1; grid-row: 1; min-width: 0; }
.nearby-layout > #nearby-preview { grid-column: 2; grid-row: 1; margin: 42px 0 0; }
.nearby-map-toolbar strong { color: var(--ink); font-size: 14px; }
.nearby-map-toolbar span, #nearby-status { color: #586c82; font-size: 12px; }
.nearby-map-column #nearby-map { height: min(58vh,550px); min-height: 390px; border: 1px solid #dce5ed; border-radius: 21px; box-shadow: 0 12px 32px rgba(30,49,71,.11); }
.leaflet-container { border-radius: 20px; font-family: 'DM Sans',sans-serif; }
.nearby-list-wrap, .nearby-preview { border: 1px solid #dfe7ef; border-radius: 19px; background: #fff; box-shadow: 0 8px 25px rgba(31,52,78,.06); }
.nearby-list-heading { padding: 15px 16px 10px; }
.nearby-list-heading h3 { color: var(--ink); font-size: 20px; font-weight: 500; }
.nearby-list-heading span { color: #63768b; font-size: 12px; }
.nearby-dog-card { min-height: 68px; border-radius: 13px; }
.nearby-dog-card:hover, .nearby-dog-card.selected { background: #f0f7f4; }
.nearby-dog-copy strong { color: var(--ink); font-size: 14px; }
.nearby-dog-copy small { color: #586b81; font-size: 11px; }
.nearby-preview-photo, #nearby-preview-photo { height: 190px; }
.nearby-preview-content { padding: 18px; }
.nearby-preview h3, #nearby-preview-name { font-size: 24px; font-weight: 500; }
.nearby-preview-meta, #nearby-preview-meta { color: #53677e; font-size: 12px; }
.nearby-preview-bio, #nearby-preview-bio { color: #43576e; font-size: 13px; }
.nearby-preview-tags span { color: #246e58; font-size: 11px; }
.nearby-preview-actions button { min-height: 44px; font-size: 12px; }
.nearby-disclaimer, .map-attribution { color: #596d82; font-size: 10px; }

.matches-grid { grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap: 20px; }
.match-card { overflow: hidden; border: 1px solid #e0e7ef; border-radius: 20px; background: #fff; box-shadow: 0 8px 25px rgba(31,52,78,.07); transition: transform .18s,box-shadow .18s; }
.match-card:hover { transform: translateY(-3px); box-shadow: 0 15px 34px rgba(31,52,78,.13); }
.match-card-photo { height: 245px; }
.match-card-photo img { transition: transform .28s ease; }
.match-card:hover .match-card-photo img { transform: scale(1.035); }
.match-chip { border-radius: 999px; background: #fff; color: #b7394a; font-size: 11px; font-weight: 800; }
.match-card-copy { padding: 15px 16px; }
.match-card-copy h3 { color: var(--ink); font-size: 23px; font-weight: 500; }
.match-card-copy p { margin-top: 4px; color: #5d7085; font-size: 12px; }
.message-match-btn { width: 43px; height: 43px; border-radius: 14px; background: #e8f7f1; color: #147b5d; }
.messages-layout { min-height: min(72vh,720px); grid-template-columns: minmax(250px,320px) minmax(0,1fr); gap: 0; overflow: hidden; border: 1px solid #e0e7ef; border-radius: 21px; background: #fff; box-shadow: 0 10px 30px rgba(31,52,78,.06); }
.conversation-list { padding: 17px 12px; border-right-color: #e4eaf0; }
.conversation-list h3 { margin: 4px 12px 13px; color: #52657b; font: 700 14px 'DM Sans',sans-serif; letter-spacing: 0; }
.conversation-item { min-height: 66px; border-radius: 13px; }
.conversation-item:hover, .conversation-item.active, .conversation-item.selected { background: #eef7f3; box-shadow: inset 3px 0 #279771; }
.conversation-copy strong { color: var(--ink); font-size: 13px; }
.conversation-copy small { color: #60748a; font-size: 11px; }
.conversation-time { color: #5e7288; font-size: 10px; }
.conversation-empty { color: #5d7086; font-size: 12px; }
.conversation-panel { min-height: 0; background: linear-gradient(180deg,#fff,#fbfcfe); }
.conversation-welcome { color: #465a70; }
.conversation-welcome h3 { color: var(--ink); font-size: 25px; font-weight: 500; }
.conversation-welcome p { color: #64778d; font-size: 14px; }
.conversation-header { min-height: 76px; padding: 14px 18px; border-bottom-color: #e5eaf0; }
.conversation-header h3 { color: var(--ink); font-size: 20px; }
.conversation-header p, .chat-live { color: #5a6e83; font-size: 12px; }
.message-bubble, .chat-message { padding: 12px 15px; border-radius: 17px; font-size: 14px; line-height: 1.45; }
.message-bubble.mine, .chat-message.mine { background: #eaf7f2; color: #173b33; }
.message-bubble.theirs, .chat-message.theirs { background: #f0f4f8; color: #283d53; }
.inline-chat-form, .chat-compose { gap: 9px; padding: 14px 16px; border-top-color: #e5eaf0; }
.inline-chat-form input, .chat-compose input { min-height: 46px; border: 1px solid #dce5ed; border-radius: 13px; color: var(--ink); font-size: 14px; }
.inline-chat-form button, .chat-compose button { width: 46px; height: 46px; border-radius: 14px; background: #e65361; color: #fff; }

/* Shared dialog and form finish. */
.modal-backdrop { background: rgba(19,37,58,.42); backdrop-filter: blur(4px); }
.modal-panel { border: 1px solid #e3e9f0; border-radius: 24px; background: #fff; box-shadow: 0 25px 70px rgba(18,38,61,.22); }
.modal-panel h2 { color: var(--ink); font-size: 29px; font-weight: 500; }
.modal-panel > p { color: #586c82; font-size: 14px; }
.modal-close { width: 44px; height: 44px; border-radius: 14px; background: #f2f5f8; color: #40556c; font-size: 24px; }
.form-label { margin: 17px 0 8px; color: #334a62; font-size: 13px; font-weight: 800; }
.form-label strong { color: #bf3e4f; }
.modal-panel input:not([type="range"]):not([type="checkbox"]), .modal-panel textarea, .modal-panel select {
  min-height: 46px; border: 1px solid #dbe4ed; border-radius: 12px; background: #fff; color: var(--ink); font-size: 14px;
}
.modal-panel textarea { min-height: 86px; }
.primary-button { min-height: 46px; padding: 0 18px; border: 1px solid #d64d5a; border-radius: 14px; background: #e65361; color: #fff; box-shadow: 0 6px 14px rgba(214,77,90,.18); font-size: 14px; font-weight: 800; }
.primary-button:hover { background: #c93e50; box-shadow: 0 9px 20px rgba(214,77,90,.25); }
.secondary-button { min-height: 46px; padding: 0 16px; border: 1px solid #dce5ed; border-radius: 14px; background: #fff; color: #344a62; font-size: 13px; font-weight: 800; }
.secondary-button:hover { border-color: #b8c8d7; background: #f5f8fb; }
.toast { border: 1px solid rgba(255,255,255,.5); background: #172b45; color: #fff; box-shadow: 0 12px 34px rgba(23,43,69,.24); font-size: 14px; }
.skip-link { position: fixed; z-index: 1000; top: 10px; left: 12px; min-height: 44px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: 13px; background: #172b45; color: #fff; font-weight: 800; text-decoration: none; transform: translateY(-150%); transition: transform .16s ease; }
.skip-link:focus-visible { transform: translateY(0); }

@media (max-width: 1100px) and (min-width: 681px) {
  .app-shell { grid-template-columns: 258px minmax(0,1fr); }
  .main-content { padding-right: 22px; padding-left: 22px; }
  #discover-view .deck-layout { grid-template-columns: minmax(0,440px) 225px; gap: 24px; }
  #discover-view .dog-card { width: min(100%,430px); }
  #discover-view .dog-photo-wrap { height: min(51vh,450px); min-height: 350px; }
  .nearby-layout { grid-template-columns: minmax(0,1fr) 280px; gap: 15px; }
  .nearby-layout > #nearby-preview { margin-top: 42px; }
}
@media (max-width: 900px) and (min-width: 681px) {
  .app-shell { grid-template-columns: 238px minmax(0,1fr); }
  .main-content { padding-right: 18px; padding-left: 18px; }
  #discover-view .deck-layout { grid-template-columns: minmax(0,1fr) 200px; gap: 18px; }
  #discover-view .action-button { width: 58px; height: 58px; }
  #discover-view #nope-btn, #discover-view #like-btn { width: 63px; height: 63px; }
  #discover-view #superlike-btn { width: 59px; height: 59px; }
  #discover-view #rewind-btn, #discover-view #boost-btn { width: 48px; height: 48px; }
}
@media (min-width: 681px) and (max-height: 850px) {
  .topbar { min-height: 72px; }
  #discover-view { padding-top: 2px; }
  #discover-view .dog-photo-wrap { height: min(45vh,385px); min-height: 315px; }
  #discover-view .dog-card-details { padding: 12px 17px 11px; }
  #discover-view #dog-bio { font-size: 13px; line-height: 1.4; }
  #discover-view #dog-tags { gap: 6px; margin-top: 8px; }
  #discover-view #dog-tags span { padding: 4px 8px; }
  #discover-view .deck-hint { margin-top: 6px; font-size: 11px; }
  #discover-view .deck-actions { gap: 14px; margin-top: 10px; }
  #discover-view .action-button { width: 58px; height: 58px; }
  #discover-view #nope-btn, #discover-view #like-btn { width: 64px; height: 64px; }
  #discover-view #superlike-btn { width: 60px; height: 60px; }
  #discover-view #rewind-btn, #discover-view #boost-btn { width: 46px; height: 46px; }
  #discover-view .action-button svg { width: 30px; height: 30px; }
  #discover-view .action-caption { margin-top: 5px; font-size: 10px; }
  .app-footer { margin-top: 12px; padding-top: 8px; font-size: 11px; }
}
@media (max-width: 680px) {
  body { font-size: 14px; }
  #discover-view .deck-glow { display: none !important; }
  .sidebar { border-top: 1px solid #dfe6ee; background: rgba(255,255,255,.98); box-shadow: 0 -8px 26px rgba(29,49,72,.11); backdrop-filter: blur(12px); }
  .side-nav { gap: 4px; }
  .side-nav button { min-height: 54px; gap: 3px; border: 1px solid transparent; border-radius: 14px; color: #52667c; font-size: 11px; font-weight: 800; }
  .nav-icon { width: 23px; height: 23px; }
  .nav-item.active, .side-nav button.active { border-color: #f7d2ce; background: #fff0ee; color: #bd3d4d; box-shadow: none; }
  .main-content { padding: 0 14px calc(84px + env(safe-area-inset-bottom)); }
  .topbar, .view, .content-view, .app-footer,
  .main-content[data-current-view="discover"] .topbar,
  .main-content[data-current-view="nearby"] .topbar,
  .main-content[data-current-view="matches"] .topbar,
  .main-content[data-current-view="messages"] .topbar { max-width: 100%; }
  .topbar { min-height: 58px; height: auto; border-bottom: 1px solid #e7edf3; }
  .mobile-brand { column-gap: 8px; }
  .mobile-brand .brand-mark { width: 37px; height: 37px; border-radius: 13px; font-size: 19px; }
  .mobile-brand-name { color: var(--ink); font: 600 16px/1 'Fredoka',sans-serif; letter-spacing: -.015em; }
  .mobile-brand-tagline { color: #596c82; font: 700 10px/1.15 'DM Sans',sans-serif; }
  .top-avatar { width: 44px; height: 44px; }
  #filter-trigger { min-height: 44px; }
  #discover-view .photo-arrow { width: 44px; height: 44px; }
  #recenter-map, .map-tools button, .map-control-button { min-width: 44px; min-height: 44px; }
  .leaflet-control-zoom a { width: 44px !important; height: 44px !important; line-height: 44px !important; }
  .message-match-btn { width: 44px; height: 44px; }
  .filter-button { min-height: 44px; padding: 0 12px; font-size: 12px; }
  .content-view { padding-top: 15px; }
  .section-intro { margin-bottom: 14px; }
  .section-intro h2 { font-size: 26px; }
  .section-intro p { font-size: 13px; }
  #discover-view .dog-card { width: 100%; border-radius: 23px; }
  #discover-view .dog-photo-wrap { height: min(calc(100dvh - 340px),370px); min-height: 245px; border-radius: 22px 22px 0 0; }
  #discover-view .dog-info, #discover-view #dog-info { left: 17px; right: 17px; bottom: 17px; }
  #discover-view .dog-info h2 { font-size: 32px; }
  #discover-view .dog-info .dog-age { font-size: 23px; }
  #discover-view .dog-subtitle { font-size: 13px; }
  #discover-view .dog-card-details { padding: 12px 15px 12px; }
  #discover-view #dog-bio { font-size: 13px; }
  #discover-view #dog-tags span { padding: 5px 8px; font-size: 10px; }
  #discover-view .deck-actions { gap: clamp(8px,3vw,14px); margin-top: 11px; }
  #discover-view .action-button { width: 57px; height: 57px; }
  #discover-view #nope-btn, #discover-view #like-btn { width: 62px; height: 62px; }
  #discover-view #superlike-btn { width: 58px; height: 58px; }
  #discover-view #rewind-btn, #discover-view #boost-btn { width: 46px; height: 46px; }
  #discover-view .action-caption { width: min(100%,335px); font-size: 9px; }
  #discover-view .photo-dot { width: 44px; height: 44px; border: 0; background: transparent; }
  #discover-view .photo-dot::before { content: ''; width: 9px; height: 9px; border-radius: 999px; background: rgba(255,255,255,.78); box-shadow: 0 1px 4px rgba(0,0,0,.24); }
  #discover-view .photo-dot.active { width: 44px; background: transparent; }
  #discover-view .photo-dot.active::before { width: 23px; height: 8px; background: #fff; }
  #discover-view .discovery-aside { display: none; }
  .park-chip { min-height: 44px; padding: 0 12px; font-size: 12px; }
  .nearby-map-column #nearby-map { height: min(42dvh,345px); min-height: 270px; }
  .nearby-map-toolbar { gap: 8px; }
  .nearby-map-toolbar strong { font-size: 13px; }
  .nearby-dog-card { min-height: 64px; }
  .nearby-dog-copy strong { font-size: 13px; }
  #matches-view, #messages-view { max-width: 100%; }
  .matches-grid { grid-template-columns: repeat(auto-fill,minmax(165px,1fr)); gap: 12px; }
  .match-card-photo { height: 190px; }
  .match-card-copy { padding: 12px; }
  .match-card-copy h3 { font-size: 20px; }
  .messages-layout { grid-template-columns: minmax(100px,32%) minmax(0,1fr); min-height: calc(100dvh - 170px); }
  .conversation-list { min-width: 0; padding: 9px 5px; }
  .conversation-item { min-height: 58px; padding: 7px 5px; }
  .conversation-item img { width: 38px; height: 38px; }
  .conversation-item strong { font-size: 11px; }
  .conversation-item small { font-size: 10px; }
  .conversation-panel { min-height: 53vh; }
  .conversation-welcome h3 { font-size: 20px; }
  .conversation-welcome p { font-size: 12px; }
  .modal-panel { width: min(94vw,480px); padding: 24px 20px; }
  .modal-panel h2 { font-size: 27px; }
  .modal-panel input:not([type="range"]):not([type="checkbox"]), .modal-panel textarea, .modal-panel select,
  .chat-compose input, .inline-chat-form input { font-size: 16px; }
  .modal-panel input:not([type="range"]):not([type="checkbox"]), .modal-panel select { min-height: 48px; }
  .modal-panel textarea { min-height: 92px; }
}
@media (max-width: 390px) {
  .main-content { padding-right: 10px; padding-left: 10px; }
  .mobile-brand { column-gap: 6px; }
  .mobile-brand .brand-mark { width: 34px; height: 34px; }
  .mobile-brand-name { font-size: 15px; }
  .mobile-brand-tagline { font-size: 9px; }
  .map-tools, .leaflet-control-container { max-width: calc(100vw - 20px); }
  #discover-view .dog-photo-wrap { height: min(calc(100dvh - 352px),350px); min-height: 238px; }
  #discover-view .deck-actions { gap: 7px; }
  #discover-view .action-button { width: 53px; height: 53px; }
  #discover-view #nope-btn, #discover-view #like-btn { width: 58px; height: 58px; }
  #discover-view #superlike-btn { width: 54px; height: 54px; }
  #discover-view #rewind-btn, #discover-view #boost-btn { width: 44px; height: 44px; }
  #discover-view .action-caption { width: min(100%,310px); font-size: 8px; }
  .messages-layout { grid-template-columns: minmax(86px,30%) minmax(0,1fr); }
}

/* Keep discovery focused on the profile and its actions. */
#discover-view .deck-layout { grid-template-columns: minmax(0,470px); justify-content: center; gap: 0; }
@media (max-width: 680px) { #discover-view .deck-layout { display: block; max-width: 430px; } }