:root {
    --bg-primary: #fff6f5;
    --surface: #ffffff;
    --surface-soft: #fffaf9;
    --brand-primary: #f43f68;
    --text-accent: #c8244b;
    --brand-primary-dark: #dc2e5b;
    --text-primary: #071b33;
    --text-secondary: #536174;
    --text-muted: #8a94a3;
    --border: #eae4df;
    --accent-teal: #16aeb5;
    --accent-purple: #7047d7;
    --accent-yellow: #f5b51b;
    --success: #18a97a;
    --error: #d92b4f;
    --error-bg: #fff0f3;
    --shadow-soft: 0 18px 48px rgba(7, 27, 51, 0.08);
    --shadow-card: 0 8px 24px rgba(7, 27, 51, 0.04);
    --radius-xl: 20px;
    --radius-lg: 16px;
    --radius-md: 12px;
    --radius-sm: 10px;
    --max-content-width: 1400px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: "Manrope", "Segoe UI", sans-serif;
    line-height: 1.5;
}

.skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 1100;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--text-primary);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    transform: translateY(-160%);
    transition: transform 160ms ease;
}

.skip-link:focus-visible {
    transform: translateY(0);
}

img,
svg {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input {
    font: inherit;
}

button {
    cursor: pointer;
}

button:focus-visible,
input:focus-visible,
a:focus-visible {
    outline: 3px solid rgba(244, 63, 104, 0.22);
    outline-offset: 2px;
}

.page-shell {
    max-width: var(--max-content-width);
    min-height: 100vh;
    margin: 0 auto;
    padding: 32px 32px 12px;
    display: flex;
    flex-direction: column;
}

.auth-layout {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(24px, 3vw, 48px);
    min-height: calc(100vh - 150px);
}

.branding-panel,
.auth-panel {
    flex: 1 1 0;
}

.branding-panel {
    flex: 1.35 1 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
}

.auth-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    margin-bottom: 20px;
    text-decoration: none;
}

.auth-logo {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.subpage-brand {
    width: 64px;
}

.logo-mark {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: rgba(244, 63, 104, 0.08);
    color: var(--brand-primary);
}

.logo-mark svg {
    width: 24px;
    height: 24px;
}

.brand-name {
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.journey-panel {
    position: relative;
    width: 100%;
    min-height: 520px;
    overflow: hidden;
    border-radius: 24px;
    isolation: isolate;
    background: #f8e6e1;
    animation: journey-panel-in 360ms var(--ease-standard, ease) both;
}

.journey-panel-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.journey-panel-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(7, 27, 51, 0.76) 0%, rgba(7, 27, 51, 0.46) 39%, rgba(7, 27, 51, 0.1) 68%, transparent 100%);
}

.journey-panel-copy {
    position: absolute;
    z-index: 1;
    bottom: 48px;
    left: 48px;
    max-width: 400px;
    color: #fff;
    animation: journey-copy-in 340ms 70ms var(--ease-standard, ease) both;
}

.journey-panel-eyebrow {
    margin: 0 0 12px;
    color: #f7a6b9;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.11em;
}

.journey-panel-copy h1 {
    margin: 0;
    font-size: clamp(2rem, 3.2vw, 3rem);
    line-height: 1.1;
    letter-spacing: -0.055em;
}

.journey-panel-copy p:last-child {
    margin: 15px 0 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    line-height: 1.6;
}

@keyframes journey-panel-in {
    from {
        opacity: 0;
        transform: scale(0.99);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes journey-copy-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.auth-panel {
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-page .branding-panel {
    order: 2;
}

.login-page .auth-panel {
    order: 1;
}

.auth-card {
    width: min(100%, 480px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
    padding: 26px 24px 22px;
}

.auth-card h2 {
    margin: 0;
    font-size: clamp(1.8rem, 1.9vw, 2.2rem);
    letter-spacing: -0.06em;
    font-weight: 700;
}

.card-subtitle {
    margin: 6px 0 14px;
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.6;
}

.form-error {
    background: var(--error-bg);
    color: var(--error);
    border: 1px solid rgba(217, 43, 79, 0.18);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 0.88rem;
    margin-bottom: 18px;
}

.field-group {
    margin-bottom: 12px;
}

.field-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.88rem;
}

.input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-soft);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.input-wrap:focus-within {
    border-color: rgba(244, 63, 104, 0.4);
    box-shadow: 0 0 0 4px rgba(244, 63, 104, 0.08);
}

.input-wrap.has-error {
    border-color: rgba(217, 43, 79, 0.8);
    background: #fff8f9;
}

.field-icon {
    width: 18px;
    height: 18px;
    color: var(--text-muted);
    margin-left: 14px;
    flex-shrink: 0;
}

.input-wrap input {
    width: 100%;
    padding: 13px 14px 13px 12px;
    border: 0;
    background: transparent;
    color: var(--text-primary);
    font-size: 1rem;
}

.input-wrap input::placeholder {
    color: var(--text-muted);
}

.password-wrap input {
    padding-right: 42px;
}

.password-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: none;
    background: transparent;
    color: var(--text-muted);
}

.password-toggle svg {
    width: 18px;
    height: 18px;
}

.error-message {
    min-height: 14px;
    margin: 0 2px 0;
    color: var(--error);
    font-size: 0.78rem;
    line-height: 1.25;
}

.form-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 4px 0 16px;
}

.checkbox-wrap {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text-secondary);
    font-size: 0.92rem;
    cursor: pointer;
    user-select: none;
}

.checkbox-wrap input {
    width: 16px;
    height: 16px;
    accent-color: var(--brand-primary);
}

.text-link {
    color: var(--text-secondary);
    font-weight: 600;
    transition: color 0.2s ease;
}

.text-link:hover {
    color: var(--text-primary);
}

.brand-link {
    color: var(--brand-primary);
}

.primary-btn,
.social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-weight: 700;
    transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.social-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.primary-btn {
    background: var(--brand-primary);
    color: #fff;
    box-shadow: 0 12px 22px rgba(244, 63, 104, 0.18);
}

.primary-btn:hover {
    background: var(--brand-primary-dark);
    transform: translateY(-1px);
}

.primary-btn:disabled {
    cursor: wait;
    opacity: 0.9;
}

.primary-btn.is-loading {
    position: relative;
    color: rgba(255, 255, 255, 0.95);
}

.btn-text {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.primary-btn.is-loading .btn-text {
    visibility: hidden;
}

.primary-btn.is-loading::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.divider {
    position: relative;
    display: flex;
    align-items: center;
    text-align: center;
    margin: 16px 0 12px;
    color: var(--text-muted);
    font-size: 0.86rem;
}

.divider::before,
.divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}

.divider span {
    padding: 0 16px;
}

.social-btn {
    flex: 1 1 0;
    width: 100%;
    min-width: 0;
    min-height: 42px;
    background: var(--surface);
    border-color: var(--border);
    color: var(--text-primary);
    margin-bottom: 0;
    box-shadow: 0 2px 6px rgba(7, 27, 51, 0.02);
}

.social-btn:hover {
    border-color: rgba(7, 27, 51, 0.18);
    background: #fffdfd;
}

.social-mark {
    width: 24px;
    height: 24px;
    display: inline-block;
    vertical-align: middle;
}

.google-mark {
    width: 26px;
    height: 26px;
}

.apple-mark {
    width: 22px;
    height: 22px;
    color: var(--text-primary);
}

.signup-card {
    width: min(100%, 480px);
}

.reset-card {
    width: min(100%, 480px);
}

.back-link {
    display: inline-block;
    margin-bottom: 14px;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.92rem;
}

.back-link:hover {
    color: var(--text-primary);
}

.password-rules {
    margin: 8px 0 0;
    padding-left: 18px;
    display: grid;
    gap: 4px;
    color: var(--text-muted);
    font-size: 0.78rem;
}

.password-rule {
    list-style: disc;
    transition: color 0.2s ease;
}

.password-rule.is-met {
    color: var(--success);
}

.terms-field {
    margin: 12px 0 18px;
}

.terms-field .checkbox-wrap {
    align-items: flex-start;
    line-height: 1.6;
}

.terms-field .error-message {
    margin-top: 8px;
}

.signup-copy {
    margin: 14px 0 0;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.96rem;
}

.verify-card {
    width: min(100%, 460px);
}

.verify-illustration {
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
    margin: 0 auto 18px;
    border-radius: 24px;
    background: rgba(22, 174, 181, 0.1);
    color: var(--accent-teal);
}

.verify-illustration svg {
    width: 54px;
    height: 54px;
}

.verify-email-value {
    margin: 0 0 14px;
    color: var(--text-primary);
    font-weight: 700;
    word-break: break-word;
}

.verify-note {
    margin: 0 0 20px;
    color: var(--text-secondary);
    line-height: 1.7;
}

.verify-actions {
    display: grid;
    gap: 12px;
    margin-top: 24px;
}

.secondary-btn {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 12px;
    min-height: 48px;
    padding: 0 18px;
    color: var(--text-primary);
    font-weight: 600;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.secondary-btn:hover {
    background: var(--surface-soft);
    border-color: rgba(7, 27, 51, 0.12);
}

.secondary-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.verify-inline-status {
    min-height: 20px;
    margin-top: 10px;
    color: var(--success);
    font-size: 0.84rem;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.verify-inline-status.is-visible {
    opacity: 1;
}

.demo-link {
    display: inline-flex;
    justify-content: center;
    width: 100%;
    margin-top: 18px;
    color: var(--text-muted);
    font-size: 0.82rem;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.demo-link:hover {
    color: var(--text-secondary);
}

.site-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px 28px;
    padding: 18px 0 8px;
    color: var(--text-muted);
    font-size: 0.76rem;
}

.site-footer p {
    margin: 0;
}

.site-footer nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
}

.site-footer a {
    color: var(--text-muted);
}

.site-footer a:hover {
    color: var(--text-secondary);
}

.modal {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(7, 27, 51, 0.24);
    backdrop-filter: blur(3px);
    z-index: 50;
}

.modal.hidden {
    display: none;
}

.modal-card {
    width: min(92vw, 420px);
    padding: 28px 24px 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);
    text-align: center;
}

.modal-spinner {
    width: 38px;
    height: 38px;
    border: 3px solid rgba(244, 63, 104, 0.12);
    border-top-color: var(--brand-primary);
    border-radius: 50%;
    margin: 0 auto 18px;
    animation: spin 0.9s linear infinite;
}

.modal-card h3 {
    margin: 0 0 8px;
    font-size: 1.5rem;
    letter-spacing: -0.04em;
}

.modal-card p {
    margin: 0;
    color: var(--text-secondary);
}

.modal-action {
    margin-top: 20px;
}

.hidden {
    display: none !important;
}

.auth-subpage {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: var(--bg-primary);
    padding: 32px 20px;
}

.subpage-card {
    width: min(100%, 520px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
    padding: 32px 28px;
}

.subpage-card .logo-mark {
    margin: 0 auto 18px;
}

.subpage-card h1 {
    margin: 0 0 12px;
    text-align: center;
    font-size: clamp(2rem, 3vw, 2.7rem);
    letter-spacing: -0.06em;
}

.subpage-card p {
    margin: 0 0 22px;
    text-align: center;
    color: var(--text-secondary);
}

.subpage-card .primary-btn {
    margin-top: 10px;
}

.home-page {
    background: var(--bg-primary);
}

.discover-page {
    background: var(--bg-primary);
}

.discover-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-top: 8px;
}

.discover-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    padding-top: 6px;
}

.discover-header h1 {
    margin: 0;
    font-size: clamp(2.3rem, 3vw, 3.3rem);
    line-height: 1;
    letter-spacing: -0.07em;
}

.discover-supporting {
    max-width: 500px;
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.6;
}

.discover-search-shell {
    position: relative;
}

.discover-search-box {
    min-height: 68px;
}

.discover-tab-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 8px 0 4px;
}

.discover-tab {
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary);
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.discover-tab.is-active {
    background: rgba(244, 63, 104, 0.08);
    border-color: rgba(244, 63, 104, 0.2);
    color: var(--brand-primary);
}

.category-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 6px;
}

.discover-category {
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);
    color: var(--text-primary);
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.discover-category.is-active {
    background: rgba(20, 174, 181, 0.1);
    border-color: rgba(20, 174, 181, 0.22);
    color: var(--accent-teal);
}

.discover-content {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    padding-top: 8px;
}

.discover-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 12px 22px rgba(7, 27, 51, 0.04);
}

.discover-card-image {
    height: 220px;
    background-size: cover;
    background-position: center;
}

.discover-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
}

.discover-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.discover-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    background: rgba(244, 63, 104, 0.08);
    color: var(--brand-primary);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.discover-card-body h3 {
    margin: 10px 0 0;
    font-size: 1.3rem;
    letter-spacing: -0.05em;
}

.discover-profile-badge {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(20, 174, 181, 0.1);
    color: var(--accent-teal);
    font-size: 0.72rem;
    font-weight: 800;
}

.discover-card-body p {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.6;
}

.discover-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.discover-meta strong {
    color: var(--text-primary);
}

.discover-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 8px;
}

.discover-secondary,
.discover-primary {
    min-height: 42px;
    border-radius: 12px;
}

.discover-secondary {
    flex: 1;
}

.discover-primary {
    flex: 1;
}

.discover-link {
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 700;
}

.discover-image-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 6px;
}

.discover-image-grid .mini-thumb {
    width: 100%;
    height: 68px;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
}

.filter-drawer {
    position: fixed;
    top: 26px;
    right: 26px;
    width: min(380px, calc(100vw - 32px));
    max-height: calc(100vh - 52px);
    padding: 18px 16px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: var(--shadow-soft);
    overflow-y: auto;
    z-index: 70;
}

.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.drawer-header h3 {
    margin: 0;
    font-size: 1.5rem;
    letter-spacing: -0.05em;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 0;
    border-top: 1px solid var(--border);
}

.filter-group:first-of-type {
    border-top: 0;
}

.filter-group h4 {
    margin: 0 0 2px;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
}

.filter-group label,
.bucket-check,
.report-list label {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-primary);
    font-weight: 600;
}

.filter-group input,
.bucket-check input,
.report-list input {
    accent-color: var(--brand-primary);
}

.drawer-actions {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.drawer-actions .primary-btn,
.drawer-actions .secondary-btn {
    flex: 1;
}

.bucket-option-list,
.report-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bucket-check {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.7);
}

.modal-divider {
    height: 1px;
    margin: 14px 0;
    background: var(--border);
}

.subtle {
    color: var(--text-secondary);
    text-decoration: none;
}

.app-shell {
    max-width: 1380px;
    margin: 0 auto;
    padding: 20px 24px 28px;
}

.top-nav {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 8px 18px;
    margin: 0 auto 24px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(234, 228, 223, 0.9);
    border-radius: 18px;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 18px rgba(7, 27, 51, 0.04);
}

.nav-left,
.nav-right,
.main-nav,
.icon-menu-wrap,
.avatar-menu-wrap {
    display: flex;
    align-items: center;
}

.nav-left {
    flex: 0 0 auto;
}

.main-nav {
    justify-content: center;
    gap: 8px;
    flex: 0 1 auto;
}

.nav-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 12px;
    border-radius: 10px;
    color: var(--text-secondary);
    font-weight: 600;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.nav-item:hover,
.nav-item.is-active {
    color: var(--brand-primary);
}

.nav-item.is-active::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 4px;
    height: 2px;
    border-radius: 999px;
    background: var(--brand-primary);
}

.nav-right {
    justify-content: flex-end;
    gap: 12px;
    flex: 1 1 auto;
    margin-left: auto;
}

.app-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 56px;
    text-decoration: none;
    transition: opacity 160ms ease, transform 160ms ease;
}

.app-brand:hover {
    opacity: 0.94;
    transform: translateY(-1px);
}

.app-brand:active {
    transform: translateY(0);
}

.app-brand:focus-visible {
    outline: 2px solid #F43F68;
    outline-offset: 4px;
    border-radius: 8px;
}

.app-logo {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

@media (max-width: 760px) {
    .app-brand {
        width: 48px;
    }

    .auth-brand {
        width: 76px;
    }
}

.nav-add-pin {
    width: auto;
    min-width: 120px;
    min-height: 42px;
}

@media (max-width: 600px) {
    .nav-add-pin {
        min-width: 42px;
        padding: 0;
    }

    .nav-add-pin::after {
        content: "+";
        font-size: 1.15rem;
        line-height: 1;
    }
}

.icon-button,
.avatar-button,
.search-utility {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text-primary);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.icon-button:hover,
.avatar-button:hover,
.search-utility:hover,
.primary-btn:hover,
.utility-action:hover,
.option-item:hover,
.filter-chip:hover,
.card-button:hover,
.menu-item:hover,
.dropdown-item:hover,
.card-link:hover {
    transform: translateY(-1px);
}

.icon-button svg,
.search-utility svg {
    width: 18px;
    height: 18px;
}

.notification-badge {
    position: absolute;
    top: -6px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--brand-primary);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
}

.avatar-button {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, rgba(244, 63, 104, 0.18), rgba(20, 174, 181, 0.12));
    border-color: rgba(244, 63, 104, 0.18);
    font-weight: 800;
    color: var(--text-accent);
}

.home-layout {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.welcome-row {
    margin-top: 8px;
}

.eyebrow {
    margin: 0 0 8px;
    color: var(--brand-primary);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.home-layout h1 {
    margin: 0;
    font-size: clamp(2.3rem, 3vw, 3.3rem);
    line-height: 1.02;
    letter-spacing: -0.07em;
}

.welcome-subtitle {
    margin: 8px 0 0;
    color: var(--text-secondary);
    font-size: 1.06rem;
}

.search-shell {
    position: relative;
    max-width: 940px;
}

.search-box {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 62px;
    padding: 0 14px 0 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(7, 27, 51, 0.04);
}

.search-icon {
    width: 20px;
    height: 20px;
    color: var(--text-muted);
}

.search-box input {
    flex: 1;
    border: 0;
    background: transparent;
    min-width: 0;
    color: var(--text-primary);
    font-size: 1.02rem;
}

.search-box input::placeholder {
    color: var(--text-muted);
}

.search-utility {
    width: 36px;
    height: 36px;
    border: 0;
    background: rgba(244, 63, 104, 0.06);
    color: var(--brand-primary);
}

.search-suggestions {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow-soft);
    padding: 8px;
    z-index: 20;
}

.search-suggestion-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    background: transparent;
    color: var(--text-primary);
    border: 0;
    text-align: left;
    font-weight: 600;
}

.search-suggestion-item:hover {
    background: rgba(244, 63, 104, 0.04);
}

.search-suggestion-item small {
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.utility-row,
.filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.utility-action,
.filter-chip {
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-primary);
    min-height: 38px;
    border-radius: 999px;
    padding: 0 14px;
    font-weight: 600;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.utility-action {
    min-width: 130px;
}

.filter-chip {
    background: rgba(255, 255, 255, 0.7);
}

.filter-chip.is-selected {
    background: rgba(244, 63, 104, 0.08);
    border-color: rgba(244, 63, 104, 0.28);
    color: var(--text-accent);
}

.home-section {
    margin-top: 8px;
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.section-header h2 {
    margin: 0;
    font-size: clamp(1.5rem, 2vw, 2.1rem);
    line-height: 1.2;
    letter-spacing: -0.05em;
}

.section-link {
    color: var(--text-accent);
    font-weight: 700;
}

.map-card {
    position: relative;
    width: 100%;
    height: 680px;
    border-radius: 30px;
    overflow: hidden;
    border: 1px solid rgba(31, 41, 55, 0.08);
    box-shadow: 0 16px 36px rgba(7, 27, 51, 0.08);
    background: #edf3f4;
}

.map-category-panel {
    position: absolute;
    right: 18px;
    bottom: 18px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(4px);
    box-shadow: 0 10px 28px rgba(7, 27, 51, 0.08);
}

.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: 160px;
    min-height: 36px;
    padding: 0 12px;
    border: 0;
    background: transparent;
    color: var(--text-primary);
    font-size: 1.05rem;
    font-weight: 700;
    text-align: left;
    letter-spacing: -0.03em;
}

.legend-item::before {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
}

.legend-pink::before {
    background: #f24a84;
}

.legend-red::before {
    background: #f76c5d;
}

.legend-teal::before {
    background: #1bb4b8;
}

.legend-slate::before {
    background: #1d2c4a;
}

.map-preview {
    position: absolute;
    left: 26px;
    bottom: 26px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: min(260px, calc(100% - 52px));
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(234, 228, 223, 0.9);
    border-radius: 16px;
    box-shadow: 0 18px 34px rgba(7, 27, 51, 0.08);
    z-index: 4;
}

.map-preview strong {
    font-size: 1rem;
}

.map-preview span,
.map-preview small {
    color: var(--text-secondary);
}

.map-preview-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
}

.map-preview-actions a,
.map-preview-actions button {
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--text-accent);
    font-weight: 700;
    cursor: pointer;
}

.journey-grid,
.pin-row,
.category-grid,
.popular-grid,
.follow-grid {
    display: grid;
    gap: 16px;
}

.journey-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.journey-card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(7, 27, 51, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    color: inherit;
    text-decoration: none;
}

.journey-card:hover,
.pin-card:hover,
.category-card:hover,
.bucket-row:hover,
.popular-card:hover,
.follow-card:hover,
.activity-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 28px rgba(7, 27, 51, 0.06);
}

.journey-cover {
    height: 130px;
    background-size: cover;
    background-position: center;
}

.journey-card-body {
    padding: 14px 14px 16px;
}

.journey-card-body h3,
.pin-card h3,
.popular-card h3,
.bucket-main h3,
.follow-card h3 {
    margin: 0;
    font-size: 1.06rem;
    letter-spacing: -0.04em;
}

.journey-meta,
.pin-meta,
.popular-meta,
.follow-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.progress-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    min-height: 28px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(20, 174, 181, 0.1);
    color: var(--accent-teal);
    font-weight: 700;
}

.pin-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pin-card {
    display: block;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(7, 27, 51, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    color: inherit;
    text-decoration: none;
}

.pin-image {
    height: 160px;
    background-size: cover;
    background-position: center;
}

.pin-body {
    padding: 14px 14px 16px;
}

.pin-tag {
    display: inline-flex;
    align-items: center;
    padding: 6px 8px;
    border-radius: 999px;
    background: rgba(244, 63, 104, 0.06);
    color: var(--text-accent);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pin-details {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.pin-rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text-primary);
    font-weight: 700;
}

.category-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.category-card {
    display: block;
    position: relative;
    min-height: 160px;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(234, 228, 223, 0.8);
    box-shadow: 0 10px 18px rgba(7, 27, 51, 0.04);
    background-size: cover;
    background-position: center;
    cursor: pointer;
    color: inherit;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.category-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(7, 27, 51, 0.12), rgba(7, 27, 51, 0.54));
}

.category-card span {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 18px;
    z-index: 1;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.bucket-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bucket-row {
    position: relative;
    display: grid;
    grid-template-columns: 62px minmax(0, 1.6fr) minmax(160px, 0.8fr) minmax(180px, 0.8fr) auto;
    align-items: center;
    gap: 18px;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 10px 18px rgba(7, 27, 51, 0.03);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bucket-row-link,
.popular-card-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}

.popular-card .follow-button {
    position: relative;
    z-index: 2;
}

.bucket-cover {
    width: 62px;
    height: 62px;
    border-radius: 14px;
    background-size: cover;
    background-position: center;
}

.bucket-main {
    min-width: 0;
}

.bucket-main h3 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bucket-meta,
.bucket-subtext {
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.bucket-preview {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.bucket-preview .mini-thumb {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 6px 14px rgba(7, 27, 51, 0.08);
}

.bucket-preview .more-thumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: rgba(244, 63, 104, 0.08);
    color: var(--text-accent);
    font-size: 0.72rem;
    font-weight: 700;
}

.bucket-actions {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: flex-end;
}

.menu-trigger {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 1.3rem;
}

.popular-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.popular-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 12px 22px rgba(7, 27, 51, 0.04);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.popular-cover {
    height: 180px;
    background-size: cover;
    background-position: center;
}

.popular-body {
    padding: 14px 14px 16px;
}

.creator-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
}

.creator-pill {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.follow-button {
    border: 1px solid rgba(244, 63, 104, 0.2);
    background: rgba(244, 63, 104, 0.08);
    color: var(--text-accent);
    border-radius: 999px;
    min-height: 32px;
    padding: 0 12px;
    font-weight: 700;
}

.follow-button.is-following {
    background: var(--surface);
    color: var(--text-primary);
    border-color: var(--border);
}

.follow-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.follow-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 12px 22px rgba(7, 27, 51, 0.04);
    cursor: pointer;
    color: inherit;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.follow-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-badge {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(20, 174, 181, 0.1);
    color: var(--accent-teal);
    font-size: 0.72rem;
    font-weight: 800;
}

.follow-header strong {
    display: block;
    font-size: 0.96rem;
}

.follow-header time {
    color: var(--text-muted);
    font-size: 0.72rem;
}

.thumb-strip {
    display: flex;
    gap: 8px;
}

.thumb-strip .mini-thumb {
    width: 54px;
    height: 54px;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
}

.bottom-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(300px, 0.8fr);
    gap: 18px;
    margin-top: 8px;
}

.activity-panel,
.premium-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: 0 12px 22px rgba(7, 27, 51, 0.03);
}

.activity-panel {
    padding: 18px 18px 12px;
}

.compact-header {
    margin-bottom: 10px;
}

.activity-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.activity-item {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 4px;
    border-radius: 12px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    color: inherit;
    text-decoration: none;
}

.activity-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: rgba(20, 174, 181, 0.08);
    color: var(--accent-teal);
    font-weight: 700;
}

.activity-copy {
    min-width: 0;
}

.activity-copy p {
    margin: 0;
    color: var(--text-primary);
    line-height: 1.5;
}

.activity-copy time {
    display: block;
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 0.76rem;
}

.premium-card {
    padding: 22px 20px 20px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(244, 63, 104, 0.08), rgba(255, 255, 255, 1));
}

.premium-card::before,
.premium-card::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(244, 63, 104, 0.08);
}

.premium-card::before {
    width: 140px;
    height: 140px;
    right: -30px;
    top: -26px;
}

.premium-card::after {
    width: 120px;
    height: 120px;
    left: -18px;
    bottom: -26px;
}

.premium-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(244, 63, 104, 0.08);
    color: var(--brand-primary);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.premium-card h3 {
    margin: 16px 0 8px;
    font-size: 1.8rem;
    letter-spacing: -0.05em;
}

.premium-card p {
    margin: 0 0 18px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.premium-btn {
    width: 100%;
}

.site-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px 22px;
    margin-top: 24px;
    color: var(--text-muted);
    font-size: 0.76rem;
}

.home-footer {
    justify-content: space-between;
    padding: 10px 0 0;
}

.home-footer p,
.home-footer nav {
    margin: 0;
}

.home-footer nav {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.menu-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 12px);
    width: min(280px, 80vw);
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow-soft);
    z-index: 30;
}

.icon-menu-wrap,
.avatar-menu-wrap {
    position: relative;
}

.menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 6px 8px;
}

.menu-header h3 {
    margin: 0;
    font-size: 1rem;
}

.text-button {
    border: 0;
    background: transparent;
    color: var(--brand-primary);
    font-weight: 700;
    padding: 0;
}

.menu-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 210px;
    overflow-y: auto;
}

.notification-item {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    gap: 8px;
    padding: 8px 6px;
    border-radius: 10px;
    color: var(--text-primary);
}

.notification-item.unread {
    background: rgba(244, 63, 104, 0.04);
}

.notification-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand-primary);
    margin-top: 7px;
}

.notification-item strong,
.notification-item span {
    display: block;
}

.notification-item small {
    color: var(--text-muted);
}

.menu-link,
.menu-item,
.dropdown-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    background: transparent;
    color: var(--text-primary);
    border-radius: 10px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.menu-item.danger {
    color: var(--error);
}

.profile-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 6px 12px;
    border-bottom: 1px solid var(--border);
}

.profile-avatar {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(244, 63, 104, 0.08);
    color: var(--brand-primary);
    font-size: 0.7rem;
    font-weight: 800;
}

.profile-summary strong,
.profile-summary span {
    display: block;
}

.profile-summary span {
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.dropdown {
    position: absolute;
    top: 54px;
    right: 0;
    z-index: 25;
    min-width: 220px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-soft);
    padding: 8px;
}

.dropdown-item {
    width: 100%;
    justify-content: flex-start;
}

.home-page .search-shell .dropdown {
    top: calc(100% + 8px);
    z-index: 30;
}

.modal {
    position: fixed;
    inset: 0;
    background: rgba(7, 27, 51, 0.2);
    backdrop-filter: blur(3px);
    display: grid;
    place-items: center;
    z-index: 100;
    overscroll-behavior: contain;
}

.modal-card {
    width: min(92vw, 520px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: var(--shadow-soft);
    padding: 20px;
}

.compact-modal {
    width: min(92vw, 460px);
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

.modal-actions .primary-btn,
.modal-actions .secondary-btn {
    width: auto;
    min-height: 42px;
}

.logout-confirm-btn {
    background: var(--error);
    box-shadow: 0 8px 16px rgba(217, 43, 79, .16);
}

.logout-confirm-btn:hover {
    background: #c8244b;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.modal-header h3 {
    margin: 0;
    font-size: 1.5rem;
    letter-spacing: -0.05em;
}

.close-button {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 10px;
    background: rgba(7, 27, 51, 0.04);
    color: var(--text-primary);
    font-size: 1.4rem;
    cursor: pointer;
}

.option-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.option-item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 12px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--border);
    border-radius: 14px;
    color: var(--text-primary);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.option-item strong,
.option-item small {
    display: block;
}

.option-item small {
    color: var(--text-secondary);
    margin-top: 2px;
}

.option-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    font-weight: 800;
}

.option-icon.pink {
    background: rgba(244, 63, 104, 0.08);
    color: var(--brand-primary);
}

.option-icon.teal {
    background: rgba(20, 174, 181, 0.1);
    color: var(--accent-teal);
}

.option-icon.purple {
    background: rgba(112, 71, 215, 0.08);
    color: var(--accent-purple);
}

.option-icon.gold {
    background: rgba(245, 181, 27, 0.1);
    color: var(--accent-yellow);
}

textarea {
    width: 100%;
    resize: vertical;
    min-height: 120px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-soft);
    padding: 12px 14px;
    color: var(--text-primary);
    font: inherit;
}

.full-width {
    width: 100%;
    margin-top: 14px;
}

.map-page-shell {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.map-controls-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.map-search-wrap {
    position: relative;
    flex: 1 1 360px;
    max-width: 540px;
}

.map-search-box {
    min-height: 54px;
    border-radius: 16px;
}

.map-control-actions {
    display: flex;
    flex: 1 1 auto;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.map-control-actions .utility-action {
    min-width: auto;
}

.map-view-toggle.is-selected {
    border-color: rgba(244, 63, 104, 0.28);
    background: rgba(244, 63, 104, 0.08);
    color: var(--brand-primary);
}

.map-stage {
    position: relative;
    min-height: 700px;
    height: clamp(700px, calc(100vh - 190px), 920px);
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 24px;
    background: #eaf0f1;
    box-shadow: 0 16px 36px rgba(7, 27, 51, 0.08);
}

#bucketMap {
    width: 100%;
    height: 100%;
    background: #eaf0f1;
}

.map-floating-loc,
.map-legend,
.map-location-banner,
.map-preview,
.map-carousel,
.map-empty {
    position: absolute;
    z-index: 500;
}

.map-floating-loc {
    top: 18px;
    left: 18px;
}

.map-location-button,
.legend-toggle {
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.94);
    color: var(--text-primary);
    font: inherit;
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(7, 27, 51, 0.08);
    cursor: pointer;
}

.map-legend {
    top: 18px;
    right: 18px;
    width: 156px;
}

.legend-toggle {
    width: 100%;
}

.legend-body {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 8px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.94);
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(7, 27, 51, 0.08);
}

.legend-body span {
    display: flex;
    align-items: center;
    gap: 8px;
}

.legend-swatch {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.legend-swatch.pink {
    background: #f43f68;
}

.legend-swatch.teal {
    background: #18a97a;
}

.legend-swatch.purple {
    background: #7047d7;
}

.legend-swatch.gold {
    background: #f5b51b;
}

.legend-swatch.navy {
    background: #071b33;
}

.map-location-banner {
    top: 76px;
    left: 18px;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--brand-primary);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 10px 20px rgba(244, 63, 104, 0.22);
    cursor: pointer;
}

.map-page .map-preview {
    right: 22px;
    bottom: 22px;
    left: auto;
    width: min(360px, calc(100% - 44px));
    max-height: calc(100% - 140px);
    gap: 0;
    padding: 0;
    overflow: auto;
}

.map-preview-image {
    height: 154px;
    background: center / cover no-repeat;
}

.map-preview-body {
    padding: 16px;
}

.map-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
    background: rgba(255, 255, 255, 0.9);
}

.preview-topline,
.preview-meta-row,
.preview-buckets,
.preview-action-row,
.carousel-header,
.map-empty-actions {
    display: flex;
    align-items: center;
}

.preview-topline,
.preview-meta-row,
.preview-buckets {
    flex-wrap: wrap;
    gap: 8px;
}

.preview-topline {
    justify-content: space-between;
}

.preview-badge,
.preview-status,
.preview-buckets span {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(244, 63, 104, 0.08);
    color: var(--brand-primary);
    font-size: 0.7rem;
    font-weight: 800;
}

.preview-status {
    background: rgba(24, 169, 122, 0.1);
    color: var(--success);
}

.map-preview-body h3 {
    margin: 12px 0 8px;
    font-size: 1.35rem;
    letter-spacing: -0.05em;
}

.preview-meta-row,
.map-preview-body p {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.map-preview-body p {
    margin: 10px 0;
    line-height: 1.45;
}

.map-preview-actions,
.preview-action-row {
    gap: 8px;
    margin-top: 14px;
}

.map-preview-actions .primary-btn,
.map-preview-actions .secondary-btn,
.preview-action-row .secondary-btn {
    flex: 1;
}

.preview-action-row .text-button {
    flex: 1;
    text-align: right;
}

.map-carousel {
    right: 404px;
    bottom: 22px;
    left: 22px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 12px 24px rgba(7, 27, 51, 0.12);
}

.carousel-header {
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.carousel-header h3 {
    margin: 0;
    font-size: 0.92rem;
}

.carousel-track {
    display: flex;
    gap: 10px;
    overflow-x: auto;
}

.carousel-card {
    display: grid;
    grid-template-columns: 42px minmax(110px, 1fr);
    grid-template-rows: auto auto;
    flex: 0 0 190px;
    gap: 2px 8px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
}

.carousel-card-thumb {
    grid-row: 1 / span 2;
    width: 42px;
    height: 42px;
    border-radius: 9px;
    background: center / cover no-repeat;
}

.carousel-card strong {
    font-size: 0.78rem;
}

.carousel-card span:last-child {
    color: var(--text-secondary);
    font-size: 0.72rem;
}

.map-empty {
    inset: 0;
    display: grid;
    place-content: center;
    gap: 14px;
    padding: 24px;
    background: rgba(255, 255, 255, 0.78);
    text-align: center;
}

.map-empty h3 {
    margin: 0;
    font-size: 1.2rem;
}

.map-empty-actions {
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.map-page .leaflet-control-zoom a {
    color: var(--text-primary);
}

.option-icon.navy {
    background: rgba(7, 27, 51, 0.08);
    color: var(--text-primary);
}

.form-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.stacked-label {
    display: flex;
    flex-direction: column;
    gap: 7px;
    color: var(--text-primary);
    font-size: 0.88rem;
    font-weight: 700;
}

.stacked-label select {
    min-height: 42px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-soft);
    color: var(--text-primary);
    font: inherit;
    padding: 0 10px;
}

.modal-copy {
    margin: -4px 0 16px;
    color: var(--text-secondary);
}

@media (max-width: 860px) {
    .map-controls-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .map-search-wrap {
        max-width: none;
    }

    .map-control-actions {
        justify-content: flex-start;
    }

    .map-stage {
        min-height: 640px;
        height: 72vh;
    }

    .map-carousel {
        right: 22px;
        bottom: 22px;
    }

    .map-page .map-preview {
        top: auto;
        right: 16px;
        bottom: 16px;
        width: min(340px, calc(100% - 32px));
    }

}

@media (max-width: 580px) {
    .app-shell {
        padding-right: 14px;
        padding-left: 14px;
    }

    .map-control-actions .utility-action {
        flex: 1 1 calc(50% - 8px);
    }

    .map-stage {
        min-height: 600px;
        height: 68vh;
        border-radius: 18px;
    }

    .map-legend {
        width: auto;
    }

    .legend-body {
        display: none;
    }

    .map-page .map-preview {
        max-height: calc(100% - 88px);
    }

    .map-preview-image {
        height: 112px;
    }
}

.toast {
    position: fixed;
    right: 24px;
    bottom: 24px;
    max-width: 280px;
    padding: 12px 16px;
    background: var(--text-primary);
    color: #fff;
    border-radius: 12px;
    box-shadow: var(--shadow-soft);
    z-index: 120;
}

.hidden {
    display: none !important;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 1024px) and (min-width: 761px) {
    .auth-layout {
        gap: 24px;
    }

    .branding-panel {
        flex: 1.15 1 0;
    }

    .journey-panel {
        min-height: 440px;
    }

    .journey-panel-copy {
        bottom: 32px;
        left: 32px;
        max-width: 330px;
    }
}

@media (max-width: 760px) {
    .auth-layout {
        flex-direction: column;
        gap: 24px;
        padding-top: 10px;
    }

    .branding-panel,
    .auth-panel {
        flex: 0 0 auto;
        width: 100%;
    }

    .login-page .branding-panel {
        order: 1;
    }

    .login-page .auth-panel {
        order: 2;
    }

    .journey-panel {
        min-height: 340px;
    }

    .journey-panel-image {
        object-position: 65% center;
    }

    .login-page .journey-panel-image {
        object-position: center 65%;
    }

    .journey-panel-copy {
        bottom: 24px;
        left: 24px;
        right: 24px;
        max-width: 300px;
    }

    .journey-panel-copy h1 {
        font-size: clamp(1.75rem, 8vw, 2.1rem);
    }

    .journey-panel-copy p:last-child {
        margin-top: 11px;
        font-size: 0.9rem;
    }

    .journey-panel-eyebrow {
        margin-bottom: 8px;
        font-size: 0.72rem;
    }
}

@media (max-width: 640px) {
    .page-shell {
        padding-left: 18px;
        padding-right: 18px;
    }

    .auth-card,
    .subpage-card {
        padding-left: 20px;
        padding-right: 20px;
    }

    .form-options {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .site-footer {
        justify-content: center;
        text-align: center;
    }
}

/* Add Pin flow */
.pin-flow-page {
    background: var(--bg-primary);
}

.pin-flow-shell {
    width: min(100%, 1080px);
    margin: 0 auto;
    padding: 22px 0 36px;
}

.pin-flow-shell.narrow {
    width: min(100%, 760px);
}

.breadcrumb,
.flow-help,
.flow-form small {
    color: var(--text-secondary);
    font-size: 0.84rem;
}

.breadcrumb {
    margin: 0 0 14px;
}

.pin-flow-heading {
    margin-bottom: 26px;
}

.pin-flow-heading h1 {
    margin: 0;
    color: var(--text-primary);
    font-size: clamp(2rem, 4vw, 3rem);
    letter-spacing: -0.07em;
}

.pin-flow-heading p {
    max-width: 640px;
    margin: 10px 0 0;
    color: var(--text-secondary);
    line-height: 1.6;
}

.pin-method-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.pin-method-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    min-height: 138px;
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--surface);
    color: var(--text-primary);
    box-shadow: 0 10px 22px rgba(7, 27, 51, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pin-method-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-soft);
}

.pin-method-card .option-icon {
    width: 48px;
    height: 48px;
    font-size: 1.25rem;
}

.pin-method-card strong,
.pin-method-card small {
    display: block;
}

.pin-method-card strong {
    font-size: 1.05rem;
}

.pin-method-card small {
    margin-top: 5px;
    color: var(--text-secondary);
    line-height: 1.45;
}

.pin-method-card b {
    color: var(--brand-primary);
    font-size: 1.3rem;
}

.flow-search {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 0 16px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: 0 8px 18px rgba(7, 27, 51, 0.04);
}

.flow-search input {
    width: 100%;
    min-height: 60px;
    border: 0;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    font-size: 1rem;
}

.place-result-list,
.flow-bucket-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.place-result,
.flow-bucket-row,
.pin-summary,
.link-detected {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: var(--surface);
    color: var(--text-primary);
}

.place-result {
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.place-result:hover {
    border-color: rgba(244, 63, 104, 0.35);
}

.place-result>span:nth-child(2),
.flow-bucket-row>span:nth-child(3),
.pin-summary div,
.link-detected div {
    flex: 1;
}

.place-result strong,
.place-result small,
.flow-bucket-row strong,
.flow-bucket-row small,
.pin-summary strong,
.pin-summary small,
.link-detected strong,
.link-detected span {
    display: block;
}

.place-result small,
.flow-bucket-row small,
.pin-summary small,
.link-detected small,
.link-detected span {
    color: var(--text-secondary);
    font-size: 0.8rem;
    margin-top: 3px;
}

.place-result b {
    color: var(--brand-primary);
    font-size: 0.83rem;
}

.place-thumb {
    display: block;
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(244, 63, 104, .15), rgba(20, 174, 181, .14)) center / cover;
}

.flow-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--surface);
    box-shadow: 0 10px 22px rgba(7, 27, 51, 0.04);
}

.flow-form>label,
.flow-form-row>label {
    display: flex;
    flex-direction: column;
    gap: 7px;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 700;
}

.flow-form input,
.flow-form select,
.flow-form textarea,
.bucket-search {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--surface-soft);
    color: var(--text-primary);
    font: inherit;
    padding: 11px 12px;
}

.flow-form input,
.flow-form select {
    min-height: 44px;
}

.flow-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.flow-form details {
    color: var(--text-secondary);
    font-size: 0.88rem;
}

.flow-form details .flow-form-row {
    margin-top: 12px;
}

.flow-error {
    min-height: 1.2em;
    margin: 0;
    color: var(--error);
    font-size: 0.84rem;
    font-weight: 600;
}

.flow-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.flow-actions.stack {
    flex-direction: column;
    align-items: stretch;
}

.flow-actions.stack>* {
    text-align: center;
}

.flow-empty {
    padding: 30px 22px;
    border: 1px dashed var(--border);
    border-radius: 18px;
    background: rgba(255, 255, 255, .55);
    color: var(--text-secondary);
    text-align: center;
}

.flow-empty h3 {
    margin: 0;
    color: var(--text-primary);
}

.flow-empty p {
    line-height: 1.5;
}

.flow-empty div {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.flow-empty .primary-btn,
.flow-empty .secondary-btn {
    width: auto;
    min-height: 40px;
    padding: 0 13px;
}

.link-processing {
    margin: 2px 0;
    padding: 14px;
    border-radius: 12px;
    background: linear-gradient(90deg, rgba(244, 63, 104, .06), rgba(20, 174, 181, .12), rgba(244, 63, 104, .06));
    background-size: 200% 100%;
    color: var(--text-secondary);
    font-weight: 700;
    animation: link-check 1s linear infinite;
}

@keyframes link-check {
    to {
        background-position: -200% 0;
    }
}

.link-detected {
    margin-top: 4px;
}

.link-detected .primary-btn {
    width: auto;
    padding: 0 14px;
}

.review-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, .75fr);
    gap: 20px;
}

.review-preview {
    align-self: start;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--surface);
    box-shadow: 0 10px 22px rgba(7, 27, 51, .04);
}

.review-photo {
    height: 220px;
    margin: -18px -18px 16px;
    border-radius: 20px 20px 0 0;
    background: linear-gradient(135deg, rgba(244, 63, 104, .16), rgba(20, 174, 181, .14)) center / cover;
}

.review-preview h2 {
    margin: 12px 0 6px;
    font-size: 1.45rem;
    letter-spacing: -.05em;
}

.review-preview p {
    margin: 7px 0;
    color: var(--text-secondary);
    font-size: .9rem;
}

.review-map {
    display: grid;
    place-items: center;
    height: 92px;
    margin: 16px 0;
    border-radius: 12px;
    background: linear-gradient(135deg, #dcebf0, #f6dde2);
    color: var(--text-secondary);
    font-size: .8rem;
    font-weight: 700;
}

.pin-summary {
    margin-bottom: 14px;
}

.bucket-search {
    margin-bottom: 12px;
}

.bucket-tabs {
    display: flex;
    gap: 8px;
    margin: 0 0 12px;
}

.bucket-tabs button {
    min-height: 36px;
    padding: 0 13px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-secondary);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.bucket-tabs .is-active {
    border-color: rgba(244, 63, 104, .3);
    background: rgba(244, 63, 104, .08);
    color: var(--brand-primary);
}

.flow-bucket-row {
    cursor: pointer;
}

.flow-bucket-row input {
    width: 18px;
    height: 18px;
    accent-color: var(--brand-primary);
}

.flow-bucket-row:has(input:checked) {
    border-color: rgba(244, 63, 104, .35);
    background: rgba(244, 63, 104, .04);
}

.flow-bucket-list+.text-button {
    margin: 16px 0 0;
    text-align: left;
}

.flow-dialog {
    position: fixed;
    inset: 0;
    z-index: 130;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(7, 27, 51, .22);
    backdrop-filter: blur(3px);
}

.flow-dialog>div {
    width: min(100%, 430px);
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}

.flow-dialog h2 {
    margin: 0 0 8px;
    font-size: 1.35rem;
    letter-spacing: -.05em;
}

.flow-dialog p {
    color: var(--text-secondary);
    line-height: 1.5;
}

.flow-dialog .flow-form {
    padding: 0;
    border: 0;
    box-shadow: none;
}

.success-shell {
    padding-top: 62px;
    text-align: center;
}

.success-shell .pin-flow-heading p {
    margin-right: auto;
    margin-left: auto;
}

.bucket-save-animation {
    position: relative;
    width: 128px;
    height: 118px;
    margin: 0 auto 18px;
}

.save-pin {
    position: absolute;
    top: 0;
    left: 54px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 38px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    background: var(--brand-primary);
    color: transparent;
    animation: pin-drop .58s ease-in forwards;
}

.save-bucket {
    position: absolute;
    bottom: 4px;
    left: 29px;
    display: grid;
    place-items: center;
    width: 70px;
    height: 55px;
    border-radius: 10px 10px 20px 20px;
    background: var(--accent-teal);
    color: #fff;
    font-size: 2rem;
    animation: bucket-bounce .2s .54s ease-out both;
}

.save-check {
    position: absolute;
    right: 12px;
    bottom: 18px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--success);
    color: #fff;
    font-weight: 800;
    opacity: 0;
    animation: check-in .25s .72s ease-out forwards;
}

@keyframes pin-drop {
    from {
        transform: translateY(-28px) rotate(-45deg);
        opacity: 0;
    }

    to {
        transform: translateY(51px) rotate(-45deg);
        opacity: 1;
    }
}

@keyframes bucket-bounce {
    50% {
        transform: translateY(-6px);
    }
}

@keyframes check-in {
    to {
        opacity: 1;
        transform: scale(1);
    }

    from {
        transform: scale(.6);
    }
}

.saved-buckets {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 22px;
}

.saved-buckets span {
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(244, 63, 104, .08);
    color: var(--brand-primary);
    font-size: .8rem;
    font-weight: 800;
}

@media (max-width: 760px) {

    .pin-method-grid,
    .review-grid {
        grid-template-columns: 1fr;
    }

    .review-preview {
        order: -1;
    }
}

@media (max-width: 560px) {
    .pin-flow-shell {
        padding-top: 12px;
    }

    .pin-method-card {
        min-height: 112px;
        padding: 16px;
    }

    .flow-form-row {
        grid-template-columns: 1fr;
    }

    .place-result {
        align-items: flex-start;
    }

    .link-detected {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .link-detected .primary-btn {
        width: 100%;
    }
}

/* Pin details */
.pin-detail-shell {
    padding: 20px 0 38px;
}

.pin-detail-shell .breadcrumb {
    margin-bottom: 10px;
}

.pin-detail-shell .breadcrumb a {
    color: var(--text-secondary);
}

.pin-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(280px, .75fr);
    gap: 22px;
    margin-top: 18px;
}

.pin-detail-main {
    min-width: 0;
}

.pin-hero {
    position: relative;
    height: 370px;
    border-radius: 24px;
    background: center / cover no-repeat, linear-gradient(135deg, rgba(244, 63, 104, .18), rgba(20, 174, 181, .18));
    box-shadow: 0 16px 36px rgba(7, 27, 51, .08);
}

.pin-hero button {
    position: absolute;
    right: 14px;
    bottom: 14px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 11px;
    background: rgba(255, 255, 255, .92);
    color: var(--text-primary);
    cursor: pointer;
}

.pin-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 0;
}

.pin-title-row h1 {
    margin: 10px 0 5px;
    color: var(--text-primary);
    font-size: clamp(2rem, 3.2vw, 3rem);
    letter-spacing: -.07em;
}

.pin-title-row p {
    margin: 0;
    color: var(--text-secondary);
}

.detail-status {
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    padding: 0 9px;
    border-radius: 999px;
    background: rgba(244, 63, 104, .09);
    color: var(--brand-primary);
    font-size: .74rem;
    font-weight: 800;
}

.detail-status.visited {
    background: rgba(24, 169, 122, .11);
    color: var(--success);
}

.detail-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.detail-actions .secondary-btn {
    width: auto;
    min-height: 38px;
    padding: 0 11px;
}

.detail-actions .icon-button {
    width: 38px;
    height: 38px;
    font-size: .78rem;
}

.detail-card {
    margin-bottom: 16px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: 0 8px 18px rgba(7, 27, 51, .035);
}

.detail-card h2 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.22rem;
    letter-spacing: -.045em;
}

.detail-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.detail-section-header .text-button {
    width: auto;
}

.about-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
    margin: 0;
}

.about-grid dt {
    margin-bottom: 4px;
    color: var(--text-muted);
    font-size: .76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.about-grid dd {
    margin: 0;
    color: var(--text-primary);
    line-height: 1.45;
}

.about-grid a {
    color: var(--brand-primary);
    word-break: break-word;
}

.open-now {
    color: var(--success);
    font-weight: 800;
}

.pin-detail-side {
    min-width: 0;
}

.visit-status-card .brand-text,
.brand-text {
    display: block;
    margin-top: 14px;
    color: var(--brand-primary);
    font-size: 1.25rem;
}

.visit-status-card .success-text,
.success-text {
    display: block;
    margin-top: 14px;
    color: var(--success);
    font-size: 1.25rem;
}

.visit-status-card p,
.detail-card>p {
    color: var(--text-secondary);
    line-height: 1.5;
}

.visit-status-card .primary-btn {
    margin-top: 6px;
}

.detail-bucket-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.detail-bucket-list a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px;
    border-radius: 11px;
    color: var(--text-primary);
}

.detail-bucket-list a:hover {
    background: rgba(244, 63, 104, .04);
}

.detail-bucket-list strong,
.detail-bucket-list small {
    display: block;
}

.detail-bucket-list small {
    margin-top: 2px;
    color: var(--text-secondary);
    font-size: .76rem;
}

.bucket-dot {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(20, 174, 181, .1);
    color: var(--accent-teal);
}

.map-summary>div {
    display: grid;
    place-items: center;
    height: 104px;
    margin: 14px 0 10px;
    border-radius: 12px;
    background: linear-gradient(135deg, #dcecf0, #f8dfe6);
    color: var(--brand-primary);
    font-size: 2rem;
}

.map-summary .secondary-btn {
    width: auto;
    min-height: 38px;
    padding: 0 12px;
}

.detail-metadata {
    display: block;
    margin-top: 16px;
    color: var(--text-muted);
    font-size: .76rem;
}

.nearby-pin-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.nearby-pin-grid a {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-height: 82px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text-primary);
}

.nearby-pin-grid small {
    color: var(--text-secondary);
}

.manage-bucket-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 15px 0;
}

.manage-bucket-options label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px;
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-primary);
}

.manage-bucket-options input {
    accent-color: var(--brand-primary);
}

.manage-bucket-options small {
    margin-left: auto;
    color: var(--text-secondary);
}

.delete-btn {
    background: var(--error);
}

.pin-not-found {
    max-width: 560px;
    padding: 90px 0;
    margin: 0 auto;
    text-align: center;
}

.pin-not-found h1 {
    margin: 0;
    color: var(--text-primary);
}

.pin-not-found p {
    color: var(--text-secondary);
}

.pin-not-found a {
    display: inline-flex;
    width: auto;
    margin: 10px 4px;
    padding: 0 14px;
}

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 140;
    display: grid;
    place-items: center;
    padding: 30px;
    background: rgba(7, 27, 51, .86);
}

.lightbox img {
    max-width: min(100%, 1000px);
    max-height: 85vh;
    border-radius: 14px;
}

.lightbox button {
    position: fixed;
    top: 18px;
    right: 22px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--text-primary);
    font-size: 1.5rem;
    cursor: pointer;
}

@media (max-width: 900px) {
    .pin-detail-grid {
        grid-template-columns: 1fr;
    }

    .pin-detail-side {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 16px;
    }
}

@media (max-width: 620px) {
    .pin-hero {
        height: 245px;
        border-radius: 18px;
    }

    .pin-title-row {
        flex-direction: column;
    }

    .detail-actions {
        justify-content: flex-start;
    }

    .about-grid,
    .pin-detail-side,
    .nearby-pin-grid {
        grid-template-columns: 1fr;
    }
}

/* My Buckets */
.buckets-shell {
    padding: 20px 0 36px;
}

.buckets-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.buckets-heading h1 {
    margin: 0;
    color: var(--text-primary);
    font-size: clamp(2.1rem, 4vw, 3.2rem);
    letter-spacing: -.07em;
}

.buckets-heading p {
    margin: 8px 0 0;
    color: var(--text-secondary);
    line-height: 1.55;
}

.buckets-heading .primary-btn {
    width: auto;
    padding: 0 16px;
}

.buckets-toolbar {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    margin: 14px 0 20px;
}

.buckets-toolbar .flow-search {
    margin: 0;
}

.buckets-toolbar select {
    min-height: 44px;
    padding: 0 11px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text-primary);
    font: inherit;
}

.view-toggle {
    display: flex;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 12px;
}

.view-toggle button {
    min-height: 42px;
    padding: 0 11px;
    border: 0;
    border-left: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-secondary);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.view-toggle button:first-child {
    border-left: 0;
}

.view-toggle .is-active {
    background: rgba(244, 63, 104, .08);
    color: var(--brand-primary);
}

.bucket-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.bucket-manage-card {
    position: relative;
    overflow: visible;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: 0 8px 18px rgba(7, 27, 51, .04);
    cursor: pointer;
}

.bucket-manage-cover {
    position: relative;
    height: 166px;
    border-radius: 17px 17px 0 0;
    background: center/cover no-repeat, linear-gradient(135deg, rgba(244, 63, 104, .15), rgba(20, 174, 181, .15));
}

.bucket-manage-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, transparent, rgba(7, 27, 51, .22));
}

.bucket-manage-cover>span {
    position: absolute;
    z-index: 1;
    left: 12px;
    bottom: 11px;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .9);
    color: var(--text-primary);
    font-size: .69rem;
    font-weight: 800;
}

.bucket-menu {
    position: absolute;
    z-index: 2;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, .9);
    color: var(--text-primary);
    cursor: pointer;
}

.bucket-manage-body {
    padding: 14px;
}

.bucket-manage-body h2 {
    margin: 0;
    font-size: 1.15rem;
    letter-spacing: -.045em;
}

.bucket-manage-body p {
    margin: 6px 0 12px;
    color: var(--text-secondary);
    font-size: .82rem;
}

.bucket-manage-body>div {
    display: flex;
    align-items: center;
    gap: 7px;
}

.bucket-type-tag {
    padding: 5px 7px;
    border-radius: 999px;
    background: rgba(20, 174, 181, .1);
    color: var(--accent-teal);
    font-size: .67rem;
    font-weight: 800;
}

.member-stack {
    color: var(--text-secondary);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: -.05em;
}

.quick-add {
    margin-left: auto;
    color: var(--brand-primary);
    font-size: .75rem;
}

.bucket-context {
    position: absolute;
    z-index: 15;
    top: 45px;
    right: 10px;
    width: 175px;
    padding: 7px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}

.bucket-context button {
    display: block;
    width: 100%;
    padding: 9px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-primary);
    text-align: left;
    font: inherit;
    font-size: .8rem;
    cursor: pointer;
}

.bucket-context button:hover {
    background: rgba(244, 63, 104, .05);
}

.bucket-context .danger {
    color: var(--error);
}

.bucket-create-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 255px;
    padding: 22px;
    border: 1px dashed rgba(244, 63, 104, .4);
    border-radius: 18px;
    background: rgba(244, 63, 104, .035);
    color: var(--text-primary);
    text-align: center;
    cursor: pointer;
}

.bucket-create-card span {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: 10px;
    border-radius: 50%;
    background: rgba(244, 63, 104, .1);
    color: var(--brand-primary);
    font-size: 1.4rem;
}

.bucket-create-card small {
    max-width: 210px;
    margin-top: 6px;
    color: var(--text-secondary);
    line-height: 1.45;
}

.bucket-card-grid.is-list {
    grid-template-columns: 1fr;
}

.bucket-card-grid.is-list .bucket-manage-card {
    display: grid;
    grid-template-columns: 180px 1fr;
}

.bucket-card-grid.is-list .bucket-manage-cover {
    height: 100%;
    border-radius: 17px 0 0 17px;
}

.bucket-card-grid.is-list .bucket-create-card {
    min-height: 130px;
}

.buckets-bottom {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 16px;
    margin-top: 28px;
}

.bucket-activity p {
    padding: 9px 0;
    margin: 0;
    border-top: 1px solid var(--border);
    color: var(--text-primary);
    font-size: .86rem;
}

.bucket-activity p:first-child {
    border-top: 0;
}

.bucket-activity small {
    display: block;
    margin-top: 3px;
    color: var(--text-muted);
}

@media(max-width:940px) {
    .bucket-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .buckets-bottom {
        grid-template-columns: 1fr;
    }
}

@media(max-width:620px) {
    .buckets-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .buckets-toolbar {
        grid-template-columns: 1fr 1fr;
    }

    .buckets-toolbar .flow-search {
        grid-column: 1/-1;
    }

    .bucket-card-grid {
        grid-template-columns: 1fr;
    }

    .bucket-card-grid.is-list .bucket-manage-card {
        grid-template-columns: 110px 1fr;
    }

    .bucket-card-grid.is-list .bucket-manage-cover {
        min-height: 120px;
    }

    .bucket-card-grid.is-list .bucket-manage-body>div {
        flex-wrap: wrap;
    }

    .bucket-card-grid.is-list .quick-add {
        margin-left: 0;
    }
}

.bucket-detail-hero {
    display: flex;
    align-items: flex-end;
    min-height: 300px;
    padding: 28px;
    border-radius: 22px;
    background: center/cover no-repeat, linear-gradient(135deg, rgba(244, 63, 104, .18), rgba(20, 174, 181, .18));
    color: #fff;
    overflow: hidden;
}

.bucket-detail-hero>div {
    max-width: 500px;
}

.bucket-detail-hero span {
    display: inline-flex;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .88);
    color: var(--text-primary);
    font-size: .72rem;
    font-weight: 800;
}

.bucket-detail-hero h1 {
    margin: 10px 0 5px;
    font-size: clamp(2rem, 4vw, 3.2rem);
    letter-spacing: -.07em;
}

.bucket-detail-hero p {
    margin: 0 0 16px;
}

.bucket-detail-hero .primary-btn {
    width: auto;
    padding: 0 14px;
}

.bucket-detail-shell {
    padding: 20px 0 38px
}

.bucket-full-hero {
    position: relative;
    height: 285px;
    border-radius: 22px;
    background: center/cover no-repeat, linear-gradient(135deg, #f7dfe7, #dceff0)
}

.bucket-full-hero:after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, transparent, rgba(7, 27, 51, .16))
}

.bucket-full-hero button {
    position: absolute;
    z-index: 1;
    right: 16px;
    bottom: 16px;
    width: auto;
    padding: 0 13px
}

.bucket-full-head {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 0
}

.bucket-full-head h1 {
    margin: 10px 0 6px;
    font-size: clamp(2.1rem, 4vw, 3.2rem);
    letter-spacing: -.07em
}

.bucket-full-head p,
.bucket-meta {
    margin: 0;
    color: var(--text-secondary)
}

.bucket-meta {
    margin-top: 9px;
    font-size: .85rem
}

.bucket-stat-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px
}

.bucket-stat-row div {
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: var(--surface)
}

.bucket-stat-row strong,
.bucket-stat-row span {
    display: block
}

.bucket-stat-row strong {
    font-size: 1.35rem
}

.bucket-stat-row span {
    margin-top: 3px;
    color: var(--text-secondary);
    font-size: .78rem
}

.bucket-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 14px 0;
    color: var(--text-secondary);
    font-size: .8rem
}

.bucket-progress i {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: var(--border);
    overflow: hidden
}

.bucket-progress b {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--accent-teal)
}

.bucket-detail-tabs {
    display: flex;
    gap: 8px;
    margin: 18px 0
}

.bucket-detail-tabs button {
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    font: inherit;
    font-weight: 700;
    color: var(--text-secondary)
}

.bucket-detail-tabs .is-active {
    border-color: rgba(244, 63, 104, .3);
    background: rgba(244, 63, 104, .08);
    color: var(--brand-primary)
}

.bucket-pin-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px
}

.bucket-pin-detail-grid article {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface)
}

.bucket-pin-detail-grid a {
    display: block;
    color: var(--text-primary)
}

.bucket-detail-pin-image {
    display: block;
    height: 142px;
    background: center/cover no-repeat
}

.bucket-pin-detail-grid div {
    padding: 12px
}

.bucket-pin-detail-grid h2 {
    margin: 10px 0 4px;
    font-size: 1rem
}

.bucket-pin-detail-grid p,
.bucket-pin-detail-grid small {
    margin: 0;
    color: var(--text-secondary);
    font-size: .78rem
}

.member-detail>div {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px solid var(--border)
}

.member-detail>div span {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(244, 63, 104, .1);
    color: var(--brand-primary);
    font-size: .72rem;
    font-weight: 800
}

.member-detail small {
    margin-left: auto;
    color: var(--text-secondary)
}

@media(max-width:760px) {
    .bucket-full-head {
        flex-direction: column
    }

    .bucket-stat-row {
        grid-template-columns: repeat(2, 1fr)
    }

    .bucket-pin-detail-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(max-width:480px) {
    .bucket-full-hero {
        height: 210px
    }

    .bucket-pin-detail-grid {
        grid-template-columns: 1fr
    }
}

/* Create / edit bucket */
.bucket-form-shell {
    max-width: 1200px;
    margin: 0 auto;
    padding: 42px 32px 72px
}

.bucket-form-heading {
    margin-bottom: 30px
}

.bucket-form-heading h1 {
    margin: 0 0 8px;
    font-size: 34px;
    letter-spacing: -1.2px;
    color: #173a2f
}

.bucket-form-heading p {
    margin: 0;
    color: #68776f
}

.bucket-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(280px, .8fr);
    gap: 28px;
    align-items: start
}

.bucket-form-card,
.bucket-form-preview {
    background: #fff;
    border: 1px solid #e4e8e5;
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(27, 51, 41, .05)
}

.bucket-form-card {
    padding: 30px
}

.bucket-form-section+.bucket-form-section {
    border-top: 1px solid #edf0ee;
    margin-top: 30px;
    padding-top: 28px
}

.bucket-form-section h2 {
    margin: 0 0 7px;
    font-size: 18px;
    color: #173a2f
}

.bucket-form-section>p {
    margin: 0 0 18px;
    color: #718078;
    font-size: 14px
}

.bucket-type-select {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px
}

.bucket-type-option {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 16px;
    border: 1px solid #dfe6e1;
    border-radius: 12px;
    cursor: pointer;
    transition: .18s
}

.bucket-type-option.active {
    border-color: #2d7058;
    background: #f0f8f4;
    box-shadow: inset 0 0 0 1px #2d7058
}

.bucket-type-option input {
    margin: 3px 0 0;
    accent-color: #2d7058
}

.bucket-type-option strong,
.bucket-type-option small {
    display: block
}

.bucket-type-option strong {
    color: #1b3b30;
    margin-bottom: 3px
}

.bucket-type-option small {
    color: #6d7c74;
    line-height: 1.35
}

.bucket-form-field {
    display: block;
    margin-top: 18px
}

.bucket-form-field>span {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 7px;
    color: #28463a;
    font-size: 13px;
    font-weight: 700
}

.bucket-form-field em {
    font-style: normal;
    color: #8a9690;
    font-size: 12px;
    font-weight: 500
}

.bucket-form-field input,
.bucket-form-field textarea,
.bucket-form-field select,
.invite-add input,
.invite-add select {
    box-sizing: border-box;
    width: 100%;
    border: 1px solid #dbe3de;
    border-radius: 10px;
    background: #fff;
    color: #203e32;
    padding: 12px 13px;
    font: inherit;
    outline: none
}

.bucket-form-field textarea {
    min-height: 106px;
    resize: vertical
}

.bucket-form-field input:focus,
.bucket-form-field textarea:focus,
.bucket-form-field select:focus,
.invite-add input:focus,
.invite-add select:focus {
    border-color: #3f876c;
    box-shadow: 0 0 0 3px rgba(63, 135, 108, .12)
}

.bucket-cover-upload {
    position: relative;
    display: flex;
    min-height: 178px;
    overflow: hidden;
    border: 1px dashed #bfcfc5;
    border-radius: 14px;
    background: linear-gradient(135deg, #e1eee6, #c7ded2);
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    background-size: cover;
    background-position: center
}

.bucket-cover-upload:after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(14, 48, 37, .08)
}

.bucket-cover-upload>* {
    position: relative;
    z-index: 1
}

.bucket-cover-upload span {
    display: block;
    width: 46px;
    height: 46px;
    margin: 0 auto 9px;
    border-radius: 50%;
    background: #fff;
    color: #34745b;
    font-size: 28px;
    line-height: 43px;
    box-shadow: 0 3px 9px rgba(25, 58, 45, .12)
}

.bucket-cover-upload strong,
.bucket-cover-upload small {
    display: block
}

.bucket-cover-upload strong {
    color: #173a2f
}

.bucket-cover-upload small {
    margin-top: 4px;
    color: #587064;
    font-size: 12px
}

.bucket-cover-upload input {
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0;
    cursor: pointer
}

.privacy-options {
    display: grid;
    gap: 10px
}

.privacy-options label {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    padding: 13px 14px;
    border: 1px solid #e0e7e2;
    border-radius: 11px;
    color: #365448;
    cursor: pointer
}

.privacy-options input {
    margin-top: 3px;
    accent-color: #2d7058
}

.privacy-options small {
    display: block;
    margin-top: 2px;
    color: #74827b
}

.invite-add {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 130px auto;
    gap: 9px;
    align-items: center
}

.invite-add button,
.bucket-form-actions button {
    border: 0;
    border-radius: 10px;
    padding: 12px 16px;
    background: #2d7058;
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer
}

.invite-add button {
    white-space: nowrap
}

.invite-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #edf0ee
}

.invite-row:last-child {
    border-bottom: 0
}

.invite-row strong,
.invite-row small {
    display: block
}

.invite-row strong {
    color: #28463a;
    font-size: 14px
}

.invite-row small {
    color: #7a8981;
    font-size: 12px;
    margin-top: 2px
}

.invite-row button {
    border: 0;
    background: transparent;
    color: #a2544d;
    cursor: pointer;
    font: inherit
}

.bucket-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 26px
}

.bucket-form-actions .secondary {
    background: #eef3f0;
    color: #35574a
}

.bucket-form-preview {
    position: sticky;
    top: 24px;
    overflow: hidden
}

.bucket-form-preview-cover {
    height: 156px;
    background: linear-gradient(135deg, #416f5d, #a8c9b7);
    background-size: cover;
    background-position: center
}

.bucket-form-preview-body {
    padding: 21px
}

.bucket-form-preview .eyebrow {
    margin: 0 0 7px;
    color: #668276;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase
}

.bucket-form-preview h3 {
    margin: 0;
    color: #1c4033;
    font-size: 22px
}

.bucket-form-preview p {
    margin: 8px 0 0;
    color: #73827a;
    line-height: 1.45;
    font-size: 14px
}

.bucket-form-preview .preview-meta {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
    margin-top: 18px
}

.bucket-form-preview .preview-meta span {
    padding: 6px 9px;
    border-radius: 999px;
    background: #eef5f1;
    color: #477260;
    font-size: 12px;
    font-weight: 700
}

.bucket-form-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    z-index: 50;
    transform: translate(-50%, 120px);
    padding: 12px 18px;
    border-radius: 10px;
    background: #183c30;
    color: #fff;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .2);
    transition: transform .22s
}

.bucket-form-toast.show {
    transform: translate(-50%, 0)
}

.bucket-form-actions .secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700
}

.text-button {
    margin-top: 10px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #39765f;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer
}

.field-note {
    margin: 12px 0 0;
    color: #718078;
    font-size: 12px
}

@media(max-width:850px) {
    .bucket-form-shell {
        padding: 28px 18px 52px
    }

    .bucket-form-grid {
        grid-template-columns: 1fr
    }

    .bucket-form-preview {
        position: static;
        grid-row: 1
    }

    .bucket-form-card {
        padding: 22px
    }

    .bucket-form-heading h1 {
        font-size: 29px
    }
}

@media(max-width:560px) {

    .bucket-type-select,
    .invite-add {
        grid-template-columns: 1fr
    }

    .invite-add button {
        width: 100%
    }

    .bucket-form-actions {
        justify-content: stretch;
        flex-direction: column-reverse
    }

    .bucket-form-actions button,
    .bucket-form-actions .secondary {
        width: 100%
    }
}

/* Group members */
.group-members-page {
    background: #fff6f5
}

.group-members-shell {
    max-width: 1120px;
    margin: 0 auto;
    padding: 30px 30px 64px;
    color: #071b33
}

.group-members-head {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: flex-end;
    margin: 22px 0
}

.group-members-head h1 {
    margin: 8px 0;
    font-size: clamp(2rem, 4vw, 2.8rem);
    letter-spacing: -.06em
}

.group-members-head>div>p:last-child {
    margin: 0;
    color: #536174
}

.group-context {
    margin: 0;
    color: #536174;
    font-size: .83rem;
    font-weight: 800
}

.group-context span {
    margin-left: 8px;
    padding: 4px 8px;
    border-radius: 99px;
    background: #f0edfd;
    color: #7047d7;
    font-size: .72rem
}

.group-head-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap
}

.group-primary,
.group-secondary,
.group-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 15px;
    border: 1px solid transparent;
    border-radius: 10px;
    font: inherit;
    font-size: .86rem;
    font-weight: 800;
    cursor: pointer;
    text-decoration: none
}

.group-primary {
    background: #f43f68;
    color: #fff
}

.group-primary:hover {
    background: #e8365e
}

.group-secondary {
    background: #fff;
    color: #344357;
    border-color: #eae4df
}

.group-danger {
    background: #d92d42;
    color: #fff
}

.group-summary {
    display: grid;
    grid-template-columns: repeat(3, 132px) 1fr;
    gap: 10px;
    margin-bottom: 22px
}

.group-summary>div,
.group-role-info {
    min-height: 78px;
    padding: 14px 16px;
    border: 1px solid #eae4df;
    border-radius: 14px;
    background: #fff
}

.group-summary strong,
.group-summary span {
    display: block
}

.group-summary strong {
    font-size: 1.35rem
}

.group-summary span {
    margin-top: 2px;
    color: #536174;
    font-size: .75rem
}

.group-role-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    background: #fff;
    color: #536174;
    font: inherit;
    font-size: .8rem;
    cursor: pointer
}

.group-role-info>span {
    margin: 0;
    text-decoration: underline
}

.group-tabs {
    display: flex;
    gap: 22px;
    border-bottom: 1px solid #eae4df
}

.group-tabs button {
    position: relative;
    padding: 12px 2px;
    border: 0;
    background: none;
    color: #69778a;
    font: inherit;
    font-size: .9rem;
    font-weight: 800;
    cursor: pointer
}

.group-tabs .is-active {
    color: #f43f68
}

.group-tabs .is-active:after {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    background: #f43f68;
    content: ""
}

.group-tabs small {
    display: inline-grid;
    place-items: center;
    min-width: 19px;
    height: 19px;
    margin-left: 4px;
    border-radius: 50%;
    background: #f6eef0;
    color: inherit;
    font-size: .68rem
}

.group-panel {
    margin-top: 18px;
    border: 1px solid #eae4df;
    border-radius: 17px;
    background: #fff;
    overflow: visible
}

.group-list-tools {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid #f0ece9
}

.group-search {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 260px;
    padding: 0 11px;
    border: 1px solid #eae4df;
    border-radius: 10px;
    color: #8a94a3
}

.group-search input,
.group-list-tools select,
.group-modal-form input,
.group-modal-form select {
    width: 100%;
    border: 0;
    background: transparent;
    color: #071b33;
    font: inherit;
    outline: 0
}

.group-list-tools select {
    width: auto;
    padding: 9px 28px 9px 10px;
    border: 1px solid #eae4df;
    border-radius: 9px
}

.member-row {
    position: relative;
    display: grid;
    grid-template-columns: 44px minmax(190px, 1.5fr) minmax(100px, .7fr) minmax(130px, .9fr) minmax(86px, .55fr);
    align-items: center;
    gap: 14px;
    padding: 15px 18px;
    border-bottom: 1px solid #f0ece9
}

.member-row:last-child {
    border-bottom: 0
}

.member-avatar {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fbe7ed;
    color: #d92d58;
    font-size: .78rem;
    font-weight: 800
}

.member-avatar.editor {
    background: #eee9fd;
    color: #7047d7
}

.member-avatar.contributor {
    background: #e5f7f6;
    color: #168f95
}

.member-avatar.viewer,
.member-avatar.invite {
    background: #edf0f3;
    color: #667183
}

.member-identity strong,
.member-identity span,
.member-identity small,
.invite-row-card strong,
.invite-row-card span {
    display: block
}

.member-identity strong {
    font-size: .88rem
}

.member-identity strong em {
    margin-left: 5px;
    padding: 2px 6px;
    border-radius: 99px;
    background: #fce8ee;
    color: #db4165;
    font-style: normal;
    font-size: .63rem
}

.member-identity span,
.member-identity small,
.invite-row-card span {
    margin-top: 3px;
    color: #69778a;
    font-size: .75rem
}

.member-identity small {
    color: #8a94a3
}

.group-role-badge {
    display: inline-flex;
    align-items: center;
    width: max-content;
    padding: 5px 9px;
    border-radius: 99px;
    background: #eaf0f5;
    color: #536174;
    font-size: .7rem;
    font-weight: 800;
    text-transform: capitalize
}

.group-role-badge.owner {
    background: #fce6ed;
    color: #d92d58
}

.group-role-badge.editor {
    background: #eee9fd;
    color: #7047d7
}

.group-role-badge.contributor {
    background: #e1f6f5;
    color: #168e95
}

.member-joined {
    color: #536174;
    font-size: .76rem
}

.member-joined small {
    display: block;
    margin-top: 3px;
    color: #8a94a3;
    font-size: .7rem
}

.member-actions {
    position: relative;
    display: flex;
    justify-content: flex-end
}

.member-more {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 8px;
    background: #fff;
    color: #536174;
    font: inherit;
    font-weight: 800;
    cursor: pointer
}

.member-more:hover {
    background: #fff1f4;
    color: #f43f68
}

.member-profile-link {
    color: #536174;
    font-size: .75rem;
    text-decoration: underline
}

.member-menu {
    position: absolute;
    top: 38px;
    right: 0;
    z-index: 10;
    display: grid;
    min-width: 170px;
    padding: 6px;
    border: 1px solid #eae4df;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 12px 26px rgba(7, 27, 51, .13)
}

.member-menu>* {
    padding: 9px 10px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #324155;
    text-align: left;
    text-decoration: none;
    font: inherit;
    font-size: .78rem;
    cursor: pointer
}

.member-menu>*:hover {
    background: #fff1f4
}

.member-menu .danger {
    color: #d92d42
}

.invite-list {
    display: grid
}

.invite-row-card {
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(180px, 1fr) 110px 72px 44px;
    align-items: center;
    gap: 13px;
    padding: 15px 18px;
    border-bottom: 1px solid #f0ece9
}

.invite-row-card:last-child {
    border-bottom: 0
}

.invite-status {
    color: #a66a11;
    font-size: .72rem;
    font-weight: 800
}

.group-empty {
    padding: 48px 22px;
    text-align: center
}

.group-empty h2 {
    margin: 0 0 8px;
    font-size: 1.05rem
}

.group-empty p {
    margin: 0;
    color: #69778a
}

.group-invalid {
    max-width: 560px;
    padding-top: 80px;
    text-align: center
}

.group-invalid p {
    margin: 8px 0 20px;
    color: #536174
}

.group-modal {
    position: relative;
    width: min(100%, 500px);
    padding: 26px;
    border-radius: 17px;
    background: #fff
}

.group-modal h2 {
    margin: 0 0 8px;
    font-size: 1.35rem
}

.group-modal>p {
    margin: 0 0 18px;
    color: #536174;
    font-size: .86rem;
    line-height: 1.5
}

.modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: #fff1f4;
    color: #d92d58;
    font-size: 1.25rem;
    cursor: pointer
}

.group-modal-form {
    display: grid;
    gap: 15px
}

.group-modal-form label {
    display: grid;
    gap: 7px;
    color: #324155;
    font-size: .8rem;
    font-weight: 800
}

.group-modal-form input,
.group-modal-form select {
    box-sizing: border-box;
    padding: 12px;
    border: 1px solid #eae4df;
    border-radius: 9px
}

.group-modal-form input:focus,
.group-modal-form select:focus {
    border-color: #f43f68;
    box-shadow: 0 0 0 3px rgba(244, 63, 104, .12)
}

.group-modal-form small {
    color: #69778a;
    font-size: .72rem;
    font-weight: 500
}

.group-modal-form .full {
    width: 100%
}

.invite-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #8a94a3;
    font-size: .72rem;
    font-weight: 800
}

.invite-divider:before,
.invite-divider:after {
    flex: 1;
    height: 1px;
    background: #eae4df;
    content: ""
}

.transfer-warning {
    margin: 0;
    padding: 10px;
    border-radius: 8px;
    background: #fff6df;
    color: #9a6810;
    font-size: .78rem
}

.role-explainer p {
    margin: 0 0 12px;
    color: #536174;
    font-size: .83rem;
    line-height: 1.45
}

.role-explainer b {
    color: #071b33
}

@media(max-width:760px) {
    .group-members-shell {
        padding: 22px 16px 48px
    }

    .group-members-head {
        align-items: flex-start;
        flex-direction: column
    }

    .group-summary {
        grid-template-columns: repeat(3, 1fr)
    }

    .group-role-info {
        grid-column: 1/-1;
        min-height: 48px
    }

    .member-row {
        grid-template-columns: 42px 1fr auto;
        gap: 10px
    }

    .member-role {
        grid-column: 2
    }

    .member-joined {
        grid-column: 2
    }

    .member-actions {
        grid-column: 3;
        grid-row: 1/4
    }

    .invite-row-card {
        grid-template-columns: 42px 1fr auto
    }

    .invite-row-card>.group-role-badge {
        grid-column: 2
    }

    .invite-status {
        grid-column: 3;
        grid-row: 2
    }

    .group-list-tools {
        flex-direction: column
    }

    .group-search {
        min-width: 0
    }

    .group-list-tools select {
        width: 100%
    }
}

@media(max-width:450px) {
    .group-summary {
        grid-template-columns: 1fr 1fr
    }

    .group-summary>div:last-of-type {
        grid-column: 1/-1
    }

    .group-head-actions {
        width: 100%
    }

    .group-head-actions>* {
        flex: 1
    }

    .member-row {
        padding: 14px 12px
    }

    .member-identity span {
        max-width: 180px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }
}

.bucket-form-actions .secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700
}

.text-button {
    margin-top: 10px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #39765f;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer
}

.field-note {
    margin: 12px 0 0;
    color: #718078;
    font-size: 12px
}

/* Group invitation */
.group-invite-page {
    min-height: 100vh;
    background: #fff6f5
}

.group-invite-page .top-nav {
    background: #fff
}

.invite-auth-actions {
    display: flex;
    align-items: center;
    gap: 16px
}

.invite-auth-actions>a {
    color: #344357;
    text-decoration: none;
    font-size: .85rem;
    font-weight: 800
}

.invite-auth-actions .invite-signup {
    padding: 10px 13px;
    border-radius: 9px;
    background: #f43f68;
    color: #fff
}

.group-invite-shell {
    display: grid;
    min-height: calc(100vh - 78px);
    place-items: center;
    padding: 44px 22px
}

.group-invite-card {
    width: min(100%, 820px);
    overflow: hidden;
    border: 1px solid #eae4df;
    border-radius: 21px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(62, 32, 40, .08)
}

.invite-cover {
    position: relative;
    height: 220px;
    background: center/cover no-repeat
}

.invite-cover:after {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(7, 27, 51, .04), rgba(7, 27, 51, .28));
    content: ""
}

.invite-cover span {
    position: absolute;
    z-index: 1;
    top: 18px;
    left: 18px;
    padding: 7px 10px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .94);
    color: #4b3f51;
    font-size: .73rem;
    font-weight: 800
}

.invite-card-body {
    padding: 28px 34px 32px
}

.invite-topline {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center
}

.invite-inviter {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #536174;
    font-size: .78rem;
    font-weight: 700
}

.invite-avatar {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fce6ed;
    color: #d92d58;
    font-size: .65rem;
    font-weight: 800
}

.invite-private {
    padding: 5px 8px;
    border-radius: 99px;
    background: #f5f2f0;
    color: #7b7277;
    font-size: .68rem;
    font-weight: 800
}

.invite-card-body h1 {
    margin: 19px 0 7px;
    color: #071b33;
    font-size: 2rem;
    letter-spacing: -.05em
}

.invite-description {
    max-width: 600px;
    margin: 0;
    color: #536174;
    line-height: 1.55
}

.invite-meta {
    display: flex;
    gap: 16px;
    align-items: center;
    margin: 18px 0;
    color: #536174;
    font-size: .78rem;
    font-weight: 800
}

.invite-avatars {
    display: flex;
    align-items: center
}

.invite-avatars i,
.invite-avatars b {
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    margin-left: -5px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #eee9fd;
    color: #7047d7;
    font-size: .56rem;
    font-style: normal;
    font-weight: 800
}

.invite-avatars i:first-child {
    margin-left: 0;
    background: #fce6ed;
    color: #d92d58
}

.invite-avatars i:nth-child(2) {
    background: #e1f6f5;
    color: #168f95
}

.invite-avatars i:nth-child(3) {
    background: #fff2d5;
    color: #9a6810
}

.invite-avatars b {
    background: #edf0f3;
    color: #536174
}

.invite-role-card {
    margin-top: 21px;
    padding: 17px;
    border: 1px solid #f2dbe2;
    border-radius: 13px;
    background: #fff8fa
}

.invite-role-card span {
    color: #8a6570;
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em
}

.invite-role-card h2 {
    margin: 4px 0;
    color: #d92d58;
    font-size: 1.12rem
}

.invite-role-card p {
    margin: 0;
    color: #536174;
    font-size: .82rem
}

.invite-safe-preview {
    margin-top: 20px;
    padding: 0 2px
}

.invite-safe-preview strong {
    font-size: .83rem
}

.invite-safe-preview ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    color: #536174;
    font-size: .78rem
}

.invite-safe-preview li:before {
    margin-right: 7px;
    color: #18a97a;
    content: "✓"
}

.invite-privacy-message {
    margin: 20px 0;
    color: #8a94a3;
    font-size: .74rem
}

.invite-privacy-message:before {
    margin-right: 6px;
    content: "⌁"
}

.invite-cta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap
}

.invite-primary,
.invite-secondary,
.invite-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 43px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 10px;
    font: inherit;
    font-size: .83rem;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer
}

.invite-primary {
    background: #f43f68;
    color: #fff
}

.invite-primary:hover {
    background: #e8365e
}

.invite-primary:disabled {
    opacity: .7;
    cursor: wait
}

.invite-secondary {
    background: #fff;
    color: #445267;
    border-color: #eae4df
}

.invite-text-button {
    padding: 9px 2px;
    border: 0;
    background: transparent;
    color: #68778b;
    font: inherit;
    font-size: .78rem;
    font-weight: 800;
    text-decoration: underline;
    cursor: pointer
}

.invite-mismatch {
    margin-top: 22px;
    padding: 17px;
    border: 1px solid #f7dccd;
    border-radius: 12px;
    background: #fff8f0
}

.invite-mismatch strong {
    color: #8a5714;
    font-size: .84rem
}

.invite-mismatch p {
    margin: 5px 0 13px;
    color: #536174;
    font-size: .78rem
}

.invite-mismatch div {
    display: flex;
    gap: 8px
}

.invite-decline-modal {
    width: min(100%, 430px);
    padding: 26px;
    border-radius: 16px;
    background: #fff
}

.invite-decline-modal h2 {
    margin: 0 0 8px;
    font-size: 1.3rem
}

.invite-decline-modal p {
    margin: 0 0 20px;
    color: #536174
}

.invite-danger {
    background: #d92d42;
    color: #fff
}

.invite-state-card {
    width: min(100%, 530px);
    padding: 48px 34px;
    border: 1px solid #eae4df;
    border-radius: 20px;
    background: #fff;
    text-align: center;
    box-shadow: 0 12px 34px rgba(62, 32, 40, .07)
}

.invite-state-icon {
    display: grid;
    place-items: center;
    width: 53px;
    height: 53px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: #fde9ed;
    color: #d92d58;
    font-size: 1.5rem;
    font-weight: 800
}

.invite-state-icon.success {
    background: #e2f7ef;
    color: #18a97a
}

.invite-state-icon.warning {
    background: #fff3d8;
    color: #b37b18
}

.invite-state-card h1 {
    margin: 0;
    color: #071b33;
    font-size: 1.7rem;
    letter-spacing: -.04em
}

.invite-state-card p {
    margin: 10px auto 23px;
    max-width: 400px;
    color: #536174;
    line-height: 1.55
}

.invite-state-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap
}

@media(max-width:620px) {
    .group-invite-shell {
        padding: 24px 14px
    }

    .invite-cover {
        height: 170px
    }

    .invite-card-body {
        padding: 23px 19px 25px
    }

    .invite-topline {
        align-items: flex-start;
        flex-direction: column
    }

    .invite-card-body h1 {
        font-size: 1.7rem
    }

    .invite-safe-preview ul {
        grid-template-columns: 1fr
    }

    .invite-meta {
        gap: 10px;
        flex-wrap: wrap
    }

    .invite-cta>* {
        width: 100%
    }

    .invite-text-button {
        width: auto
    }

    .invite-auth-actions {
        gap: 11px
    }

    .invite-auth-actions .invite-signup {
        padding: 8px 9px
    }

    .invite-state-card {
        padding: 36px 20px
    }
}

/* Place details */
.place-details-page {
    background: #fff6f5
}

.place-detail-shell {
    max-width: 1180px;
    margin: 0 auto;
    padding: 28px 28px 64px;
    color: #071b33
}

.place-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.9fr) minmax(275px, .8fr);
    gap: 28px;
    margin-top: 17px
}

.place-gallery {
    display: grid;
    grid-template-columns: 1.65fr 1fr;
    gap: 10px;
    height: 355px
}

.place-gallery button {
    position: relative;
    overflow: hidden;
    border: 0;
    border-radius: 16px;
    background: center/cover no-repeat;
    cursor: pointer;
    transition: transform .18s
}

.place-gallery button:hover {
    transform: scale(1.01)
}

.place-gallery-small {
    display: grid;
    gap: 10px
}

.place-gallery-small button:last-child:after {
    position: absolute;
    inset: 0;
    background: rgba(7, 27, 51, .34);
    content: ""
}

.place-gallery-small span {
    position: relative;
    z-index: 1;
    color: #fff;
    font: 800 .85rem Manrope
}

.place-heading {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 24px 0
}

.place-category {
    color: #7047d7;
    font-size: .76rem;
    font-weight: 800
}

.place-heading h1 {
    margin: 7px 0;
    font-size: clamp(2rem, 4vw, 2.8rem);
    letter-spacing: -.06em
}

.place-heading p {
    margin: 5px 0;
    color: #536174
}

.place-heading p strong {
    color: #071b33
}

.place-heading p span {
    color: #8a94a3
}

.place-open b,
.open-now {
    color: #18a97a
}

.place-inline-actions {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: wrap
}

.place-primary,
.place-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 41px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 10px;
    font: 800 .82rem Manrope;
    text-decoration: none;
    cursor: pointer
}

.place-primary {
    background: #f43f68;
    color: #fff
}

.place-secondary {
    background: #fff;
    color: #435267;
    border-color: #eae4df
}

.place-icon {
    display: grid;
    place-items: center;
    width: 41px;
    height: 41px;
    border: 1px solid #eae4df;
    border-radius: 10px;
    background: #fff;
    color: #435267;
    font-size: 1rem;
    cursor: pointer
}

.place-section {
    margin-bottom: 14px;
    padding: 21px;
    border: 1px solid #eae4df;
    border-radius: 16px;
    background: #fff
}

.place-section h2,
.place-save-card h2,
.place-map-card h2,
.place-provider-card h2 {
    margin: 0 0 10px;
    font-size: 1.05rem
}

.place-section>p {
    margin: 0;
    color: #536174;
    line-height: 1.58
}

.place-details-list dl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 17px;
    margin: 0
}

.place-details-list dt {
    color: #8a94a3;
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase
}

.place-details-list dd {
    margin: 4px 0 0;
    color: #39475a;
    font-size: .84rem
}

.place-details-list a {
    color: #7047d7
}

.place-section-title {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start
}

.place-section-title p {
    margin: 0;
    color: #536174;
    font-size: .78rem
}

.place-hours {
    margin-top: 14px;
    border-top: 1px solid #f0ece9
}

.place-hours p {
    display: flex;
    justify-content: space-between;
    margin: 0;
    padding: 8px 0;
    color: #536174;
    font-size: .8rem
}

.place-hours .today {
    color: #071b33;
    font-weight: 800
}

.place-amenities {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.place-amenities span,
.saved-bucket-tags span {
    padding: 7px 9px;
    border-radius: 99px;
    background: #e5f7f6;
    color: #168e95;
    font-size: .73rem;
    font-weight: 800
}

.nearby-place-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px
}

.nearby-place-grid article {
    position: relative;
    overflow: hidden;
    border: 1px solid #eee8e5;
    border-radius: 11px
}

.nearby-place-grid a {
    display: grid;
    color: #071b33;
    text-decoration: none
}

.nearby-place-grid a>span {
    display: block;
    height: 88px;
    background: center/cover
}

.nearby-place-grid strong,
.nearby-place-grid small,
.nearby-place-grid em {
    padding: 0 9px
}

.nearby-place-grid strong {
    margin-top: 9px;
    font-size: .78rem
}

.nearby-place-grid small {
    margin-top: 3px;
    color: #536174;
    font-size: .68rem
}

.nearby-place-grid em {
    margin: 6px 0 9px;
    color: #9a6810;
    font-size: .68rem;
    font-style: normal
}

.nearby-save {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 27px;
    height: 27px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #f43f68;
    font: 800 1rem Manrope;
    cursor: pointer
}

.place-detail-side {
    display: grid;
    align-content: start;
    gap: 13px
}

.place-save-card,
.place-map-card,
.place-provider-card {
    padding: 20px;
    border: 1px solid #eae4df;
    border-radius: 16px;
    background: #fff
}

.place-save-card {
    position: sticky;
    top: 20px
}

.place-save-card p,
.place-map-card p,
.place-provider-card p {
    margin: 0 0 15px;
    color: #536174;
    font-size: .82rem;
    line-height: 1.5
}

.place-save-card .full,
.place-map-card .full {
    box-sizing: border-box;
    width: 100%;
    margin-top: 8px
}

.place-text-action {
    margin-top: 11px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #7047d7;
    font: 800 .76rem Manrope;
    cursor: pointer
}

.place-map-marker {
    display: grid;
    place-items: center;
    height: 105px;
    margin-bottom: 12px;
    border-radius: 10px;
    background: linear-gradient(135deg, #d9f0ee, #f9e2e9);
    color: #f43f68;
    font-size: 2rem
}

.place-provider-card small {
    color: #8a94a3;
    font-size: .7rem
}

.saved-check {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin-bottom: 9px;
    border-radius: 50%;
    background: #e2f7ef;
    color: #18a97a;
    font-weight: 800
}

.saved-bucket-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin: 12px 0
}

.place-modal {
    width: min(100%, 560px);
    padding: 25px;
    border-radius: 17px;
    background: #fff
}

.place-modal h2 {
    margin: 0 0 14px;
    font-size: 1.3rem
}

.place-modal>p {
    color: #536174
}

.place-save-summary {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px;
    border-radius: 10px;
    background: #fff6f7
}

.place-save-summary>span {
    width: 46px;
    height: 46px;
    border-radius: 8px;
    background: center/cover
}

.place-save-summary strong,
.place-save-summary small {
    display: block
}

.place-save-summary small {
    margin-top: 3px;
    color: #68778b;
    font-size: .73rem
}

.place-bucket-search {
    box-sizing: border-box;
    width: 100%;
    margin-top: 14px;
    padding: 11px;
    border: 1px solid #eae4df;
    border-radius: 9px;
    font: inherit;
    outline: 0
}

.place-bucket-tabs {
    display: flex;
    gap: 7px;
    margin: 12px 0
}

.place-bucket-tabs button {
    padding: 7px 10px;
    border: 1px solid #eae4df;
    border-radius: 99px;
    background: #fff;
    color: #536174;
    font: 800 .72rem Manrope;
    cursor: pointer
}

.place-bucket-tabs .is-active {
    border-color: #f43f68;
    background: #fff0f3;
    color: #f43f68
}

.place-bucket-options {
    max-height: 220px;
    overflow: auto;
    border-top: 1px solid #f0ece9;
    border-bottom: 1px solid #f0ece9
}

.place-bucket-row {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 12px 3px;
    border-bottom: 1px solid #f5f1ef;
    cursor: pointer
}

.place-bucket-row:last-child {
    border-bottom: 0
}

.place-bucket-row input {
    accent-color: #f43f68
}

.place-bucket-row strong,
.place-bucket-row small {
    display: block
}

.place-bucket-row small {
    margin-top: 2px;
    color: #68778b;
    font-size: .72rem
}

.place-no-buckets {
    color: #8a94a3;
    font-size: .8rem
}

.place-create-form {
    display: grid;
    gap: 13px
}

.place-create-form label {
    display: grid;
    gap: 6px;
    color: #435267;
    font-size: .78rem;
    font-weight: 800
}

.place-create-form input,
.place-create-form select {
    padding: 11px;
    border: 1px solid #eae4df;
    border-radius: 9px;
    font: inherit
}

.place-lightbox {
    position: fixed;
    z-index: 100;
    inset: 0;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) 54px;
    place-items: center;
    gap: 12px;
    padding: 35px;
    background: rgba(7, 27, 51, .9)
}

.place-lightbox img {
    max-width: 100%;
    max-height: 82vh;
    border-radius: 10px
}

.place-lightbox button {
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #071b33;
    font-size: 1.7rem;
    cursor: pointer
}

.place-lightbox #lightboxClose {
    position: fixed;
    top: 20px;
    right: 20px
}

.place-lightbox span {
    position: fixed;
    bottom: 20px;
    color: #fff;
    font-size: .8rem
}

.place-not-found {
    max-width: 550px;
    margin: 90px auto;
    text-align: center
}

.place-not-found p {
    margin: 8px 0 20px;
    color: #536174
}

.place-not-found a {
    margin: 4px
}

@media(max-width:850px) {
    .place-detail-shell {
        padding: 22px 16px 48px
    }

    .place-detail-grid {
        grid-template-columns: 1fr
    }

    .place-detail-side {
        grid-template-columns: repeat(2, 1fr)
    }

    .place-save-card {
        position: static
    }

    .place-provider-card {
        grid-column: 1/-1
    }
}

@media(max-width:600px) {
    .place-gallery {
        height: 270px
    }

    .place-heading {
        flex-direction: column
    }

    .place-detail-side {
        grid-template-columns: 1fr
    }

    .place-provider-card {
        grid-column: auto
    }

    .place-details-list dl,
    .nearby-place-grid {
        grid-template-columns: 1fr
    }

    .nearby-place-grid {
        grid-template-columns: repeat(3, 1fr)
    }

    .place-inline-actions>* {
        flex: 1
    }

    .place-lightbox {
        grid-template-columns: 38px minmax(0, 1fr) 38px;
        padding: 20px 8px
    }
}

/* Global search */
.search-results-page {
    background: #fff6f5
}

.search-shell {
    max-width: 1160px;
    margin: 0 auto;
    padding: 28px 28px 66px;
    color: #071b33
}

.global-search {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0 24px;
    padding: 7px 8px 7px 14px;
    border: 1px solid #eae4df;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(62, 32, 40, .04)
}

.global-search>span {
    color: #8a94a3;
    font-size: 1.15rem
}

.global-search input {
    min-width: 0;
    flex: 1;
    border: 0;
    outline: 0;
    color: #071b33;
    font: 600 1rem Manrope
}

.search-clear {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: #f5f0ef;
    color: #536174;
    font-size: 1.15rem;
    cursor: pointer
}

.search-filter {
    min-height: 36px;
    padding: 0 11px;
    border: 1px solid #eadcdf;
    border-radius: 9px;
    background: #fff5f7;
    color: #d9345b;
    font: 800 .75rem Manrope;
    cursor: pointer
}

.search-shell>h1 {
    margin: 0;
    font-size: 2rem;
    letter-spacing: -.05em
}

.search-intro {
    margin: 6px 0 18px;
    color: #536174
}

.search-tabs {
    display: flex;
    gap: 7px;
    overflow: auto;
    margin-bottom: 20px;
    border-bottom: 1px solid #eae4df
}

.search-tabs button {
    position: relative;
    flex: 0 0 auto;
    padding: 11px 9px;
    border: 0;
    background: none;
    color: #68778b;
    font: 800 .8rem Manrope;
    cursor: pointer
}

.search-tabs button.is-active {
    color: #f43f68
}

.search-tabs button.is-active:after {
    position: absolute;
    right: 5px;
    bottom: -1px;
    left: 5px;
    height: 2px;
    background: #f43f68;
    content: ""
}

.search-tabs small {
    display: inline-grid;
    place-items: center;
    min-width: 19px;
    height: 19px;
    border-radius: 50%;
    background: #f5eef0;
    font-size: .64rem
}

.search-count {
    margin: 0 0 13px;
    color: #68778b;
    font-size: .8rem
}

.search-section {
    margin: 28px 0
}

.search-section>div:first-child {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 11px
}

.search-section h2 {
    margin: 0;
    font-size: 1.15rem
}

.search-section>div:first-child button {
    border: 0;
    background: transparent;
    color: #d9345b;
    font: 800 .76rem Manrope;
    cursor: pointer
}

.search-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px
}

.search-grid article {
    position: relative;
    overflow: hidden;
    border: 1px solid #eae4df;
    border-radius: 15px;
    background: #fff;
    transition: transform .18s, box-shadow .18s
}

.search-grid article:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(62, 32, 40, .08)
}

.search-place-card>a>span,
.search-bucket-card>a>span {
    display: block;
    height: 130px;
    background: center/cover
}

.search-place-card h3,
.search-bucket-card h3,
.search-person-card h3 {
    margin: 12px 12px 4px;
    font-size: .95rem
}

.search-place-card p,
.search-bucket-card p,
.search-person-card p {
    margin: 0 12px;
    color: #536174;
    font-size: .75rem
}

.search-place-card small,
.search-bucket-card small {
    display: block;
    margin: 7px 12px 13px;
    color: #9a6810;
    font-size: .72rem
}

.search-grid a {
    color: #071b33;
    text-decoration: none
}

.search-card-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 33px;
    margin: 0 12px 12px;
    padding: 0 9px;
    border: 1px solid #f43f68;
    border-radius: 8px;
    background: #fff;
    color: #d9345b;
    font: 800 .7rem Manrope;
    text-decoration: none;
    cursor: pointer
}

.search-card-action.saved {
    border-color: #bde8d8;
    color: #168e75
}

.search-pin-card a {
    display: flex;
    gap: 11px;
    padding: 11px
}

.search-pin-card a>span {
    width: 78px;
    height: 78px;
    flex: 0 0 auto;
    border-radius: 10px;
    background: center/cover
}

.search-pin-card h3 {
    margin: 3px 0 4px;
    font-size: .9rem
}

.search-pin-card p,
.search-pin-card small {
    display: block;
    margin: 0;
    color: #68778b;
    font-size: .72rem
}

.search-pin-card b {
    display: block;
    margin: 7px 0;
    color: #d9345b;
    font-size: .7rem
}

.search-pin-card b.visited {
    color: #168e75
}

.search-bucket-card>a>div {
    padding-bottom: 1px
}

.search-person-card {
    padding: 16px
}

.search-person-card>a>span {
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    border-radius: 50%;
    background: #eee9fd;
    color: #7047d7;
    font-size: .75rem;
    font-weight: 800
}

.search-person-card h3 {
    margin: 11px 0 2px
}

.search-person-card p,
.search-person-card small,
.search-person-card em {
    display: block;
    margin: 0;
    color: #68778b;
    font-size: .73rem;
    font-style: normal
}

.search-person-card small {
    margin-top: 9px;
    line-height: 1.4
}

.search-person-card em {
    margin: 10px 0
}

.search-result-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    color: #68778b;
    font-size: .8rem
}

.search-result-top select {
    padding: 8px;
    border: 1px solid #eae4df;
    border-radius: 8px;
    background: #fff;
    font: inherit
}

.search-empty-start,
.search-no-results {
    padding: 40px 24px;
    border: 1px solid #eae4df;
    border-radius: 16px;
    background: #fff;
    text-align: center
}

.search-empty-start h2 {
    margin: 0 0 11px;
    font-size: 1.05rem
}

.search-empty-start>div {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 15px
}

.search-empty-start>div button {
    padding: 8px 10px;
    border: 1px solid #eae4df;
    border-radius: 99px;
    background: #fff;
    color: #536174;
    font: 700 .75rem Manrope;
    cursor: pointer
}

.search-empty-start p,
.search-no-results p {
    margin: 0 0 18px;
    color: #68778b
}

.search-no-results h2 {
    margin: 0 0 8px
}

.search-drawer-backdrop {
    position: fixed;
    z-index: 40;
    inset: 0;
    background: rgba(7, 27, 51, .22)
}

.search-filter-drawer {
    position: absolute;
    top: 0;
    right: 0;
    width: min(100%, 370px);
    min-height: 100%;
    padding: 26px;
    background: #fff;
    box-shadow: -12px 0 34px rgba(7, 27, 51, .15)
}

.search-filter-drawer>button {
    float: right;
    border: 0;
    background: transparent;
    font-size: 1.5rem;
    cursor: pointer
}

.search-filter-drawer h2 {
    margin: 0 0 25px
}

.search-filter-drawer label {
    display: grid;
    gap: 7px;
    margin: 16px 0;
    color: #435267;
    font-size: .78rem;
    font-weight: 800
}

.search-filter-drawer select {
    padding: 11px;
    border: 1px solid #eae4df;
    border-radius: 9px;
    background: #fff;
    font: inherit
}

.search-filter-drawer>div:last-child {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 26px
}

@media(max-width:760px) {
    .search-shell {
        padding: 22px 16px 48px
    }

    .search-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media(max-width:480px) {
    .global-search {
        flex-wrap: wrap
    }

    .global-search input {
        min-width: 200px
    }

    .search-filter {
        margin-left: auto
    }

    .search-grid {
        grid-template-columns: 1fr
    }

    .search-place-card>a>span,
    .search-bucket-card>a>span {
        height: 155px
    }
}

/* Public Bucket details */
.public-bucket-page {
    background: #fff6f5
}

.public-bucket-shell {
    max-width: 1160px;
    margin: 0 auto;
    padding: 28px 28px 64px;
    color: #071b33
}

.public-hero {
    height: 290px;
    margin-top: 15px;
    border-radius: 20px;
    background: center/cover no-repeat
}

.public-hero span {
    display: inline-block;
    margin: 17px;
    padding: 7px 10px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .93);
    color: #d9345b;
    font-size: .72rem;
    font-weight: 800
}

.public-heading {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 21px 0
}

.public-category {
    margin: 0;
    color: #7047d7;
    font-size: .78rem;
    font-weight: 800
}

.public-heading h1 {
    margin: 7px 0;
    font-size: clamp(2rem, 4vw, 3rem);
    letter-spacing: -.06em
}

.public-heading>div>p:not(.public-category) {
    max-width: 680px;
    margin: 0;
    color: #536174;
    line-height: 1.55
}

.public-meta {
    display: flex;
    gap: 13px;
    flex-wrap: wrap;
    margin-top: 13px;
    color: #68778b;
    font-size: .76rem;
    font-weight: 800
}

.public-actions {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: wrap
}

.public-creator {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    padding: 16px;
    border: 1px solid #eae4df;
    border-radius: 15px;
    background: #fff
}

.public-creator>a {
    display: flex;
    gap: 11px;
    align-items: center;
    color: #071b33;
    text-decoration: none
}

.public-creator>a>span {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #eee9fd;
    color: #7047d7;
    font-size: .75rem;
    font-weight: 800
}

.public-creator small,
.public-creator strong,
.public-creator em,
.public-creator p {
    display: block
}

.public-creator small,
.public-creator em {
    color: #8a94a3;
    font-size: .7rem;
    font-style: normal
}

.public-creator strong {
    margin: 2px 0;
    font-size: .88rem
}

.public-creator p {
    margin: 4px 0 0;
    color: #536174;
    font-size: .73rem
}

.public-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 14px 0
}

.public-stats div {
    padding: 14px;
    border: 1px solid #eae4df;
    border-radius: 12px;
    background: #fff
}

.public-stats strong,
.public-stats span {
    display: block
}

.public-stats strong {
    font-size: 1.2rem
}

.public-stats span {
    margin-top: 3px;
    color: #68778b;
    font-size: .72rem
}

.public-tabs {
    display: flex;
    gap: 18px;
    border-bottom: 1px solid #eae4df
}

.public-tabs button {
    position: relative;
    padding: 11px 4px;
    border: 0;
    background: transparent;
    color: #68778b;
    font: 800 .82rem Manrope;
    cursor: pointer
}

.public-tabs .is-active {
    color: #f43f68
}

.public-tabs .is-active:after {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    background: #f43f68;
    content: ""
}

.public-pins,
.public-about,
.public-map {
    margin-top: 18px;
    padding: 18px;
    border: 1px solid #eae4df;
    border-radius: 16px;
    background: #fff
}

.public-pin-tools {
    display: flex;
    gap: 10px;
    margin-bottom: 15px
}

.public-pin-tools input,
.public-pin-tools select,
.public-report-label select,
.public-bucket-shell textarea {
    padding: 10px;
    border: 1px solid #eae4df;
    border-radius: 9px;
    background: #fff;
    font: inherit;
    outline: 0
}

.public-pin-tools input {
    flex: 1
}

.public-pin-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 13px
}

.public-pin-grid article {
    overflow: hidden;
    border: 1px solid #eee8e5;
    border-radius: 13px
}

.public-pin-grid a:first-child {
    display: block;
    color: #071b33;
    text-decoration: none
}

.public-pin-grid a:first-child>span {
    display: block;
    height: 130px;
    background: center/cover
}

.public-pin-grid h2 {
    margin: 10px 10px 3px;
    font-size: .9rem
}

.public-pin-grid p,
.public-pin-grid small {
    display: block;
    margin: 0 10px;
    color: #536174;
    font-size: .72rem
}

.public-pin-grid small {
    margin: 7px 10px 11px;
    color: #9a6810
}

.public-map>div {
    display: grid;
    place-items: center;
    height: 500px;
    border-radius: 13px;
    background: linear-gradient(135deg, #d9f0ee, #f9e2e9);
    color: #f43f68;
    font-size: 2.7rem
}

.public-map strong {
    display: block;
    margin-top: 8px;
    color: #536174;
    font-size: .85rem
}

.public-map>a {
    margin-top: 13px
}

.public-about h2 {
    margin: 0 0 10px
}

.public-about>p {
    max-width: 700px;
    margin: 0;
    color: #536174;
    line-height: 1.55
}

.public-about dl {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 22px
}

.public-about dt {
    color: #8a94a3;
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase
}

.public-about dd {
    margin: 4px 0 0;
    color: #435267;
    font-size: .84rem
}

.public-save-options {
    max-height: 230px;
    overflow: auto;
    border-top: 1px solid #f0ece9;
    border-bottom: 1px solid #f0ece9
}

.public-save-options label {
    display: flex;
    gap: 9px;
    align-items: center;
    padding: 12px 2px;
    border-bottom: 1px solid #f5f1ef
}

.public-save-options label:last-child {
    border-bottom: 0
}

.public-save-options input {
    accent-color: #f43f68
}

.public-save-options strong,
.public-save-options small {
    display: block
}

.public-save-options small {
    margin-top: 2px;
    color: #68778b;
    font-size: .72rem
}

.public-report-label {
    display: grid;
    gap: 6px;
    margin-bottom: 12px;
    color: #435267;
    font-size: .78rem;
    font-weight: 800
}

.public-bucket-shell textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 90px;
    margin-bottom: 15px;
    resize: vertical
}

.public-empty {
    max-width: 550px;
    margin: 90px auto;
    text-align: center
}

.public-empty p {
    color: #536174
}

@media(max-width:750px) {
    .public-bucket-shell {
        padding: 22px 16px 48px
    }

    .public-heading {
        flex-direction: column
    }

    .public-pin-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(max-width:480px) {
    .public-hero {
        height: 210px
    }

    .public-creator {
        align-items: flex-start;
        flex-direction: column
    }

    .public-stats {
        grid-template-columns: 1fr
    }

    .public-pin-tools {
        flex-direction: column
    }

    .public-pin-grid {
        grid-template-columns: 1fr
    }

    .public-about dl {
        grid-template-columns: 1fr
    }
}

/* Public profile */
.public-profile-page {
    background: #fff6f5
}

.public-profile-shell {
    max-width: 1120px;
    margin: 0 auto;
    padding: 28px 28px 64px;
    color: #071b33
}

.profile-public-head {
    display: grid;
    grid-template-columns: 94px 1fr auto;
    gap: 19px;
    align-items: center;
    margin-top: 17px;
    padding: 26px;
    border: 1px solid #eae4df;
    border-radius: 18px;
    background: #fff
}

.profile-public-avatar {
    display: grid;
    place-items: center;
    width: 86px;
    height: 86px;
    border-radius: 50%;
    background: #eee9fd;
    color: #7047d7;
    font-size: 1.3rem;
    font-weight: 800
}

.profile-public-head h1 {
    margin: 0;
    font-size: 2rem;
    letter-spacing: -.05em
}

.profile-public-head p {
    margin: 4px 0;
    color: #68778b
}

.profile-public-head p:nth-of-type(2) {
    color: #536174
}

.profile-public-head small {
    color: #8a94a3;
    font-size: .73rem
}

.profile-public-actions {
    display: flex;
    align-self: start;
    gap: 8px;
    flex-wrap: wrap
}

.profile-public-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin: 14px 0
}

.profile-public-stats div {
    padding: 14px;
    border: 1px solid #eae4df;
    border-radius: 12px;
    background: #fff
}

.profile-public-stats strong,
.profile-public-stats span {
    display: block
}

.profile-public-stats strong {
    font-size: 1.2rem
}

.profile-public-stats span {
    margin-top: 3px;
    color: #68778b;
    font-size: .72rem
}

.profile-public-tabs {
    display: flex;
    gap: 18px;
    border-bottom: 1px solid #eae4df
}

.profile-public-tabs button {
    position: relative;
    padding: 11px 4px;
    border: 0;
    background: none;
    color: #68778b;
    font: 800 .8rem Manrope;
    cursor: pointer
}

.profile-public-tabs .is-active {
    color: #f43f68
}

.profile-public-tabs .is-active:after {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    background: #f43f68;
    content: ""
}

.profile-buckets,
.profile-activity,
.profile-about {
    margin-top: 19px;
    padding: 20px;
    border: 1px solid #eae4df;
    border-radius: 16px;
    background: #fff
}

.profile-buckets h2,
.profile-activity h2,
.profile-about h2 {
    margin: 0 0 7px;
    font-size: 1.15rem
}

.profile-buckets>div:first-child>p,
.profile-about>p {
    margin: 0 0 17px;
    color: #536174
}

.profile-bucket-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 13px
}

.profile-bucket-grid article {
    overflow: hidden;
    border: 1px solid #eee8e5;
    border-radius: 13px
}

.profile-bucket-grid a {
    display: block;
    color: #071b33;
    text-decoration: none
}

.profile-bucket-grid a>span {
    display: block;
    height: 130px;
    background: center/cover
}

.profile-bucket-grid h3 {
    margin: 11px 11px 4px;
    font-size: .92rem
}

.profile-bucket-grid p,
.profile-bucket-grid small {
    display: block;
    margin: 0 11px;
    color: #536174;
    font-size: .72rem
}

.profile-bucket-grid small {
    margin: 8px 11px 12px;
    color: #8a94a3
}

.profile-activity article {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 13px 0;
    border-bottom: 1px solid #f0ece9
}

.profile-activity article:last-of-type {
    border-bottom: 0
}

.profile-activity article>span {
    display: grid;
    place-items: center;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #fce6ed;
    color: #d9345b;
    font-size: .65rem;
    font-weight: 800
}

.profile-activity p {
    margin: 0;
    color: #536174;
    font-size: .82rem
}

.profile-activity a {
    color: #7047d7;
    font-weight: 800
}

.profile-activity small {
    display: block;
    margin-top: 4px;
    color: #8a94a3;
    font-size: .7rem
}

.profile-activity>button {
    margin-top: 15px
}

.profile-about dl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin: 19px 0 0
}

.profile-about dt {
    color: #8a94a3;
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase
}

.profile-about dd {
    margin: 5px 0 0;
    color: #435267;
    font-size: .84rem
}

.profile-about dd span {
    display: inline-block;
    margin: 0 5px 5px 0;
    padding: 5px 8px;
    border-radius: 99px;
    background: #e5f7f6;
    color: #168e95;
    font-size: .72rem;
    font-weight: 800
}

.public-preview-banner {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 16px;
    padding: 11px 13px;
    border: 1px solid #efd8df;
    border-radius: 12px;
    background: #fff8fa;
    color: #6d5260;
    font-size: .75rem
}

.public-preview-banner span {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fce2e9;
    color: #d9345b
}

.public-preview-banner p {
    flex: 1;
    margin: 0
}

.public-preview-banner a {
    color: #d9345b;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap
}

.profile-public-avatar.has-image {
    overflow: hidden
}

.profile-public-avatar.has-image>span {
    display: block;
    width: 100%;
    height: 100%;
    background: center/cover no-repeat
}

@media(max-width:760px) {
    .public-profile-shell {
        padding: 22px 16px 48px
    }

    .profile-public-head {
        grid-template-columns: 70px 1fr
    }

    .profile-public-avatar {
        width: 66px;
        height: 66px
    }

    .profile-public-actions {
        grid-column: 1/-1
    }

    .profile-public-stats {
        grid-template-columns: repeat(2, 1fr)
    }

    .profile-bucket-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(max-width:480px) {
    .profile-public-head {
        grid-template-columns: 1fr
    }

    .profile-public-actions {
        grid-column: auto
    }

    .profile-public-stats,
    .profile-bucket-grid,
    .profile-about dl {
        grid-template-columns: 1fr
    }
}

/* My profile */
.my-profile-page,
.edit-profile-page {
    background: #fff6f5
}

.my-profile-page .app-shell,
.edit-profile-page .app-shell {
    max-width: 1380px
}

.my-profile-page .avatar-button.is-active {
    box-shadow: 0 0 0 3px rgba(244, 63, 104, .14)
}

.profile-popover {
    right: 0
}

.profile-popover .menu-item {
    display: block
}

.profile-popover small {
    display: block;
    margin-top: 3px;
    color: var(--text-muted);
    font-size: .68rem
}

.my-profile-page #myProfileRoot {
    max-width: 1240px;
    margin: 0 auto;
    padding: 6px 4px 55px;
    color: var(--text-primary)
}

.my-profile-head {
    display: grid;
    grid-template-columns: 114px minmax(0, 1fr) auto;
    gap: 23px;
    align-items: center;
    padding: 30px;
    border: 1px solid var(--border);
    border-radius: 21px;
    background: var(--surface);
    box-shadow: 0 10px 25px rgba(7, 27, 51, .035)
}

.my-profile-avatar,
.edit-profile-avatar {
    display: grid;
    place-items: center;
    width: 104px;
    height: 104px;
    overflow: hidden;
    border-radius: 50%;
    background: linear-gradient(135deg, #fce0e8, #e3f4f4);
    color: var(--brand-primary);
    font-size: 1.48rem;
    font-weight: 800
}

.profile-image-avatar {
    display: block;
    width: 100%;
    height: 100%;
    background: center/cover no-repeat
}

.my-profile-intro h1 {
    margin: 0;
    font-size: 2.15rem;
    letter-spacing: -.065em
}

.my-profile-intro p {
    max-width: 650px;
    margin: 8px 0;
    color: var(--text-secondary);
    font-size: .9rem;
    line-height: 1.55
}

.my-profile-intro .profile-handle {
    margin: 3px 0;
    color: var(--accent-purple);
    font-weight: 700
}

.my-profile-intro small {
    color: var(--text-muted);
    font-size: .75rem
}

.my-profile-intro small i {
    padding: 0 5px;
    font-style: normal
}

.my-profile-actions {
    display: flex;
    align-self: start;
    gap: 9px;
    align-items: center;
    flex-wrap: wrap
}

.my-profile-actions .primary-btn,
.my-profile-actions .secondary-btn {
    width: auto;
    min-height: 40px;
    padding: 0 13px;
    text-decoration: none
}

.profile-settings-button {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--surface);
    color: var(--text-secondary);
    font-size: 1.05rem;
    text-decoration: none
}

.my-profile-stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin: 14px 0
}

.my-profile-stats>* {
    display: block;
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    color: var(--text-primary);
    text-align: left;
    text-decoration: none
}

.my-profile-stats button {
    font: inherit;
    cursor: pointer
}

.my-profile-stats strong,
.my-profile-stats span {
    display: block
}

.my-profile-stats strong {
    font-size: 1.26rem;
    letter-spacing: -.04em
}

.my-profile-stats span {
    margin-top: 3px;
    color: var(--text-secondary);
    font-size: .73rem;
    font-weight: 700
}

.my-profile-tabs {
    display: flex;
    gap: 18px;
    overflow: auto;
    margin-top: 22px;
    border-bottom: 1px solid var(--border)
}

.my-profile-tabs button {
    position: relative;
    flex: 0 0 auto;
    padding: 12px 5px;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    font: 700 .82rem Manrope;
    cursor: pointer
}

.my-profile-tabs .is-active {
    color: var(--brand-primary)
}

.my-profile-tabs .is-active:after {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--brand-primary);
    content: ""
}

.profile-section {
    margin-top: 19px;
    padding: 21px;
    border: 1px solid var(--border);
    border-radius: 17px;
    background: var(--surface)
}

.profile-section>header {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    align-items: flex-start;
    margin-bottom: 16px
}

.profile-section h2 {
    margin: 0;
    font-size: 1.18rem;
    letter-spacing: -.04em
}

.profile-section header p {
    margin: 4px 0 0;
    color: var(--text-secondary);
    font-size: .8rem
}

.profile-section header>a,
.profile-link-button {
    border: 0;
    background: transparent;
    color: var(--brand-primary);
    font: 700 .76rem Manrope;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer
}

.profile-bucket-grid-local,
.profile-visit-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px
}

.profile-bucket-card,
.profile-visit-card {
    overflow: hidden;
    border: 1px solid #eee8e5;
    border-radius: 14px;
    background: #fff;
    color: var(--text-primary);
    text-decoration: none;
    transition: transform .18s, box-shadow .18s
}

.profile-bucket-card:hover,
.profile-visit-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 11px 22px rgba(7, 27, 51, .08)
}

.profile-bucket-cover,
.profile-visit-cover {
    display: block;
    height: 135px;
    background: center/cover
}

.profile-bucket-card-body,
.profile-visit-card-body {
    display: block;
    padding: 12px
}

.profile-bucket-card strong,
.profile-visit-card strong {
    display: block;
    font-size: .91rem
}

.profile-bucket-card small,
.profile-visit-card small {
    display: block;
    margin-top: 4px;
    color: var(--text-secondary);
    font-size: .71rem
}

.profile-card-label {
    display: inline-block;
    margin-bottom: 7px;
    padding: 4px 7px;
    border-radius: 99px;
    background: #fff0f3;
    color: #d9345b;
    font-size: .64rem;
    font-weight: 800
}

.profile-bucket-card em {
    display: block;
    margin-top: 9px;
    color: var(--text-secondary);
    font-size: .67rem;
    font-style: normal;
    font-weight: 700
}

.profile-bucket-card em i {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    margin-right: -4px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #e5f7f6;
    color: #168e95;
    font-size: .47rem;
    font-style: normal
}

.profile-bucket-card em i:nth-child(2) {
    background: #eee9fd;
    color: #7047d7
}

.profile-bucket-card em i:nth-child(3) {
    background: #fce6ed;
    color: #d9345b
}

.profile-visit-card-body b {
    display: block;
    margin: 8px 0 4px;
    color: var(--accent-teal);
    font-size: .68rem
}

.profile-visit-card-body em {
    display: block;
    color: #f5b51b;
    font-size: .78rem;
    font-style: normal;
    letter-spacing: 1px
}

.profile-visit-card-body u {
    color: var(--accent-purple);
    font-weight: 700;
    text-decoration: none
}

.profile-support-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
    gap: 16px;
    margin-top: 19px
}

.profile-support-grid .profile-section {
    margin-top: 0
}

.my-profile-activity>a {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    padding: 12px 0;
    border-top: 1px solid #f1ece9;
    color: var(--text-primary);
    text-decoration: none
}

.my-profile-activity>a:first-child {
    border-top: 0;
    padding-top: 0
}

.activity-symbol {
    display: grid;
    place-items: center;
    width: 31px;
    height: 31px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #fce6ed;
    color: #d9345b;
    font-size: .75rem;
    font-weight: 800
}

.activity-symbol.visits {
    background: #e2f7ef;
    color: #168e75
}

.activity-symbol.groups {
    background: #eee9fd;
    color: #7047d7
}

.activity-symbol.social {
    background: #fff1d6;
    color: #a87813
}

.my-profile-activity p {
    flex: 1;
    margin: 1px 0;
    color: var(--text-secondary);
    font-size: .78rem;
    line-height: 1.45
}

.my-profile-activity b {
    color: var(--text-primary)
}

.my-profile-activity small {
    display: block;
    margin-top: 3px;
    color: var(--text-muted);
    font-size: .68rem
}

.activity-arrow {
    color: var(--text-muted);
    font-size: 1.25rem
}

.profile-plan-card {
    padding: 22px;
    border: 1px solid #f1dce2;
    border-radius: 17px;
    background: linear-gradient(145deg, #fff, #fff4f6)
}

.profile-plan-card>div {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.profile-plan-card>div span {
    padding: 5px 8px;
    border-radius: 99px;
    background: #fce4ea;
    color: #d9345b;
    font-size: .68rem;
    font-weight: 800
}

.profile-plan-card>div i {
    color: #168e75;
    font-size: .68rem;
    font-style: normal;
    font-weight: 800
}

.profile-plan-card h2 {
    margin: 17px 0 7px;
    font-size: 1.17rem;
    letter-spacing: -.04em
}

.profile-plan-card p {
    margin: 0 0 17px;
    color: var(--text-secondary);
    font-size: .78rem;
    line-height: 1.52
}

.profile-plan-card .secondary-btn {
    min-height: 39px;
    padding: 0 12px;
    text-decoration: none
}

.profile-subfilters {
    display: flex;
    gap: 7px;
    overflow: auto;
    margin-bottom: 17px
}

.profile-subfilters button {
    flex: 0 0 auto;
    padding: 8px 11px;
    border: 1px solid var(--border);
    border-radius: 99px;
    background: #fff;
    color: var(--text-secondary);
    font: 700 .72rem Manrope;
    cursor: pointer
}

.profile-subfilters .is-active {
    border-color: rgba(244, 63, 104, .25);
    background: #fff0f3;
    color: var(--brand-primary)
}

.profile-all-buckets .primary-btn {
    width: auto;
    min-height: 40px;
    padding: 0 12px;
    text-decoration: none
}

.profile-visit-tools {
    display: grid;
    grid-template-columns: minmax(190px, 1fr) repeat(3, auto);
    gap: 9px;
    margin-bottom: 17px
}

.profile-visit-tools label {
    display: flex;
    gap: 7px;
    align-items: center;
    padding: 0 11px;
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-muted)
}

.profile-visit-tools input {
    width: 100%;
    min-height: 39px;
    border: 0;
    outline: 0;
    font: inherit;
    font-size: .78rem
}

.profile-visit-tools select {
    min-height: 41px;
    padding: 0 9px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    color: var(--text-secondary);
    font: 700 .72rem Manrope
}

.profile-no-results {
    padding: 25px 0 6px;
    color: var(--text-secondary);
    text-align: center
}

.profile-history-link {
    display: block;
    margin-top: 19px;
    color: var(--brand-primary);
    font-size: .78rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none
}

.profile-breadcrumb {
    margin: 0 0 18px;
    color: var(--text-muted);
    font-size: .75rem;
    font-weight: 700
}

.profile-breadcrumb a {
    color: var(--brand-primary);
    text-decoration: none
}

.edit-profile-shell {
    max-width: 920px;
    margin: 0 auto;
    padding: 12px 0 60px;
    color: var(--text-primary)
}

.edit-profile-shell>header {
    margin-bottom: 23px
}

.edit-profile-shell>header h1 {
    margin: 0;
    font-size: 2.1rem;
    letter-spacing: -.06em
}

.edit-profile-shell>header p {
    margin: 6px 0 0;
    color: var(--text-secondary)
}

.edit-profile-form {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 19px;
    background: #fff;
    box-shadow: 0 10px 25px rgba(7, 27, 51, .035)
}

.edit-profile-form>section {
    padding: 26px 28px;
    border-top: 1px solid #f0ece9
}

.edit-profile-form>section:first-child {
    border-top: 0
}

.edit-profile-form h2 {
    margin: 0 0 6px;
    font-size: 1.08rem
}

.edit-profile-form>section>p {
    margin: 0 0 18px;
    color: var(--text-secondary);
    font-size: .79rem
}

.edit-avatar-row {
    display: flex;
    gap: 18px;
    align-items: center
}

.edit-avatar-row .edit-profile-avatar {
    width: 78px;
    height: 78px;
    font-size: 1.08rem
}

.upload-photo-button {
    position: relative;
    display: inline-flex;
    min-height: 38px;
    padding: 0 11px;
    cursor: pointer
}

.upload-photo-button input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer
}

.text-danger-button {
    margin-left: 10px;
    border: 0;
    background: transparent;
    color: var(--error);
    font: 700 .75rem Manrope;
    cursor: pointer
}

.edit-avatar-row small {
    display: block;
    margin-top: 8px;
    color: var(--text-muted);
    font-size: .68rem
}

.edit-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 17px
}

.edit-fields label {
    display: grid;
    gap: 7px;
    color: var(--text-primary);
    font-size: .78rem;
    font-weight: 700
}

.edit-fields input,
.edit-fields textarea {
    box-sizing: border-box;
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    color: var(--text-primary);
    font: 400 .84rem Manrope;
    outline: 0
}

.edit-fields input:focus,
.edit-fields textarea:focus {
    border-color: #f99ab0;
    box-shadow: 0 0 0 3px rgba(244, 63, 104, .1)
}

.edit-fields textarea {
    min-height: 96px;
    resize: vertical
}

.edit-fields label small {
    color: var(--text-muted);
    font-size: .68rem;
    font-weight: 500
}

.edit-fields .wide-field {
    grid-column: 1/-1
}

.edit-fields .available {
    color: var(--success) !important
}

.edit-fields .invalid {
    color: var(--error) !important
}

.category-chip-select {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.category-chip-select button {
    padding: 8px 11px;
    border: 1px solid var(--border);
    border-radius: 99px;
    background: #fff;
    color: var(--text-secondary);
    font: 700 .73rem Manrope;
    cursor: pointer
}

.category-chip-select .is-selected {
    border-color: rgba(20, 174, 181, .28);
    background: #e7f7f6;
    color: #168e95
}

.discoverability-row {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center
}

.discoverability-row strong {
    font-size: .82rem
}

.discoverability-row p {
    max-width: 610px;
    margin: 5px 0 0;
    color: var(--text-secondary);
    font-size: .75rem;
    line-height: 1.45
}

.switch {
    position: relative;
    width: 44px;
    height: 25px;
    flex: 0 0 auto
}

.switch input {
    width: 0;
    height: 0;
    opacity: 0
}

.switch span {
    position: absolute;
    inset: 0;
    border-radius: 99px;
    background: #cbd1d7;
    cursor: pointer;
    transition: .2s
}

.switch span:after {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
    content: "";
    transition: .2s
}

.switch input:checked+span {
    background: var(--accent-teal)
}

.switch input:checked+span:after {
    transform: translateX(19px)
}

.visibility-warning {
    margin-top: 18px;
    padding: 13px;
    border: 1px solid #f7dfb7;
    border-radius: 11px;
    background: #fff9ef
}

.visibility-warning strong {
    color: #9c6814;
    font-size: .76rem
}

.visibility-warning p {
    margin: 4px 0 0;
    color: var(--text-secondary);
    font-size: .73rem
}

.edit-profile-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    padding: 20px 28px;
    border-top: 1px solid #f0ece9;
    background: #fffafa
}

.edit-profile-actions .secondary-btn,
.edit-profile-actions .primary-btn {
    width: auto;
    min-height: 41px;
    padding: 0 14px
}

.js-avatar-link {
    font-size: .72rem
}

.js-avatar-link>span {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%
}

@media(max-width:820px) {
    .my-profile-head {
        grid-template-columns: 90px 1fr
    }

    .my-profile-avatar {
        width: 84px;
        height: 84px
    }

    .my-profile-actions {
        grid-column: 1/-1;
        justify-content: flex-start
    }

    .profile-support-grid {
        grid-template-columns: 1fr
    }

    .profile-bucket-grid-local,
    .profile-visit-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .edit-profile-shell {
        padding-right: 4px;
        padding-left: 4px
    }
}

@media(max-width:600px) {
    .my-profile-page #myProfileRoot {
        padding: 0 0 42px
    }

    .my-profile-head {
        grid-template-columns: 1fr;
        padding: 21px
    }

    .my-profile-stats {
        grid-template-columns: repeat(2, 1fr)
    }

    .my-profile-stats>*:last-child {
        grid-column: span 2
    }

    .profile-section {
        padding: 16px
    }

    .profile-section>header {
        align-items: flex-start;
        flex-direction: column
    }

    .profile-bucket-grid-local,
    .profile-visit-grid {
        grid-template-columns: 1fr
    }

    .profile-visit-tools {
        grid-template-columns: 1fr 1fr
    }

    .profile-visit-tools label {
        grid-column: 1/-1
    }

    .profile-visit-tools select {
        min-width: 0
    }

    .edit-fields {
        grid-template-columns: 1fr
    }

    .edit-fields .wide-field {
        grid-column: auto
    }

    .edit-profile-form>section {
        padding: 21px
    }

    .edit-profile-actions {
        padding: 17px 21px
    }

    .discoverability-row {
        align-items: flex-start
    }

    .top-nav {
        gap: 8px
    }

    .main-nav {
        display: none
    }

    .nav-left {
        flex: 1
    }

    .nav-right {
        flex: 0
    }

    .nav-add-pin {
        min-width: auto;
        padding: 0 9px;
        font-size: .72rem
    }

    .nav-add-pin .btn-text {
        display: none
    }
}

/* Settings */
.settings-page {
    background: #fff6f5
}

.settings-shell {
    max-width: 1180px;
    margin: 0 auto;
    padding: 10px 4px 64px;
    color: #071b33
}

.settings-page-head {
    margin-bottom: 24px
}

.settings-page-head h1 {
    margin: 0;
    font-size: 2.2rem;
    letter-spacing: -.065em
}

.settings-page-head p {
    margin: 7px 0 0;
    color: #536174;
    font-size: .9rem
}

.settings-layout {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 19px;
    align-items: start
}

.settings-menu {
    position: sticky;
    top: 102px;
    display: grid;
    gap: 4px;
    padding: 10px;
    border: 1px solid #eae4df;
    border-radius: 16px;
    background: #fff
}

.settings-menu a,
.settings-menu button {
    display: block;
    width: 100%;
    padding: 10px 11px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #536174;
    font: 700 .77rem Manrope;
    text-align: left;
    text-decoration: none;
    cursor: pointer
}

.settings-menu a:hover,
.settings-menu a.is-active {
    background: #fff0f3;
    color: #f43f68
}

.settings-menu hr {
    width: 100%;
    height: 1px;
    margin: 5px 0;
    border: 0;
    background: #eee8e5
}

.settings-menu .danger {
    color: #d92d42
}

.settings-content {
    min-width: 0
}

.settings-content-head {
    margin: 3px 0 17px
}

.settings-content-head h1 {
    margin: 0;
    font-size: 1.55rem;
    letter-spacing: -.05em
}

.settings-content-head p {
    margin: 5px 0 0;
    color: #536174;
    font-size: .82rem
}

.settings-card,
.settings-danger {
    margin-bottom: 15px;
    padding: 22px;
    border: 1px solid #eae4df;
    border-radius: 16px;
    background: #fff
}

.settings-card h2,
.settings-danger h2 {
    margin: 0 0 15px;
    font-size: 1.04rem;
    letter-spacing: -.03em
}

.settings-note,
.settings-fine-print {
    margin: 0 0 17px;
    color: #68778b;
    font-size: .77rem;
    line-height: 1.5
}

.setting-detail,
.setting-row,
.session-row {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    padding: 15px 0;
    border-top: 1px solid #f1ece9
}

.settings-card>h2+.setting-detail,
.settings-card>h2+.setting-row,
.settings-card>p+.setting-row,
.settings-card>p+.settings-form {
    border-top: 0;
    padding-top: 0
}

.setting-detail span,
.setting-detail strong,
.setting-detail small,
.session-row strong,
.session-row p {
    display: block
}

.setting-detail span {
    margin-bottom: 4px;
    color: #8a94a3;
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em
}

.setting-detail strong,
.session-row strong {
    font-size: .83rem
}

.setting-detail strong em {
    margin-left: 6px;
    color: #168e75;
    font-size: .67rem;
    font-style: normal
}

.setting-detail small,
.session-row p {
    margin: 4px 0 0;
    color: #68778b;
    font-size: .72rem
}

.session-row p b {
    color: #168e75
}

.setting-detail>a:not(.secondary-btn),
.setting-detail>button,
.settings-text-button {
    border: 0;
    background: transparent;
    color: #d9345b;
    font: 700 .74rem Manrope;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap
}

.setting-detail .secondary-btn {
    width: auto;
    min-height: 37px;
    padding: 0 10px;
    text-decoration: none
}

.settings-enabled {
    padding: 5px 8px;
    border-radius: 99px;
    background: #e2f7ef;
    color: #168e75;
    font-size: .66rem;
    font-weight: 800;
    white-space: nowrap
}

.setting-row>div {
    max-width: 620px
}

.setting-row strong {
    display: block;
    font-size: .83rem
}

.setting-row p {
    margin: 4px 0 0;
    color: #68778b;
    font-size: .73rem;
    line-height: 1.45
}

.browser-permission {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-top: 14px;
    padding: 11px 12px;
    border-radius: 10px;
    background: #fff8fa;
    color: #68778b;
    font-size: .72rem
}

.browser-permission .secondary-btn {
    width: auto;
    min-height: 35px;
    padding: 0 10px;
    white-space: nowrap
}

.settings-info-card {
    margin: 0 0 15px;
    padding: 13px 15px;
    border: 1px solid #d3ecec;
    border-radius: 13px;
    background: #f3fbfb;
    color: #4a6971;
    font-size: .76rem;
    line-height: 1.5
}

.location-dependent {
    border-top: 1px solid #f1ece9
}

.location-dependent>label,
.settings-select-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
    color: #071b33;
    font-size: .8rem;
    font-weight: 700
}

.location-dependent select,
.settings-select-label select {
    min-height: 38px;
    padding: 0 9px;
    border: 1px solid #eae4df;
    border-radius: 9px;
    background: #fff;
    color: #536174;
    font: 700 .72rem Manrope
}

.quiet-times {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px;
    padding: 4px 0 14px
}

.quiet-times label {
    display: grid;
    gap: 6px;
    color: #536174;
    font-size: .72rem;
    font-weight: 700
}

.quiet-times input {
    min-height: 39px;
    padding: 0 9px;
    border: 1px solid #eae4df;
    border-radius: 9px;
    font: inherit
}

.subscription-card {
    background: linear-gradient(145deg, #fff, #fff4f6)
}

.subscription-label {
    display: inline-block;
    padding: 5px 8px;
    border-radius: 99px;
    background: #fce4ea;
    color: #d9345b;
    font-size: .66rem;
    font-weight: 800
}

.subscription-card h2 {
    margin: 14px 0 6px;
    font-size: 1.3rem
}

.subscription-card p {
    margin: 0 0 17px;
    color: #536174;
    font-size: .8rem
}

.subscription-card .primary-btn {
    width: auto;
    min-height: 40px;
    padding: 0 12px;
    text-decoration: none
}

.settings-danger {
    margin-top: 24px;
    border-color: #f2c9d0;
    background: #fffafb
}

.settings-danger p {
    max-width: 600px;
    margin: 0 0 15px;
    color: #68778b;
    font-size: .76rem;
    line-height: 1.5
}

.danger-btn {
    min-height: 40px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: #d92d42;
    color: #fff;
    font: 700 .75rem Manrope;
    cursor: pointer
}

.settings-form {
    display: grid;
    gap: 13px
}

.settings-form label {
    display: grid;
    gap: 6px;
    color: #435267;
    font-size: .75rem;
    font-weight: 700
}

.settings-form input {
    box-sizing: border-box;
    width: 100%;
    min-height: 42px;
    padding: 0 11px;
    border: 1px solid #eae4df;
    border-radius: 9px;
    background: #fff;
    color: #071b33;
    font: 400 .83rem Manrope;
    outline: 0
}

.settings-form input:focus {
    border-color: #f99ab0;
    box-shadow: 0 0 0 3px rgba(244, 63, 104, .1)
}

.settings-form .primary-btn {
    width: max-content;
    min-height: 41px;
    padding: 0 13px
}

.settings-inline-error {
    margin: 0;
    color: #d92d42;
    font-size: .73rem
}

.settings-delete-modal p {
    color: #536174;
    line-height: 1.5
}

.owner-block {
    margin: 18px 0;
    padding: 13px;
    border: 1px solid #f3d9b4;
    border-radius: 11px;
    background: #fff9ef
}

.owner-block strong {
    color: #956115;
    font-size: .78rem
}

.owner-block p {
    margin: 5px 0 9px;
    font-size: .74rem
}

.owner-block a {
    display: block;
    margin-top: 5px;
    color: #d9345b;
    font-size: .74rem;
    font-weight: 700;
    text-decoration: none
}

.settings-section-select {
    display: none;
    width: 100%;
    min-height: 42px;
    margin-bottom: 13px;
    padding: 0 10px;
    border: 1px solid #eae4df;
    border-radius: 10px;
    background: #fff;
    color: #435267;
    font: 700 .78rem Manrope
}

.js-settings-avatar {
    font-size: .72rem
}

.js-settings-avatar>span {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%
}

.settings-avatar-image {
    background: center/cover no-repeat
}

@media(max-width:780px) {
    .settings-shell {
        padding-right: 0;
        padding-left: 0
    }

    .settings-layout {
        grid-template-columns: 175px minmax(0, 1fr)
    }

    .settings-menu {
        padding: 7px
    }

    .settings-menu a,
    .settings-menu button {
        padding: 9px;
        font-size: .71rem
    }

    .settings-card {
        padding: 18px
    }
}

@media(max-width:600px) {
    .settings-layout {
        display: block
    }

    .settings-menu {
        display: none
    }

    .settings-section-select {
        display: block
    }

    .settings-page-head h1 {
        font-size: 1.9rem
    }

    .setting-detail,
    .setting-row,
    .session-row {
        align-items: flex-start
    }

    .setting-detail>a:not(.secondary-btn),
    .setting-detail>button,
    .settings-text-button {
        padding-top: 4px
    }

    .browser-permission {
        align-items: flex-start;
        flex-direction: column
    }

    .quiet-times {
        grid-template-columns: 1fr
    }

    .settings-card,
    .settings-danger {
        padding: 17px
    }
}

/* Premium subscription */
.premium-page {
    background: #fff6f5
}

.premium-shell {
    max-width: 1120px;
    margin: 0 auto;
    padding: 12px 4px 65px;
    color: #071b33
}

.premium-heading {
    display: flex;
    justify-content: center;
    text-align: center
}

.premium-heading>div {
    max-width: 650px
}

.premium-heading span,
.plan-chip,
.premium-active-chip {
    display: inline-block;
    padding: 5px 9px;
    border-radius: 99px;
    background: #fce4ea;
    color: #d9345b;
    font-size: .68rem;
    font-weight: 800
}

.premium-heading h1 {
    margin: 12px 0 7px;
    font-size: 2.35rem;
    letter-spacing: -.07em
}

.premium-heading p {
    margin: 0;
    color: #536174;
    font-size: .9rem;
    line-height: 1.55
}

.premium-intro {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    margin: 26px 0 17px;
    padding: 26px 28px;
    border: 1px solid #efdde3;
    border-radius: 18px;
    background: linear-gradient(145deg, #fff, #fff5f7)
}

.premium-intro>div:first-child {
    max-width: 530px
}

.premium-dot {
    display: grid;
    place-items: center;
    width: 35px;
    height: 35px;
    margin-bottom: 10px;
    border-radius: 50%;
    background: #fce2e9;
    color: #d9345b;
    font-weight: 800
}

.premium-intro h2 {
    margin: 0 0 6px;
    font-size: 1.38rem;
    letter-spacing: -.045em
}

.premium-intro p {
    margin: 0 0 16px;
    color: #536174;
    font-size: .8rem
}

.premium-intro .primary-btn {
    width: auto;
    min-height: 41px;
    padding: 0 13px
}

.premium-text-action {
    margin-left: 10px;
    border: 0;
    background: transparent;
    color: #d9345b;
    font: 700 .76rem Manrope;
    cursor: pointer
}

.billing-toggle {
    display: flex;
    overflow: hidden;
    flex: 0 0 auto;
    border: 1px solid #eae4df;
    border-radius: 11px;
    background: #fff
}

.billing-toggle button {
    min-height: 48px;
    padding: 0 13px;
    border: 0;
    border-left: 1px solid #eae4df;
    background: #fff;
    color: #536174;
    font: 700 .74rem Manrope;
    cursor: pointer
}

.billing-toggle button:first-child {
    border-left: 0
}

.billing-toggle button.is-active {
    background: #fff0f3;
    color: #d9345b
}

.billing-toggle small {
    display: block;
    font-size: .61rem
}

.premium-usage,
.premium-limit-note,
.premium-compare,
.premium-benefits,
.premium-status,
.premium-manage-card,
.premium-unlimited {
    margin-top: 17px;
    padding: 22px;
    border: 1px solid #eae4df;
    border-radius: 17px;
    background: #fff
}

.premium-usage header h2,
.premium-limit-note h2,
.premium-compare h2,
.premium-benefits h2,
.premium-manage-card h2 {
    margin: 0;
    font-size: 1.12rem;
    letter-spacing: -.04em
}

.premium-usage header p,
.premium-compare header p {
    margin: 4px 0 16px;
    color: #68778b;
    font-size: .76rem
}

.usage-row {
    display: grid;
    grid-template-columns: minmax(170px, 1fr) minmax(100px, .8fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px 0;
    border-top: 1px solid #f1ece9
}

.usage-row>div:first-child strong,
.usage-row>div:first-child span {
    display: block
}

.usage-row strong {
    font-size: .8rem
}

.usage-row span {
    margin-top: 3px;
    color: #68778b;
    font-size: .7rem
}

.usage-bar {
    height: 7px;
    overflow: hidden;
    border-radius: 99px;
    background: #eee8e5
}

.usage-bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #16aeb5
}

.usage-bar i.near-limit {
    background: #f4a62a
}

.usage-bar i.at-limit {
    background: #d9345b
}

.usage-row small {
    color: #a46b17;
    font-size: .67rem;
    font-weight: 700;
    white-space: nowrap
}

.usage-reset {
    margin: 13px 0 0;
    color: #8a94a3;
    font-size: .7rem
}

.premium-limit-note {
    border-color: #d7eeee;
    background: #f8fdfd
}

.premium-limit-note p {
    max-width: 800px;
    margin: 8px 0 0;
    color: #536174;
    font-size: .78rem;
    line-height: 1.55
}

.premium-compare header {
    margin-bottom: 16px
}

.premium-plan-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px
}

.premium-plan {
    padding: 19px;
    border: 1px solid #eee8e5;
    border-radius: 14px
}

.premium-plan.recommended {
    border-color: #f3c7d3;
    background: #fffafb
}

.premium-plan h3 {
    margin: 13px 0 5px;
    font-size: 1.15rem
}

.plan-price {
    display: block;
    font-size: 1.38rem;
    letter-spacing: -.04em
}

.plan-price small {
    color: #68778b;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: 0
}

.premium-plan ul {
    display: grid;
    gap: 9px;
    margin: 17px 0;
    padding: 0;
    list-style: none;
    color: #536174;
    font-size: .74rem
}

.premium-plan li {
    line-height: 1.35
}

.premium-plan .primary-btn {
    width: auto;
    min-height: 39px;
    padding: 0 12px
}

.premium-benefits>div {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 13px;
    margin-top: 15px
}

.premium-benefits article {
    padding: 15px;
    border: 1px solid #f0e9e6;
    border-radius: 13px;
    background: #fffafa
}

.premium-benefits article>span {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #e5f7f6;
    color: #168e95;
    font-size: .8rem;
    font-weight: 800
}

.premium-benefits h3 {
    margin: 11px 0 4px;
    font-size: .83rem
}

.premium-benefits p {
    margin: 0;
    color: #68778b;
    font-size: .72rem;
    line-height: 1.48
}

.premium-active-chip {
    background: #e2f7ef;
    color: #168e75
}

.premium-status {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px
}

.premium-status div {
    padding: 4px 0
}

.premium-status span,
.premium-status strong {
    display: block
}

.premium-status span {
    color: #8a94a3;
    font-size: .67rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .035em
}

.premium-status strong {
    margin-top: 5px;
    font-size: .84rem
}

.premium-status .active {
    color: #168e75
}

.premium-status .cancelled {
    color: #a46b17
}

.premium-status>p {
    grid-column: 1/-1;
    margin: 4px 0 0;
    padding-top: 12px;
    border-top: 1px solid #f1ece9;
    color: #68778b;
    font-size: .72rem
}

.premium-manage-card {
    background: linear-gradient(145deg, #fff, #fff5f7)
}

.premium-manage-card p {
    margin: 7px 0 16px;
    color: #536174;
    font-size: .78rem
}

.premium-manage-card .secondary-btn {
    width: auto;
    min-height: 40px;
    padding: 0 12px
}

.premium-cancel-button {
    margin-left: 12px;
    color: #d92d42
}

.premium-unlimited {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    border-color: #cce8dd;
    background: #f8fdfb
}

.premium-unlimited>span {
    display: grid;
    place-items: center;
    width: 29px;
    height: 29px;
    border-radius: 50%;
    background: #e2f7ef;
    color: #168e75;
    font-weight: 800
}

.premium-unlimited strong {
    font-size: .82rem
}

.premium-unlimited p {
    margin: 3px 0 0;
    color: #68778b;
    font-size: .73rem
}

.premium-modal .premium-dot {
    margin-right: auto;
    margin-left: auto
}

.premium-modal h2,
.premium-success h2 {
    text-align: center
}

.premium-modal>p,
.premium-success>p {
    text-align: center;
    color: #536174
}

.checkout-summary {
    display: grid;
    gap: 4px;
    margin: 17px 0;
    padding: 13px;
    border: 1px solid #eee8e5;
    border-radius: 11px;
    background: #fffafa
}

.checkout-summary span {
    color: #536174;
    font-size: .74rem
}

.checkout-summary strong {
    font-size: 1rem
}

.checkout-summary small {
    color: #8a94a3;
    font-size: .67rem
}

.cycle-options {
    display: grid;
    gap: 8px;
    margin: 15px 0
}

.cycle-options button {
    padding: 12px;
    border: 1px solid #eae4df;
    border-radius: 10px;
    background: #fff;
    color: #536174;
    font: 700 .78rem Manrope;
    text-align: left;
    cursor: pointer
}

.cycle-options .is-active {
    border-color: #f3b9c9;
    background: #fff0f3;
    color: #d9345b
}

.premium-until {
    padding: 11px;
    border-radius: 10px;
    background: #fff9ef;
    color: #8a5c15 !important;
    font-size: .76rem
}

.premium-success {
    text-align: center
}

.premium-success .premium-dot {
    margin: 0 auto 10px
}

.premium-success .plan-chip {
    margin-bottom: 7px
}

.premium-success .flow-actions {
    justify-content: center
}

.premium-avatar-image {
    background: center/cover no-repeat
}

@media(max-width:700px) {
    .premium-intro {
        align-items: flex-start;
        flex-direction: column
    }

    .premium-plan-grid {
        grid-template-columns: 1fr
    }

    .premium-benefits>div {
        grid-template-columns: 1fr
    }

    .premium-status {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(max-width:480px) {
    .premium-shell {
        padding-right: 0;
        padding-left: 0
    }

    .premium-heading h1 {
        font-size: 2rem
    }

    .premium-intro,
    .premium-usage,
    .premium-limit-note,
    .premium-compare,
    .premium-benefits,
    .premium-status,
    .premium-manage-card,
    .premium-unlimited {
        padding: 17px
    }

    .billing-toggle {
        width: 100%
    }

    .billing-toggle button {
        flex: 1
    }

    .usage-row {
        grid-template-columns: 1fr
    }

    .usage-row small {
        margin-top: -5px
    }

    .premium-status {
        grid-template-columns: 1fr
    }

    .premium-cancel-button {
        display: block;
        margin: 12px 0 0
    }
}

/* Activity history */
.activity-page {
    background: #fff6f5
}

.activity-shell {
    max-width: 1180px;
    margin: 0 auto;
    padding: 12px 4px 64px;
    color: #071b33
}

.activity-head {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-end;
    margin-bottom: 21px
}

.activity-head h1 {
    margin: 0;
    font-size: 2.25rem;
    letter-spacing: -.065em
}

.activity-head p {
    margin: 7px 0 0;
    color: #536174;
    font-size: .88rem
}

.activity-clear {
    border: 0;
    background: transparent;
    color: #d9345b;
    font: 700 .76rem Manrope;
    cursor: pointer;
    white-space: nowrap
}

.activity-filters {
    margin-bottom: 18px;
    padding: 12px;
    border: 1px solid #eae4df;
    border-radius: 15px;
    background: #fff
}

.activity-filters nav {
    display: flex;
    gap: 7px;
    overflow: auto;
    margin-bottom: 11px
}

.activity-filters nav button {
    flex: 0 0 auto;
    padding: 8px 10px;
    border: 1px solid #eae4df;
    border-radius: 99px;
    background: #fff;
    color: #536174;
    font: 700 .72rem Manrope;
    cursor: pointer
}

.activity-filters nav .is-active {
    border-color: #f2bccb;
    background: #fff0f3;
    color: #d9345b
}

.activity-tools {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) auto auto;
    gap: 8px
}

.activity-tools label {
    display: flex;
    gap: 7px;
    align-items: center;
    padding: 0 10px;
    border: 1px solid #eae4df;
    border-radius: 9px;
    color: #8a94a3
}

.activity-tools input {
    width: 100%;
    min-height: 37px;
    border: 0;
    outline: 0;
    color: #071b33;
    font: 400 .78rem Manrope
}

.activity-tools select {
    min-height: 39px;
    padding: 0 9px;
    border: 1px solid #eae4df;
    border-radius: 9px;
    background: #fff;
    color: #536174;
    font: 700 .7rem Manrope
}

.activity-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.9fr) minmax(240px, .7fr);
    gap: 17px
}

.activity-timeline>section {
    margin-bottom: 22px
}

.activity-timeline>section>h2 {
    margin: 0 0 9px;
    padding-left: 4px;
    color: #536174;
    font-size: .77rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em
}

.activity-timeline-item {
    position: relative;
    display: flex;
    gap: 11px;
    align-items: center;
    min-height: 61px;
    margin-top: 8px;
    padding: 12px 14px;
    border: 1px solid #eae4df;
    border-radius: 14px;
    background: #fff;
    color: #071b33;
    text-decoration: none;
    transition: .18s
}

.activity-timeline-item:hover {
    border-color: #f2cad5;
    box-shadow: 0 8px 18px rgba(7, 27, 51, .04);
    transform: translateY(-1px)
}

.activity-timeline-item.is-highlighted {
    box-shadow: 0 0 0 3px rgba(244, 63, 104, .14)
}

.activity-timeline-item.unavailable {
    color: #536174
}

.activity-timeline-icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #fce6ed;
    color: #d9345b;
    font-size: .78rem;
    font-weight: 800
}

.activity-timeline-icon.visits {
    background: #e2f7ef;
    color: #168e75
}

.activity-timeline-icon.groups {
    background: #eee9fd;
    color: #7047d7
}

.activity-timeline-icon.social {
    background: #fff1d6;
    color: #a87813
}

.activity-thumb {
    display: block;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: 9px;
    background: center/cover
}

.activity-copy {
    min-width: 0;
    flex: 1
}

.activity-copy strong,
.activity-copy p,
.activity-copy small {
    display: block
}

.activity-copy strong {
    font-size: .8rem;
    line-height: 1.4
}

.activity-copy p {
    margin: 3px 0 0;
    color: #536174;
    font-size: .72rem
}

.activity-copy small {
    margin-top: 3px;
    color: #8a94a3;
    font-size: .67rem
}

.activity-chevron {
    color: #8a94a3;
    font-size: 1.3rem
}

.activity-load {
    display: block;
    width: auto;
    margin: 8px auto 0;
    padding: 0 13px;
    min-height: 39px
}

.activity-support {
    display: grid;
    align-content: start;
    gap: 13px
}

.activity-support section {
    padding: 16px;
    border: 1px solid #eae4df;
    border-radius: 15px;
    background: #fff
}

.activity-support h2 {
    margin: 0 0 4px;
    font-size: .92rem
}

.activity-support section>p {
    margin: 0 0 13px;
    color: #8a94a3;
    font-size: .69rem
}

.activity-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px
}

.activity-summary div {
    padding: 9px;
    border-radius: 10px;
    background: #fffafa
}

.activity-summary strong,
.activity-summary span {
    display: block
}

.activity-summary strong {
    font-size: 1rem
}

.activity-summary span {
    margin-top: 2px;
    color: #68778b;
    font-size: .65rem
}

.activity-support section>button {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 9px 0;
    border: 0;
    border-top: 1px solid #f1ece9;
    background: transparent;
    color: #536174;
    font: 700 .74rem Manrope;
    text-align: left;
    cursor: pointer
}

.activity-support section>button:first-of-type {
    border-top: 0
}

.activity-support section>button b {
    color: #d9345b
}

.activity-recent-visits>a {
    display: flex;
    gap: 9px;
    align-items: center;
    padding: 9px 0;
    border-top: 1px solid #f1ece9;
    color: #071b33;
    text-decoration: none
}

.activity-recent-visits>a:first-of-type {
    border-top: 0
}

.activity-recent-visits .activity-thumb {
    width: 32px;
    height: 32px
}

.activity-recent-visits strong,
.activity-recent-visits small {
    display: block;
    font-size: .7rem
}

.activity-recent-visits small {
    margin-top: 3px;
    color: #8a94a3;
    font-size: .65rem
}

.activity-empty {
    padding: 45px 24px;
    border: 1px solid #eae4df;
    border-radius: 16px;
    background: #fff;
    text-align: center
}

.activity-empty h2 {
    margin: 0 0 8px;
    font-size: 1.08rem
}

.activity-empty p {
    margin: 0 0 16px;
    color: #68778b;
    font-size: .8rem
}

.activity-empty .secondary-btn {
    width: auto;
    min-height: 39px;
    padding: 0 12px;
    text-decoration: none
}

.js-activity-avatar {
    font-size: .72rem
}

@media(max-width:820px) {
    .activity-layout {
        grid-template-columns: 1fr
    }

    .activity-support {
        grid-template-columns: repeat(3, 1fr)
    }

    .activity-support section {
        min-width: 0
    }
}

@media(max-width:600px) {
    .activity-shell {
        padding-right: 0;
        padding-left: 0
    }

    .activity-head {
        align-items: flex-start;
        flex-direction: column
    }

    .activity-filters {
        padding: 10px
    }

    .activity-tools {
        grid-template-columns: 1fr 1fr
    }

    .activity-tools label {
        grid-column: 1/-1
    }

    .activity-layout {
        display: block
    }

    .activity-support {
        display: grid;
        grid-template-columns: 1fr;
        margin-top: 14px
    }

    .activity-timeline-item {
        padding: 11px
    }

    .activity-thumb {
        display: none
    }
}

/* Following feed */
.following-page {
    background: #fff6f5
}

.following-shell {
    max-width: 1160px;
    margin: 0 auto;
    padding: 30px 28px 64px;
    color: #071b33
}

.following-shell>header {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-end
}

.following-shell h1 {
    margin: 0;
    font-size: 2.2rem;
    letter-spacing: -.06em
}

.following-shell header p {
    margin: 7px 0 0;
    color: #536174
}

.following-filters {
    display: flex;
    gap: 8px;
    align-items: center;
    overflow: auto;
    margin: 22px 0
}

.following-filters button {
    flex: 0 0 auto;
    padding: 9px 11px;
    border: 1px solid #eae4df;
    border-radius: 99px;
    background: #fff;
    color: #536174;
    font: 800 .75rem Manrope;
    cursor: pointer
}

.following-filters .is-active {
    border-color: #f43f68;
    background: #fff0f3;
    color: #f43f68
}

.following-filters select {
    margin-left: auto;
    padding: 9px;
    border: 1px solid #eae4df;
    border-radius: 9px;
    background: #fff;
    font: inherit;
    font-size: .75rem
}

.following-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.85fr) minmax(230px, .72fr);
    gap: 20px
}

.feed-card {
    position: relative;
    margin-bottom: 15px;
    padding: 18px;
    border: 1px solid #eae4df;
    border-radius: 16px;
    background: #fff
}

.feed-actor {
    display: grid;
    grid-template-columns: 36px auto 1fr 30px;
    gap: 8px;
    align-items: center;
    margin-bottom: 14px
}

.feed-actor a {
    display: contents;
    color: #071b33;
    text-decoration: none
}

.feed-actor a>span {
    display: grid;
    place-items: center;
    grid-row: 1/3;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #fce6ed;
    color: #d9345b;
    font-size: .65rem;
    font-weight: 800
}

.feed-actor strong {
    font-size: .82rem
}

.feed-actor p {
    margin: 0;
    color: #536174;
    font-size: .8rem
}

.feed-actor p a {
    display: inline;
    color: #7047d7;
    font-weight: 800
}

.feed-actor small {
    grid-column: 2;
    color: #8a94a3;
    font-size: .68rem
}

.feed-actor button {
    grid-column: 4;
    grid-row: 1/3;
    border: 0;
    background: transparent;
    color: #68778b;
    font-weight: 800;
    cursor: pointer
}

.feed-bucket-preview {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 13px;
    overflow: hidden;
    border: 1px solid #eee8e5;
    border-radius: 11px;
    color: #071b33;
    text-decoration: none
}

.feed-bucket-preview>span {
    min-height: 110px;
    background: center/cover
}

.feed-bucket-preview div {
    padding: 13px 13px 13px 0
}

.feed-bucket-preview h2 {
    margin: 0 0 5px;
    font-size: 1rem
}

.feed-bucket-preview p {
    margin: 0;
    color: #536174;
    font-size: .76rem;
    line-height: 1.45
}

.feed-actions {
    display: flex;
    gap: 9px;
    margin-top: 12px
}

.feed-place-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px
}

.feed-place-row article,
.feed-single-place article {
    overflow: hidden;
    border: 1px solid #eee8e5;
    border-radius: 11px
}

.feed-place-row a:first-child,
.feed-single-place a:first-child {
    display: block;
    color: #071b33;
    text-decoration: none
}

.feed-place-row a:first-child>span,
.feed-single-place a:first-child>span {
    display: block;
    height: 105px;
    background: center/cover
}

.feed-place-row strong,
.feed-place-row small,
.feed-single-place strong,
.feed-single-place small {
    display: block;
    margin: 8px 9px 0;
    font-size: .73rem
}

.feed-place-row small,
.feed-single-place small {
    margin: 3px 9px 9px;
    color: #68778b;
    font-size: .67rem
}

.feed-single-place {
    max-width: 330px
}

.feed-menu {
    position: absolute;
    z-index: 8;
    top: 51px;
    right: 15px;
    display: grid;
    min-width: 170px;
    padding: 5px;
    border: 1px solid #eae4df;
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 10px 22px rgba(7, 27, 51, .13)
}

.feed-menu button {
    padding: 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #435267;
    text-align: left;
    font: inherit;
    font-size: .73rem;
    cursor: pointer
}

.feed-menu button:hover {
    background: #fff0f3
}

.feed-load {
    display: block;
    margin: 0 auto
}

.feed-caught-up,
.following-empty {
    padding: 33px;
    text-align: center;
    border: 1px solid #eae4df;
    border-radius: 16px;
    background: #fff;
    color: #536174
}

.feed-caught-up small,
.feed-caught-up a {
    display: block;
    margin-top: 7px;
    font-size: .78rem
}

.feed-caught-up a {
    color: #7047d7;
    font-weight: 800
}

.following-empty h2 {
    margin: 0 0 8px;
    color: #071b33
}

.following-empty p {
    margin: 0 0 17px
}

.following-empty a {
    margin: 3px
}

.follow-panel {
    margin-bottom: 13px;
    padding: 15px;
    border: 1px solid #eae4df;
    border-radius: 14px;
    background: #fff
}

.follow-panel h2 {
    margin: 0 0 11px;
    font-size: .94rem
}

.follow-panel>a {
    display: flex;
    gap: 9px;
    align-items: center;
    padding: 7px 0;
    color: #071b33;
    text-decoration: none
}

.follow-panel>a>span,
.suggested-person>span {
    display: grid;
    place-items: center;
    width: 31px;
    height: 31px;
    border-radius: 50%;
    background: #eee9fd;
    color: #7047d7;
    font-size: .6rem;
    font-weight: 800
}

.follow-panel a>span[style] {
    border-radius: 7px;
    background: center/cover
}

.follow-panel strong,
.follow-panel small {
    display: block
}

.follow-panel strong {
    font-size: .75rem
}

.follow-panel small,
.follow-panel>p {
    color: #8a94a3;
    font-size: .68rem
}

.panel-link {
    margin-top: 4px;
    color: #d9345b !important;
    font-size: .72rem;
    font-weight: 800
}

.suggested-person {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    gap: 8px;
    align-items: center;
    padding: 7px 0
}

.suggested-person strong {
    font-size: .74rem
}

.suggested-person button {
    padding: 6px 8px;
    border: 1px solid #f43f68;
    border-radius: 7px;
    background: #fff;
    color: #d9345b;
    font: 800 .68rem Manrope;
    cursor: pointer
}

@media(max-width:760px) {
    .following-shell {
        padding: 22px 16px 48px
    }

    .following-layout {
        grid-template-columns: 1fr
    }

    .following-layout aside {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px
    }

    .following-layout aside .follow-panel {
        margin: 0
    }

    .following-shell>header {
        align-items: flex-start;
        flex-direction: column
    }
}

@media(max-width:510px) {
    .following-layout aside {
        grid-template-columns: 1fr
    }

    .feed-place-row {
        grid-template-columns: 1fr
    }

    .feed-bucket-preview {
        grid-template-columns: 1fr
    }

    .feed-bucket-preview>span {
        min-height: 145px
    }

    .feed-bucket-preview div {
        padding: 0 13px 13px
    }

    .following-filters select {
        display: none
    }
}

.activity-history-unavailable {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    padding: 12px 0;
    border-top: 1px solid #f1ece9
}

.activity-history-unavailable .activity-symbol {
    flex: 0 0 auto
}

/* Interactive Home map preview (reuses Leaflet / OpenStreetMap from the full Map page) */
.home-page .map-card {
    height: 560px;
    border: 1px solid var(--border);
    border-radius: 24px;
    background: var(--surface);
    box-shadow: 0 10px 24px rgba(7, 27, 51, .06)
}

.home-map {
    width: 100%;
    height: 100%;
    background: #eaf0f1
}

.home-map .leaflet-control-zoom {
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 6px 16px rgba(7, 27, 51, .1)
}

.home-map .leaflet-control-zoom a {
    width: 32px;
    height: 32px;
    line-height: 32px;
    color: var(--text-primary)
}

.home-map-icon-wrap {
    background: transparent;
    border: 0
}

.home-map-marker {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 3px solid #fff;
    border-radius: 50% 50% 50% 10%;
    box-shadow: 0 5px 12px rgba(7, 27, 51, .22);
    color: #fff;
    font-size: 17px;
    font-weight: 800;
    transform: rotate(-45deg);
    transition: transform var(--motion-normal) var(--ease-standard), box-shadow var(--motion-normal) var(--ease-standard)
}

.home-map-marker i {
    font-style: normal;
    transform: rotate(45deg)
}

.home-map-icon-wrap:hover .home-map-marker {
    transform: rotate(-45deg) scale(1.05);
    box-shadow: 0 8px 17px rgba(7, 27, 51, .27)
}

.home-map-marker.is-selected {
    transform: rotate(-45deg) scale(1.08)
}

.home-map-marker.place {
    background: #f43f68
}

.home-map-marker.food {
    background: #ff6b5e
}

.home-map-marker.activity {
    background: #16aeb5
}

.home-map-marker.stay {
    background: #071b33
}

.home-map-popup-wrap .leaflet-popup-content-wrapper {
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 12px 26px rgba(7, 27, 51, .16);
    animation: home-map-popup-in var(--motion-normal) var(--ease-standard) both
}

.home-map-popup-wrap .leaflet-popup-content {
    width: 270px !important;
    margin: 0
}

.home-map-popup-wrap .leaflet-popup-tip {
    box-shadow: none
}

.home-map-popup {
    overflow: hidden;
    border-radius: 13px;
    background: #fff
}

.home-map-popup>img {
    display: block;
    width: 100%;
    height: 104px;
    object-fit: cover
}

.home-map-popup>div {
    padding: 11px 12px 12px
}

.home-map-popup span {
    color: var(--accent-purple);
    font-size: .65rem;
    font-weight: 800
}

.home-map-popup h3 {
    margin: 3px 0;
    color: var(--text-primary);
    font-size: .86rem
}

.home-map-popup p {
    margin: 0;
    color: var(--text-secondary);
    font-size: .68rem;
    line-height: 1.4
}

.home-map-popup small {
    display: block;
    margin-top: 5px;
    color: var(--text-muted);
    font-size: .65rem
}

.home-map-popup>div>div {
    display: flex;
    gap: 11px;
    margin-top: 10px
}

.home-map-popup a,
.home-map-popup button {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--brand-primary);
    font: 700 .7rem Manrope;
    text-decoration: none;
    cursor: pointer
}

.map-category-panel {
    right: 20px;
    bottom: 20px;
    gap: 7px;
    min-width: 155px;
    padding: 12px 13px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 8px 24px rgba(7, 27, 51, .08);
    backdrop-filter: blur(8px)
}

.legend-item {
    width: auto;
    min-height: 30px;
    padding: 0 3px;
    font-size: .75rem;
    cursor: pointer
}

.legend-item.is-muted {
    opacity: .42
}

@keyframes home-map-popup-in {
    from {
        opacity: 0;
        transform: translateY(6px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@media(max-width:1024px) {
    .home-page .map-card {
        height: 520px
    }
}

@media(max-width:768px) {
    .home-page .map-card {
        height: 460px
    }

    .map-category-panel {
        right: 14px;
        bottom: 14px;
        padding: 9px 10px;
        min-width: 128px
    }

    .legend-item {
        font-size: .68rem
    }
}

@media(max-width:480px) {
    .home-page .map-card {
        height: 420px
    }

    .map-category-panel {
        right: 10px;
        bottom: 10px;
        min-width: 112px
    }

    .legend-item::before {
        width: 9px;
        height: 9px
    }

    .home-map-popup-wrap .leaflet-popup-content {
        width: 235px !important
    }
}

/* Global UI polish: shared alignment, controls, and restrained motion */
:root {
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --control-height: 44px;
    --motion-fast: 140ms;
    --motion-normal: 200ms;
    --motion-slow: 320ms;
    --ease-standard: cubic-bezier(.2, 0, 0, 1)
}

button,
a,
input,
select,
textarea {
    transition: border-color var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-normal) var(--ease-standard), transform var(--motion-fast) var(--ease-standard)
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
    outline: 3px solid rgba(244, 63, 104, .22);
    outline-offset: 2px
}

.primary-btn,
.secondary-btn,
.group-primary,
.group-secondary,
.group-danger,
.place-primary,
.place-secondary,
.invite-primary,
.invite-secondary,
.invite-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--control-height);
    border-radius: var(--radius-md);
    font-weight: 700;
    line-height: 1;
    text-align: center
}

.primary-btn:not(:disabled):hover,
.secondary-btn:not(:disabled):hover,
.group-primary:not(:disabled):hover,
.group-secondary:not(:disabled):hover,
.place-primary:not(:disabled):hover,
.place-secondary:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(7, 27, 51, .08)
}

.primary-btn:active,
.secondary-btn:active,
.group-primary:active,
.group-secondary:active,
.place-primary:active,
.place-secondary:active {
    transform: translateY(0)
}

input:not([type=checkbox]):not([type=radio]):not([type=file]),
select {
    min-height: var(--control-height);
    border-radius: var(--radius-md)
}

textarea {
    border-radius: var(--radius-md)
}

.top-nav {
    min-height: 72px;
    align-items: center
}

.nav-item {
    align-items: center
}

.nav-right,
.main-nav,
.nav-left {
    min-width: 0
}

.nav-add-pin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px
}

.icon-button,
.avatar-button {
    flex: 0 0 auto
}

.menu-panel:not(.hidden),
.bucket-context:not(.hidden),
.pin-action-menu:not(.hidden),
.feed-menu:not(.hidden) {
    animation: bucket-dropdown-in var(--motion-fast) var(--ease-standard) both;
    transform-origin: top right
}

.flow-dialog:not(.hidden) {
    animation: bucket-overlay-in var(--motion-fast) var(--ease-standard) both
}

.flow-dialog:not(.hidden)>div {
    animation: bucket-modal-in var(--motion-normal) var(--ease-standard) both
}

.toast:not(.hidden) {
    animation: bucket-toast-in var(--motion-normal) var(--ease-standard) both
}

.app-shell>main {
    animation: bucket-page-in var(--motion-slow) var(--ease-standard) both
}

.journey-card,
.pin-card,
.bucket-manage-card,
.saved-pin-card,
.profile-bucket-card,
.profile-visit-card,
.search-grid article,
.public-pin-grid article,
.profile-bucket-grid article,
.feed-card,
.help-categories button {
    will-change: transform
}

.journey-card:hover,
.pin-card:hover,
.bucket-manage-card:hover,
.profile-bucket-card:hover,
.profile-visit-card:hover,
.search-grid article:hover,
.public-pin-grid article:hover,
.profile-bucket-grid article:hover,
.feed-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(7, 27, 51, .08)
}

.journey-cover,
.pin-image,
.bucket-manage-cover,
.saved-pin-image,
.profile-bucket-cover,
.profile-visit-cover,
.search-place-card>a>span,
.search-bucket-card>a>span {
    transition: transform 260ms var(--ease-standard)
}

.journey-card:hover .journey-cover,
.pin-card:hover .pin-image,
.bucket-manage-card:hover .bucket-manage-cover,
.saved-pin-card:hover .saved-pin-image,
.profile-bucket-card:hover .profile-bucket-cover,
.profile-visit-card:hover .profile-visit-cover,
.search-place-card:hover>a>span,
.search-bucket-card:hover>a>span {
    transform: scale(1.02)
}

.site-footer {
    align-items: center
}

.flow-actions,
.bucket-form-actions,
.group-head-actions,
.my-profile-actions,
.pins-heading>div:last-child {
    display: flex;
    align-items: center;
    gap: 12px
}

.flow-actions {
    justify-content: flex-end
}

.settings-menu a,
.settings-menu button {
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 8px
}

.settings-menu a:hover {
    color: var(--text-primary)
}

.profile-bucket-card strong,
.profile-visit-card strong,
.saved-pin-body h2,
.search-grid h3,
.feed-bucket-preview h2 {
    overflow: hidden;
    text-overflow: ellipsis
}

.profile-bucket-card strong,
.profile-visit-card strong,
.saved-pin-body h2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
}

.saved-pin-card,
.profile-bucket-card,
.profile-visit-card {
    height: 100%
}

@keyframes bucket-page-in {
    from {
        opacity: 0;
        transform: translateY(8px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes bucket-modal-in {
    from {
        opacity: 0;
        transform: translateY(6px) scale(.98)
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1)
    }
}

@keyframes bucket-overlay-in {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes bucket-dropdown-in {
    from {
        opacity: 0;
        transform: translateY(-4px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes bucket-toast-in {
    from {
        opacity: 0;
        transform: translateY(8px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@media(max-width:760px) {
    .app-shell {
        padding-right: 16px;
        padding-left: 16px
    }

    .flow-actions {
        align-items: stretch;
        flex-wrap: wrap
    }

    .flow-actions>.primary-btn,
    .flow-actions>.secondary-btn {
        min-width: 0
    }

    .top-nav {
        min-height: 64px
    }
}

@media(max-width:480px) {
    .flow-actions {
        flex-direction: column-reverse
    }

    .flow-actions>.primary-btn,
    .flow-actions>.secondary-btn {
        width: 100%
    }
}

@media(prefers-reduced-motion:reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important
    }

    .app-shell>main {
        animation: none
    }

    .primary-btn:hover,
    .secondary-btn:hover,
    .group-primary:hover,
    .group-secondary:hover,
    .place-primary:hover,
    .place-secondary:hover,
    .journey-card:hover,
    .pin-card:hover,
    .bucket-manage-card:hover,
    .profile-bucket-card:hover,
    .profile-visit-card:hover,
    .search-grid article:hover,
    .public-pin-grid article:hover,
    .profile-bucket-grid article:hover,
    .feed-card:hover {
        transform: none
    }
}

/* All saved Pins */
.pins-page {
    background: #fff6f5
}

.pins-shell {
    max-width: 1220px;
    margin: 0 auto;
    padding: 12px 4px 64px;
    color: #071b33
}

.pins-heading {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-end
}

.pins-heading h1 {
    margin: 0;
    font-size: 2.25rem;
    letter-spacing: -.065em
}

.pins-heading p {
    margin: 7px 0 0;
    color: #536174;
    font-size: .88rem
}

.pins-heading>div:last-child {
    display: flex;
    gap: 8px
}

.pins-heading .primary-btn,
.pins-heading .secondary-btn {
    width: auto;
    min-height: 41px;
    padding: 0 13px;
    text-decoration: none
}

.pin-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin: 21px 0 17px
}

.pin-summary div {
    padding: 14px;
    border: 1px solid #eae4df;
    border-radius: 13px;
    background: #fff
}

.pin-summary strong,
.pin-summary span {
    display: block
}

.pin-summary strong {
    font-size: 1.25rem
}

.pin-summary span {
    margin-top: 3px;
    color: #68778b;
    font-size: .71rem;
    font-weight: 700
}

.pins-tabs {
    display: flex;
    gap: 8px;
    overflow: auto;
    margin-bottom: 13px
}

.pins-tabs button {
    flex: 0 0 auto;
    padding: 8px 11px;
    border: 1px solid #eae4df;
    border-radius: 99px;
    background: #fff;
    color: #536174;
    font: 700 .73rem Manrope;
    cursor: pointer
}

.pins-tabs .is-active {
    border-color: #f2bdcc;
    background: #fff0f3;
    color: #d9345b
}

.pins-toolbar {
    display: grid;
    grid-template-columns: minmax(190px, 1fr) repeat(4, auto) auto;
    gap: 8px;
    padding: 10px;
    border: 1px solid #eae4df;
    border-radius: 14px;
    background: #fff
}

.pins-toolbar label {
    display: flex;
    gap: 6px;
    align-items: center;
    padding: 0 9px;
    border: 1px solid #eae4df;
    border-radius: 9px;
    color: #8a94a3
}

.pins-toolbar input {
    width: 100%;
    min-height: 37px;
    border: 0;
    outline: 0;
    font: 400 .76rem Manrope
}

.pins-toolbar select {
    min-height: 39px;
    max-width: 130px;
    padding: 0 8px;
    border: 1px solid #eae4df;
    border-radius: 9px;
    background: #fff;
    color: #536174;
    font: 700 .69rem Manrope
}

.pins-view-toggle {
    display: flex;
    overflow: hidden;
    border: 1px solid #eae4df;
    border-radius: 9px
}

.pins-view-toggle button {
    min-width: 42px;
    border: 0;
    border-left: 1px solid #eae4df;
    background: #fff;
    color: #536174;
    font: 700 .68rem Manrope;
    cursor: pointer
}

.pins-view-toggle button:first-child {
    border-left: 0
}

.pins-view-toggle .is-active {
    background: #fff0f3;
    color: #d9345b
}

.pins-result-count {
    margin: 15px 0 10px;
    color: #68778b;
    font-size: .75rem
}

.saved-pin-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 13px
}

.saved-pin-card {
    position: relative;
    overflow: visible;
    border: 1px solid #eae4df;
    border-radius: 15px;
    background: #fff;
    transition: .18s
}

.saved-pin-card:hover {
    box-shadow: 0 10px 20px rgba(7, 27, 51, .07);
    transform: translateY(-1px)
}

.saved-pin-card>a {
    display: block;
    overflow: hidden;
    border-radius: inherit;
    color: #071b33;
    text-decoration: none
}

.saved-pin-image {
    display: block;
    height: 140px;
    background: center/cover
}

.saved-pin-body {
    padding: 12px
}

.saved-status {
    display: inline-block;
    padding: 4px 7px;
    border-radius: 99px;
    background: #fff0f3;
    color: #d9345b;
    font-size: .62rem;
    font-weight: 800
}

.saved-status.visited {
    background: #e2f7ef;
    color: #168e75
}

.saved-pin-body h2 {
    margin: 8px 0 3px;
    font-size: .91rem
}

.saved-pin-body p {
    margin: 0;
    color: #536174;
    font-size: .71rem
}

.saved-pin-body>b {
    display: block;
    margin: 7px 0;
    color: #a87813;
    font-size: .72rem
}

.saved-pin-body small {
    display: block;
    color: #68778b;
    font-size: .66rem;
    line-height: 1.45
}

.visit-meta {
    margin-bottom: 5px;
    color: #168e75 !important
}

.pin-memberships {
    padding-top: 7px;
    border-top: 1px solid #f1ece9
}

.pin-memberships i {
    color: #7047d7;
    font-style: normal;
    font-weight: 700
}

.pin-menu-button {
    position: absolute;
    top: 9px;
    right: 9px;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, .92);
    color: #536174;
    cursor: pointer
}

.pin-action-menu {
    position: absolute;
    z-index: 10;
    top: 42px;
    right: 9px;
    display: grid;
    width: 164px;
    padding: 5px;
    border: 1px solid #eae4df;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(7, 27, 51, .12)
}

.pin-action-menu a,
.pin-action-menu button {
    padding: 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #435267;
    font: 700 .71rem Manrope;
    text-align: left;
    text-decoration: none;
    cursor: pointer
}

.pin-action-menu a:hover,
.pin-action-menu button:hover {
    background: #fff0f3
}

.pin-action-menu .danger {
    color: #d92d42
}

.saved-pin-grid.is-list {
    grid-template-columns: 1fr
}

.saved-pin-grid.is-list .saved-pin-card>a {
    display: grid;
    grid-template-columns: 150px 1fr
}

.saved-pin-grid.is-list .saved-pin-image {
    height: 100%
}

.pins-empty {
    padding: 43px;
    border: 1px solid #eae4df;
    border-radius: 16px;
    background: #fff;
    text-align: center
}

.pins-empty h2 {
    margin: 0 0 7px;
    font-size: 1.1rem
}

.pins-empty p {
    margin: 0 0 16px;
    color: #68778b;
    font-size: .8rem
}

.pins-empty .primary-btn {
    width: auto;
    min-height: 40px;
    padding: 0 13px;
    text-decoration: none
}

.pin-bucket-options {
    display: grid;
    gap: 7px;
    margin: 16px 0
}

.pin-bucket-options label {
    padding: 10px;
    border: 1px solid #eee8e5;
    border-radius: 9px;
    color: #435267;
    font-size: .78rem
}

.pin-bucket-options input {
    accent-color: #f43f68
}

.pins-visit-form {
    display: grid;
    gap: 12px
}

.pins-visit-form label {
    display: grid;
    gap: 6px;
    color: #435267;
    font-size: .76rem;
    font-weight: 700
}

.pins-visit-form input,
.pins-visit-form select,
.pins-visit-form textarea {
    box-sizing: border-box;
    width: 100%;
    padding: 10px;
    border: 1px solid #eae4df;
    border-radius: 9px;
    background: #fff;
    font: 400 .8rem Manrope
}

.pins-visit-form textarea {
    min-height: 85px;
    resize: vertical
}

.js-pins-avatar {
    font-size: .72rem
}

@media(max-width:1050px) {
    .saved-pin-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .pins-toolbar {
        grid-template-columns: minmax(190px, 1fr) repeat(3, auto)
    }

    .pins-toolbar label {
        grid-column: 1/-1
    }

    .pins-toolbar select {
        max-width: none
    }
}

@media(max-width:700px) {
    .pins-heading {
        align-items: flex-start;
        flex-direction: column
    }

    .pin-summary {
        grid-template-columns: repeat(2, 1fr)
    }

    .saved-pin-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .pins-toolbar {
        grid-template-columns: 1fr 1fr
    }

    .pins-view-toggle {
        min-height: 39px
    }

    .saved-pin-grid.is-list .saved-pin-card>a {
        grid-template-columns: 110px 1fr
    }
}

@media(max-width:480px) {
    .pins-shell {
        padding-right: 0;
        padding-left: 0
    }

    .saved-pin-grid {
        grid-template-columns: 1fr
    }

    .pins-heading>div:last-child {
        width: 100%
    }

    .pins-heading .primary-btn,
    .pins-heading .secondary-btn {
        flex: 1
    }

    .pins-toolbar {
        grid-template-columns: 1fr
    }

    .pins-toolbar label {
        grid-column: auto
    }

    .pins-toolbar select {
        width: 100%
    }

    .pins-view-toggle {
        width: 100%
    }

    .pins-view-toggle button {
        flex: 1
    }

    .saved-pin-grid.is-list .saved-pin-card>a {
        grid-template-columns: 1fr
    }

    .saved-pin-grid.is-list .saved-pin-image {
        height: 150px
    }
}

/* Help and support */
.help-page {
    background: #fff6f5
}

.help-shell {
    max-width: 1080px;
    margin: 0 auto;
    padding: 12px 4px 64px;
    color: #071b33
}

.help-heading {
    text-align: center
}

.help-heading h1 {
    margin: 0;
    font-size: 2.28rem;
    letter-spacing: -.065em
}

.help-heading p {
    margin: 8px 0 0;
    color: #536174;
    font-size: .9rem
}

.help-search {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 690px;
    margin: 24px auto 0;
    padding: 0 13px;
    border: 1px solid #eae4df;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(7, 27, 51, .04);
    color: #8a94a3
}

.help-search input {
    min-width: 0;
    flex: 1;
    min-height: 53px;
    border: 0;
    outline: 0;
    color: #071b33;
    font: 500 .86rem Manrope
}

.help-search button {
    border: 0;
    background: transparent;
    color: #8a94a3;
    font-size: 1.4rem;
    cursor: pointer
}

.help-search-suggestions {
    display: grid;
    gap: 5px;
    max-width: 690px;
    margin: 5px auto 0;
    padding: 9px 13px;
    border: 1px solid #eae4df;
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 10px 22px rgba(7, 27, 51, .05)
}

.help-search-suggestions button {
    padding: 6px 3px;
    border: 0;
    background: transparent;
    color: #536174;
    font: 700 .74rem Manrope;
    text-align: left;
    cursor: pointer
}

.help-search-suggestions button:hover {
    color: #d9345b
}

.help-search-suggestions span {
    color: #8a94a3;
    font-size: .73rem
}

.help-categories {
    margin-top: 30px
}

.help-categories h2,
.help-articles h2,
.help-contact h2 {
    margin: 0;
    font-size: 1.13rem;
    letter-spacing: -.04em
}

.help-categories>div {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 11px;
    margin-top: 14px
}

.help-categories button {
    min-height: 145px;
    padding: 15px;
    border: 1px solid #eae4df;
    border-radius: 14px;
    background: #fff;
    color: #071b33;
    text-align: left;
    cursor: pointer;
    transition: .18s
}

.help-categories button:hover,
.help-categories button.is-active {
    border-color: #f2cad5;
    box-shadow: 0 9px 18px rgba(7, 27, 51, .05);
    transform: translateY(-1px)
}

.help-categories button.is-active {
    background: #fffafa
}

.help-categories button>span {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: #e5f7f6;
    color: #168e95;
    font-size: .85rem;
    font-weight: 800
}

.help-categories button:nth-child(2n)>span {
    background: #eee9fd;
    color: #7047d7
}

.help-categories button:nth-child(3n)>span {
    background: #fff1d6;
    color: #a87813
}

.help-categories strong,
.help-categories small {
    display: block
}

.help-categories strong {
    margin-top: 11px;
    font-size: .79rem
}

.help-categories small {
    margin-top: 4px;
    color: #68778b;
    font-size: .68rem;
    line-height: 1.4
}

.help-articles {
    margin-top: 28px;
    padding: 22px;
    border: 1px solid #eae4df;
    border-radius: 17px;
    background: #fff
}

.help-articles>header {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 12px
}

.help-articles header p {
    margin: 4px 0 0;
    color: #8a94a3;
    font-size: .7rem
}

.help-articles header button {
    border: 0;
    background: transparent;
    color: #d9345b;
    font: 700 .73rem Manrope;
    cursor: pointer
}

.help-faq {
    border-top: 1px solid #f1ece9
}

.help-faq button {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    padding: 15px 1px;
    border: 0;
    background: transparent;
    color: #071b33;
    font: 600 .81rem Manrope;
    text-align: left;
    cursor: pointer
}

.help-faq button b {
    color: #d9345b;
    font-size: 1rem
}

.help-faq>div {
    padding: 0 28px 15px 1px;
    color: #536174;
    font-size: .77rem;
    line-height: 1.55
}

.help-faq p {
    margin: 0
}

.help-faq .secondary-btn {
    width: auto;
    min-height: 35px;
    margin-top: 10px;
    padding: 0 10px;
    text-decoration: none
}

.help-no-results {
    padding: 30px 10px;
    text-align: center
}

.help-no-results h3 {
    margin: 0 0 7px;
    font-size: 1rem
}

.help-no-results p {
    margin: 0;
    color: #68778b;
    font-size: .78rem
}

.help-contact {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    margin-top: 20px;
    padding: 23px 25px;
    border: 1px solid #eddce1;
    border-radius: 17px;
    background: linear-gradient(145deg, #fff, #fff4f6)
}

.help-contact p {
    margin: 6px 0 0;
    color: #536174;
    font-size: .78rem
}

.help-contact>div:last-child {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.help-contact .primary-btn,
.help-contact .secondary-btn {
    width: auto;
    min-height: 40px;
    padding: 0 12px
}

.help-links {
    display: flex;
    justify-content: center;
    gap: 17px;
    flex-wrap: wrap;
    margin: 21px 0 0;
    color: #8a94a3;
    font-size: .7rem
}

.help-links a {
    color: #68778b;
    text-decoration: none
}

.help-form {
    display: grid;
    gap: 12px
}

.help-form label {
    display: grid;
    gap: 6px;
    color: #435267;
    font-size: .74rem;
    font-weight: 700
}

.help-form input,
.help-form select,
.help-form textarea {
    box-sizing: border-box;
    width: 100%;
    padding: 10px 11px;
    border: 1px solid #eae4df;
    border-radius: 9px;
    background: #fff;
    color: #071b33;
    font: 400 .8rem Manrope;
    outline: 0
}

.help-form textarea {
    min-height: 100px;
    resize: vertical
}

.help-form input:focus,
.help-form select:focus,
.help-form textarea:focus {
    border-color: #f99ab0;
    box-shadow: 0 0 0 3px rgba(244, 63, 104, .1)
}

.help-tech-helper {
    padding: 10px;
    border-radius: 9px;
    background: #fff9ef;
    color: #85601c;
    font-size: .72rem;
    line-height: 1.4
}

.help-tech-helper input {
    margin-top: 8px
}

.help-attachment {
    position: relative;
    display: block !important;
    padding: 10px 11px;
    border: 1px dashed #e3c9d1;
    border-radius: 9px;
    background: #fffafa;
    color: #68778b !important;
    cursor: pointer
}

.help-attachment input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer
}

.help-attachment span {
    display: block;
    margin-top: 3px;
    color: #8a94a3;
    font-size: .67rem;
    font-weight: 500
}

.help-success {
    text-align: center
}

.help-success>span {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: #e2f7ef;
    color: #168e75;
    font-weight: 800
}

.help-success h2 {
    margin: 0
}

.help-success p {
    color: #536174
}

.help-success small {
    display: block;
    margin-bottom: 15px;
    color: #8a94a3;
    font-size: .68rem
}

.help-success .primary-btn {
    width: auto;
    min-height: 40px;
    padding: 0 13px
}

.js-help-avatar {
    font-size: .72rem
}

@media(max-width:760px) {
    .help-categories>div {
        grid-template-columns: repeat(2, 1fr)
    }

    .help-contact {
        align-items: flex-start;
        flex-direction: column
    }
}

@media(max-width:480px) {
    .help-shell {
        padding-right: 0;
        padding-left: 0
    }

    .help-heading {
        text-align: left
    }

    .help-heading h1 {
        font-size: 2rem
    }

    .help-categories>div {
        grid-template-columns: 1fr
    }

    .help-categories button {
        min-height: 0
    }

    .help-articles {
        padding: 17px
    }

    .help-contact {
        padding: 18px
    }

    .help-contact>div:last-child {
        width: 100%
    }

    .help-contact .primary-btn,
    .help-contact .secondary-btn {
        flex: 1
    }

    .help-links {
        justify-content: flex-start;
        gap: 10px
    }
}

/* Authenticated application header: one shared floating navigation pill. */
.top-nav {
    position: sticky;
    top: 16px;
    z-index: 1000;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    width: min(1320px, 100%);
    min-height: 64px;
    margin: 0 auto 28px;
    padding: 8px 12px 8px 18px;
    gap: 12px;
    border: 1px solid rgba(234, 228, 223, .78);
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    -webkit-backdrop-filter: blur(14px) saturate(1.18);
    backdrop-filter: blur(14px) saturate(1.18);
    box-shadow: 0 12px 28px rgba(7, 27, 51, .08), 0 2px 8px rgba(7, 27, 51, .03)
}

.top-nav .nav-left {
    min-width: 0
}

.top-nav .app-brand {
    width: 62px
}

.top-nav .main-nav {
    display: flex;
    justify-self: center;
    gap: 6px;
    min-width: 0
}

.top-nav .nav-item {
    min-height: 40px;
    padding: 8px 14px;
    border-radius: 999px;
    color: #536174;
    font-size: .88rem;
    font-weight: 600;
    white-space: nowrap;
    transition: color 180ms ease, background-color 180ms ease
}

.top-nav .nav-item:hover {
    color: #071b33;
    background: #fff6f5
}

.top-nav .nav-item.is-active {
    color: #071b33;
    background: #fff0f3;
    font-weight: 700
}

.top-nav .nav-item.is-active::after {
    display: none
}

.top-nav .nav-right {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    min-width: 0;
    margin-left: 0;
    flex: 0 0 auto
}

.top-nav .nav-right>.icon-menu-wrap,
.top-nav .nav-right>.icon-button {
    order: 1
}

.top-nav .nav-right>.avatar-menu-wrap,
.top-nav .nav-right>.avatar-button {
    order: 2
}

.top-nav .nav-add-pin {
    order: 3;
    width: auto;
    min-width: 0;
    min-height: 44px;
    padding: 0 20px;
    border: 0;
    border-radius: 999px;
    background: #071b33;
    color: #fff;
    box-shadow: none;
    font-size: .84rem;
    font-weight: 700;
    text-decoration: none
}

.top-nav .nav-add-pin:hover {
    background: #152c48;
    box-shadow: 0 8px 16px rgba(7, 27, 51, .12)
}

.top-nav .icon-button {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #071b33;
    box-shadow: none
}

.top-nav .icon-button:hover {
    background: #fff6f5;
    box-shadow: none
}

.top-nav .avatar-button {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    box-shadow: none
}

.top-nav .notification-badge {
    top: -3px;
    right: -3px
}

.nav-menu-toggle {
    display: none
}

@media(min-width:1025px) {
    .top-nav .main-nav {
        position: absolute;
        left: 50%;
        justify-self: auto;
        transform: translateX(-50%)
    }
}

@media(max-width:1024px) {
    .top-nav .app-brand {
        width: 56px
    }

    .top-nav .main-nav {
        gap: 2px
    }

    .top-nav .nav-item {
        padding-right: 10px;
        padding-left: 10px
    }

    .top-nav .nav-add-pin {
        padding-right: 16px;
        padding-left: 16px
    }
}

@media(max-width:760px) {
    .app-shell {
        padding-top: 12px
    }

    .top-nav {
        grid-template-columns: auto 1fr auto;
        min-height: 58px;
        margin-bottom: 22px;
        padding: 6px 10px 6px 14px;
        gap: 8px
    }

    .top-nav .app-brand {
        width: 48px
    }

    .nav-menu-toggle {
        display: inline-flex;
        grid-column: 2;
        align-items: center;
        justify-content: center;
        justify-self: end;
        width: 40px;
        height: 40px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: #fff6f5;
        color: #071b33;
        cursor: pointer
    }

    .nav-menu-toggle svg {
        width: 20px;
        height: 20px
    }

    .top-nav .main-nav {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        left: 0;
        display: none;
        justify-self: auto;
        gap: 4px;
        padding: 8px;
        border: 1px solid #eae4df;
        border-radius: 20px;
        background: #fff;
        box-shadow: 0 12px 28px rgba(7, 27, 51, .08)
    }

    .top-nav.is-mobile-open .main-nav {
        display: grid
    }

    .top-nav .nav-item {
        justify-content: flex-start;
        min-height: 42px;
        padding: 9px 12px
    }

    .top-nav .nav-right {
        grid-column: 3;
        gap: 6px
    }

    .top-nav .nav-add-pin {
        width: 40px;
        min-height: 40px;
        padding: 0;
        font-size: 0
    }

    .top-nav .nav-add-pin::after {
        display: none
    }

    .top-nav .nav-add-pin::before {
        content: "+";
        font-size: 1.2rem;
        line-height: 1
    }

    .top-nav .icon-button {
        width: 38px;
        height: 38px
    }

    .top-nav .avatar-button {
        width: 36px;
        height: 36px
    }

    .top-nav .notification-badge {
        top: -4px;
        right: -4px;
        min-width: 16px;
        height: 16px;
        font-size: .62rem
    }
}

/* Shared search component — values retained from Discover's existing primary search. */
.search-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 68px;
    padding: 0 14px 0 16px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: 0 8px 24px rgba(7, 27, 51, .04);
    transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease
}

.search-bar:hover {
    border-color: #ddd4cf;
    box-shadow: 0 9px 22px rgba(7, 27, 51, .055)
}

.search-bar:focus-within {
    border-color: rgba(244, 63, 104, .45);
    box-shadow: 0 0 0 3px rgba(244, 63, 104, .08), 0 8px 20px rgba(7, 27, 51, .05)
}

.search-bar__icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: #8a94a3
}

.search-bar__input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text-primary);
    font: 500 15px/1.4 Manrope
}

.search-bar__input::placeholder {
    color: #8a94a3;
    opacity: 1
}

.search-bar__action {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: rgba(244, 63, 104, .06);
    color: var(--text-accent);
    box-shadow: none;
    transition: background-color 180ms ease, color 180ms ease
}

.search-bar__action:hover {
    transform: none;
    background: rgba(244, 63, 104, .12);
    box-shadow: none
}

.search-bar__action:focus-visible,
.search-bar__clear:focus-visible {
    outline: 3px solid rgba(244, 63, 104, .2);
    outline-offset: 2px
}

.search-bar--wide {
    width: 100%
}

.search-bar--compact {
    min-height: 68px
}

.search-bar__clear {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #f5f0ef;
    color: #536174;
    font: 500 1.2rem/1 Manrope;
    cursor: pointer;
    transition: background-color 180ms ease, color 180ms ease
}

.search-bar__clear:hover {
    background: #fce6ed;
    color: #d9345b
}

.home-layout>.search-shell {
    width: 100%;
    max-width: none;
    margin: 8px auto 0;
    padding: 0;
    color: inherit
}

.home-layout>.filter-row {
    margin-top: 0
}

.discover-search-box,
.map-search-box {
    min-height: 68px
}

.global-search.search-bar {
    margin: 18px 0 24px
}

.global-search.search-bar .search-bar__input {
    font-weight: 500
}

.global-search.search-bar .search-filter {
    margin: 0
}

.help-search.search-bar {
    max-width: 690px;
    margin: 24px auto 0
}

.help-search-suggestions {
    margin-top: 8px;
    border-radius: 16px
}

.pins-toolbar .search-bar,
.buckets-toolbar .search-bar,
.activity-tools .search-bar,
.profile-visit-tools .search-bar,
.group-list-tools .search-bar,
.public-pin-tools .search-bar {
    min-width: 0
}

.pins-toolbar .search-bar {
    padding-right: 10px;
    padding-left: 12px
}

.pins-toolbar .search-bar__input {
    font-size: .8rem
}

.buckets-toolbar .search-bar {
    margin: 0
}

.flow-search.search-bar {
    margin-bottom: 16px
}

.place-modal .search-bar {
    margin-top: 14px
}

.public-pin-tools .search-bar {
    flex: 1
}

@media(max-width:760px) {

    .search-bar,
    .search-bar--compact {
        min-height: 58px;
        border-radius: 16px
    }

    .search-bar__action {
        width: 40px;
        height: 40px
    }

    .home-layout>.search-shell {
        width: 100%;
        margin-top: 4px
    }

    .home-layout>.filter-row {
        margin-top: 0
    }
}

@media(max-width:480px) {
    .search-bar {
        gap: 10px;
        padding-right: 10px;
        padding-left: 14px
    }

    .search-bar__input {
        font-size: 15px
    }

    .global-search.search-bar {
        flex-wrap: nowrap
    }

    .global-search.search-bar .search-bar__input {
        min-width: 0
    }

    .search-shell {
        padding-right: 16px;
        padding-left: 16px
    }

    .help-search.search-bar {
        margin-top: 20px
    }
}

.search-bar__input {
    margin: 0;
    padding: 0
}

.pins-toolbar label.search-bar,
.activity-tools label.search-bar,
.profile-visit-tools label.search-bar,
.group-list-tools label.search-bar {
    min-height: 68px;
    padding: 0 14px 0 16px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: 0 8px 24px rgba(7, 27, 51, .04);
    color: var(--text-muted)
}

.pins-toolbar label.search-bar input.search-bar__input,
.activity-tools label.search-bar input.search-bar__input,
.profile-visit-tools label.search-bar input.search-bar__input,
.group-list-tools label.search-bar input.search-bar__input,
.public-pin-tools .search-bar input.search-bar__input {
    min-height: 0;
    border: 0;
    background: transparent;
    color: var(--text-primary);
    font: 500 15px/1.4 Manrope
}

.public-pin-tools .search-bar {
    min-height: 68px;
    padding: 0 14px 0 16px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: 0 8px 24px rgba(7, 27, 51, .04)
}

@media(max-width:760px) {

    .pins-toolbar label.search-bar,
    .activity-tools label.search-bar,
    .profile-visit-tools label.search-bar,
    .group-list-tools label.search-bar,
    .public-pin-tools .search-bar {
        min-height: 58px;
        border-radius: 16px
    }
}