/* Custom OSM map style with precise #fff7e7 land color is defined in map-style.json */
/* Use this style file with your map library instead of CSS filters for accurate colors */

body, h1, h2, h3, h4, h5, h6, p, div, span, button, input, select, option, textarea {
    font-family: 'Manrope', sans-serif;
}

input[type="number"] {
    -moz-appearance: textfield; /* Firefox */
    appearance: textfield;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

:root {
    --chart-width: calc(100vw - 260px);
    --chart-height: calc(100vh - 60px);
    --margin-top: 2rem;
    --margin-right: 2rem;
    --margin-bottom: 4rem;
    --margin-left: 2rem;
    --circle-radius: 5px;
    --axis-color: #fff7e7;
    --axis-font-size: 1rem;
    --axis-label-color: #fff7e7;
    --axis-label-font-size: 1rem;
    --tooltip-bg-color: #2b2e31;
    --tooltip-font-size: 1rem;
    --default-circle-fill: steelblue;
    --background-color: #2b2e31;
    --text-color: #2b2e31;
    --popup-text-color: #fff7e7;
    --popup-link-color: lightsteelblue;
    --popup-max-width: 750px;
    --popup-text-width: 300px;
    --popup-image-max-width: 400px;
    --site-name-shadow-color: #2b2e31;
    --site-name-shadow-color-rgb: 43, 46, 49;
    --site-name-shadow-blur: 5px;
    --site-name-shadow-y-offset: 2px;
    --site-name-shadow-opacity: 0.7;
    --site-name-shadow-light: rgba(255, 247, 231, 0.7); /* Light shadow for dark backgrounds */
    --site-name-shadow-dark: rgba(43, 46, 49, 0.7);  /* Dark shadow for light backgrounds */
}

body {
    display: flex;
    background-color: var(--background-color);
    color: var(--text-color);
    height: 100vh;
    width: 100vw;
    margin: 0;
    overflow: hidden;
    overflow-x: hidden;
    background-size: cover;
    background-position: top left;
    user-select: none;
    background-image: url("/static/images/Chorogram%20bg.6442add466be49d4ae5d.webp");
}

.site-name {
    position: fixed;
    top: 0.5rem;
    left: 1.5rem;
    font-size: 3.5rem;
    font-weight: 600;
    cursor: pointer;
    color: #2b2e31;
    z-index: 90000;
    text-shadow: 0 2px 5px #2b2e31;
    transition: text-shadow 0.3s ease;
    display: inline-flex;
    align-items: flex-start;
}

/* Site name text span */
.site-name > span {
    display: inline-block;
}

/* Spore indicator superscript in site name */
.site-name .site-name-spore-superscript {
    display: inline-flex;
    align-items: center;
    position: relative;
    top: 0em;
    font-size: 0.4em;
}

button {
    background-color: var(--background-color);
    color: var(--text-color);
    border: 1px solid var(--text-color);
    padding: 0.5rem 1rem;
    cursor: pointer;
}

button:hover {
    background-color: var(--text-color);
    color: var(--background-color);
}

.newRecord-container {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 900; 
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    justify-content: flex-end;
    align-items: center;
}

.auth-button {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    padding: 0.5rem 1rem;
    margin: 0;
    background-color: #fff7e7;
    color: #ef4467;
    border: none;
    font-weight: bold;
    border-radius: 0;
    cursor: pointer;
    z-index: 1000;
    transition: background-color 0.3s ease;
    box-shadow: 0 2px 5px #2b2e31;
}

.auth-button:hover {
    background-color: #ef4467;
    transition: background-color 0.3s ease ;
    color: #fff7e7;
}

.newRecord-button {
    background-color: #ef4467;
    transition: background-color 0.3s ease;
    color: #fff7e7;
    border: none;
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
    font-size: 2.67rem;
    cursor: pointer;
    box-shadow: 0 2px 5px #2b2e31;
    display: flex;
    justify-content: center;
    align-items: center;
}

.newRecord-button:hover {
    background-color: #fff7e7;
    transition: background-color 0.3s ease;
    color: #ef4467;
}

.newProject-button {
    background-color: #4ade80;
    transition: background-color 0.3s ease;
    color: #fff7e7;
    border: none;
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 0 2px 5px #2b2e31;
    display: flex;
    justify-content: center;
    align-items: center;
}

.newProject-button:hover {
    background-color: #fff7e7;
    transition: background-color 0.3s ease;
    color: #4ade80;
}

/* ── Bug report button (bottom-left, mirrors the add-project button) ──────
   Left margin from the screen edge matches the add-project button's right
   margin (1rem), and it is bottom-aligned with the add-project button. */
.bug-report-button {
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    z-index: 900;
    background-color: #2b2e31;
    color: #fff7e7;
    border: none;
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 0 2px 5px #2b2e31;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.bug-report-button:hover {
    background-color: #fff7e7;
    color: #2b2e31;
}

/* ── Bug report popup ─────────────────────────────────────────────────── */
.bug-report-overlay {
    position: fixed;
    inset: 0;
    background: rgba(43, 46, 49, 0.6);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10060;
}

.bug-report-modal {
    background: #2b2e31;
    color: #fff7e7;
    width: 90%;
    max-width: 460px;
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 247, 231, 0.15);
    position: relative;
    box-sizing: border-box;
}

.bug-report-modal h3 {
    margin: 0 0 6px 0;
    font-size: 1.5rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff7e7;
}

.bug-report-modal h3 i {
    color: #ef4467;
}

.bug-report-intro {
    margin: 0 0 14px 0;
    font-size: 0.9rem;
    line-height: 1.4;
    color: rgba(255, 247, 231, 0.75);
}

.bug-report-textarea {
    width: 100%;
    min-height: 120px;
    resize: vertical;
    background: rgba(255, 247, 231, 0.08);
    border: 1px solid rgba(255, 247, 231, 0.25);
    border-radius: 8px;
    color: #fff7e7;
    padding: 12px;
    font-size: 16px;
    font-family: inherit;
    box-sizing: border-box;
}

.bug-report-textarea::placeholder {
    color: rgba(255, 247, 231, 0.45);
}

.bug-report-textarea:focus {
    outline: none;
    border-color: #ef4467;
}

.bug-report-shot {
    margin-top: 12px;
    font-size: 0.8rem;
    color: rgba(255, 247, 231, 0.6);
    display: flex;
    align-items: center;
    gap: 8px;
}

.bug-report-shot-thumb {
    width: 64px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid rgba(255, 247, 231, 0.25);
}

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

.bug-report-actions button {
    border: none;
    border-radius: 50px;
    padding: 10px 22px;
    font-weight: bold;
    cursor: pointer;
    font-size: 0.95rem;
    transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.bug-report-cancel {
    background: transparent;
    color: #fff7e7;
    border: 1px solid rgba(255, 247, 231, 0.4) !important;
}

.bug-report-cancel:hover {
    background: rgba(255, 247, 231, 0.1);
}

.bug-report-send {
    background: #ef4467;
    color: #fff7e7;
}

.bug-report-send:hover {
    background: #fff7e7;
    color: #ef4467;
}

.bug-report-send:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.bug-report-message {
    margin-top: 12px;
    font-size: 0.85rem;
    padding: 8px 12px;
    border-radius: 8px;
}

.bug-report-message.error {
    background: rgba(239, 68, 103, 0.15);
    color: #ff9db1;
}

.bug-report-message.success {
    background: rgba(74, 222, 128, 0.15);
    color: #86efac;
}

.name-prompt {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #2b2e31;
    background: #2b2e31;
    color: #fff7e7;
    font-size: 3.5rem;
    padding: 1.5rem;
    z-index: 1001;
}

select {
    width: 100%;
    padding: 0.5rem;
    margin-top: 0.5rem;
    margin-bottom: 0px;
    border: 1px solid var(--text-color);
    background-color: #2b2e3158;
    color: #2b2e31;
}

.sidebar {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 250px;
    max-height: 80vh;
    background: rgba(43, 46, 49, 0.6);
    backdrop-filter: blur(10px);
    padding: 20px;
    z-index: 1000;
    transition: height 0.3s ease;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
    cursor: default;
}

/* Drag handle: the only place from which the sidebar can be moved. Sticky so it
   stays pinned to the bottom of the sidebar and is always visible while
   scrolling. width:100% + text-align:center places the glyph exactly in the
   horizontal centre of the sidebar's content box. */
.sidebar-grip {
    position: sticky;
    bottom: 0;
    margin: 0;
    padding: 20px 0 0 0;
    display: block;
    width: 100%;
    text-align: center;
    font-size: 22px;
    color: #fff7e7;
    cursor: grab;
    user-select: none;
    transition: color 0.2s ease;
}

.sidebar-grip:hover {
    color: #ef4467;
}

.sidebar-grip:active {
    cursor: grabbing;
}

.sidebar::-webkit-scrollbar {
    width: 6px;
}

.sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
}

.greeting {
    font-size: 1.2em;
    font-weight: 500;
    padding: 10px 0;
    color: #fff7e7;
    margin-bottom: 20px;
    transition: opacity 0.3s ease;
}

.log-scale-container {
    display: flex;
    align-items: left;
    margin-bottom: 0px; 
}

.log-scale-container input {
    margin-right: 0.5rem; 
}

.display-container {
    position: absolute;
    top: 20px;
    right: 120px;
    width: 75%;
    height: 80%;
    box-sizing: border-box;
    padding: 20px;
    background: #2b2e319f;
    backdrop-filter: blur(20px);
    border-radius: 0px;
    z-index: 10;
}

.label-container {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 5px;
}

.label-container .label {
    background-color: #ef4467;
    color: #fff7e7;
    font-weight: bold;
    padding: 5px 10px;
    font-size: 14px;
    border-radius: 20px;
    cursor: pointer;
    opacity: 0.5;
}

.label-container .label.active {
    opacity: 1;
}

.legend-container {
    width: 100%;
    height: 120px;
    margin-top: 10px;
    overflow-y: scroll;
    margin-top: 5px;
}

.tooltip {
    position: absolute;
    text-align: left;
    width: auto;
    max-width: 500px;
    height: auto;
    padding: 5px;
    font-size: var(--tooltip-font-size);
    background: var(--tooltip-bg-color);
    border: 0px;
    border-radius: 0px;
    pointer-events: none;
    z-index: 1000;
    white-space: nowrap;
    /* border: 1px solid #fff7e7; */
    box-shadow: 0 2px 5px #2b2e31;
}

.fixed-tooltip {
    position: absolute;
    text-align: left;
    white-space: normal;
    word-wrap: break-word;
    width: auto;
    max-width: var(--popup-max-width);
    height: auto;
    padding: 5px;
    font-size: var(--tooltip-font-size);
    background: var(--tooltip-bg-color);
    border: 0px;
    border-radius: 0px;
    pointer-events: none;
    z-index: 1000;
    box-shadow: 0 2px 5px #2b2e31;
    /* border: 1px solid #fff7e7; */
}

.fixed-tooltip div, .fixed-tooltip span, .fixed-tooltip p {
    white-space: normal;  
    word-wrap: break-word;  
}

.tooltip-highlight {
    font-weight: bold;
    font-size: 18px;
    color: #fff7e7;
}

.tooltip-image-container {
    max-width: 250px; 
    max-height: 150px; 
    border-radius: 5px;
    overflow: auto;
}

.tooltip-image {
    max-width: 100%;
    max-height: 100%;
    display: block;
}

.popup {
    display: none;
    position: absolute;
    background-color: #2b2e31;
    /* border: 1px solid #fff7e7; */
    /* border-radius: 8px; */
    padding: 10px;
    box-shadow: 0 2px 5px #2b2e31;
    font-size: var(--tooltip-font-size);
    max-width: var(--popup-max-width);
    color: var(--popup-text-color);
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    z-index: 950;
    /* font-size: 10px; */
}

.popup-header {
    font-weight: bold;
    margin-bottom: 5px;
}

.popup-body {
    display: flex;
    flex-direction: row;
    max-height: 200px;
    overflow: hidden;
    color: var(--popup-text-color);
    /* position: relative;
    object-fit: contain;
    max-height: 100%; */
}

.popup-text-container {
    flex: 1; 
    max-width: var(--popup-text-width); 
    overflow-y: auto; 
    margin-right: 10px;
}

.popup-body a {
    color: var(--popup-link-color);
}

.popup-link {
    color: var(--popup-link-color);
    text-decoration: underline;
}

.popup img {
    /* max-height: 150px;*/
    max-width: var(--popup-image-max-width);
    width: auto; 
    height: auto;
    object-fit: contain;
    /* margin-left: 10px;
    position: absolute;
    right: 10px;
    top: 10px; */
}

.axis path,
.axis line {
    stroke: var(--axis-color);
}

.axis text {
    fill: var(--axis-color) !important;
    font-size: var(--axis-font-size) !important;
}

.axis-label {
    fill: var(--axis-label-color);
    font-size: var(--axis-label-font-size);
}

/* Style for the selector container */
.selector-container {
    justify-content: left;
    position: absolute;
    top: 100%;
    left:0;
    width: 100%;
    z-index: 900;
    transition: top 0.1s ease-out, left 0.1s ease-out;
}

.selector-tab {
    margin: 0 0 0 5px;
    background-color: #ef44679f;
    transition: background-color 0.3s ease;
    backdrop-filter: blur(20px);
    border: 0px #fff7e7;
    color: #fff7e7;
    font-weight: normal;
    padding: 5px 20px 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

.selector-tab:hover {
    background-color: #ef4466;
    transition: background-color 0.3s ease;
    color: #fff7e7;
}

.selector-tab.active {
    background-color: #ef4467;
    font-weight: bold;
  }

/* Gallery formatting */

.gallery-container {
    /* display: grid; */
    /* grid-template-columns: repeat(3, 1fr); */
    /* grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-auto-rows: 1fr; */
    gap: 20px;
    padding: 60px;
    background: #2b2e3141;
    backdrop-filter: blur(20px);
    border-radius: 0px;
    width: 1000px;
    height: 700px;
    /* box-sizing: border-box; */
    z-index: 800;
    overflow: auto;
    display: flex;
    flex-wrap: wrap; 
    justify-content: space-around;
}

/* Reusable gradient overlay for cards with images */
.chorogram-gradient-overlay {
    background: linear-gradient(135deg, rgba(239, 68, 103, 0.8) 0%, rgba(255, 107, 138, 0.6) 50%, rgba(239, 68, 103, 0.8) 100%);
}

.gallery-card {
    padding: 15px;
    background-color: #2b2e31;
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    margin: 5px;
    transition: background 0.4s ease, border-color 0.3s ease;
    max-height: calc((100vh / 3.5) - 10px);
    overflow-y: auto;
}

.gallery-card.highlighted {
    border: 3px solid #ef4467 !important;
}

.card-title {
    font-size: 1.5em;
    font-weight: bold;
    /* margin-bottom: 5px; */
    color: #fff7e7;
}

.card-content {
    font-size: 1.2em;
    color: #fff7e7;
    /* margin-bottom: 5px; */
    /* #fff7e7-space: pre-wrap; */
}

.card-image-container {
    text-align: center;
    /* margin-bottom: 5px; */
}

.card-image {
    max-width: 100%;
    max-height: 100px;
    object-fit: contain;
}

.map-container {
    position: absolute;
    padding: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #2b2e319f;
    backdrop-filter: blur(20px);

}

.record-container {
    position: absolute;
    padding: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #2b2e319f;
    backdrop-filter: blur(20px);

}

.record-info-overlay {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
    background-color: rgba(0, 0, 0, 0); /* transparent background */
    color: #fff7e7;
    padding: 10px;
    border-radius: 5px;
    max-width: 100%;
  }


.record-display {
    padding: 0px;
    background-color: #fff7e7;
    border: 1px solid #ef4467;
    color:#2b2e31;
    border-radius: 8px;
}

.record-info-overlay h2 {
    margin: 0px;
    font-size: 50;
    font-weight: bold;
}

/* ── Record review badges ── */
.record-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.record-badge i {
    font-size: 11px;
}

.record-badge-reviewed {
    background: rgba(234, 179, 8, 0.18);
    color: #f4c842;
    border: 1px solid rgba(234, 179, 8, 0.55);
}

.record-badge-public {
    background: rgba(96, 165, 250, 0.18);
    color: #7fb6ff;
    border: 1px solid rgba(96, 165, 250, 0.5);
}

/* ── Send for review button (bottom-right of record container) ── */
.send-for-review-btn {
    position: absolute;
    bottom: 18px;
    right: 18px;
    z-index: 20;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid rgba(234, 179, 8, 0.6);
    background: rgba(43, 46, 49, 0.92);
    color: #f4c842;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
    transition: all 0.2s ease;
}

.send-for-review-btn:hover {
    background: rgba(234, 179, 8, 0.18);
    border-color: #f4c842;
    transform: translateY(-1px);
}

.review-pending-pill {
    position: absolute;
    bottom: 18px;
    right: 18px;
    z-index: 20;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 15px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.5);
    background: rgba(43, 46, 49, 0.92);
    color: #cbd5e1;
    font-size: 13px;
    font-weight: 600;
}

.review-toast {
    position: absolute;
    bottom: 70px;
    right: 18px;
    z-index: 30;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    max-width: 280px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.review-toast-success {
    background: rgba(89, 189, 122, 0.95);
    color: #08230f;
}

.review-toast-error {
    background: rgba(239, 68, 103, 0.95);
    color: #fff7e7;
}

/* ── Send for review confirmation modal ── */
.review-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
}

.review-confirm-modal {
    width: min(420px, 90%);
    background: #2b2e31;
    color: #fff7e7;
    border: 1px solid rgba(234, 179, 8, 0.4);
    border-radius: 12px;
    padding: 22px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

.review-confirm-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    color: #f4c842;
}

.review-confirm-header h3 {
    margin: 0;
    font-size: 18px;
}

.review-confirm-modal p {
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 247, 231, 0.85);
    margin: 8px 0 18px;
}

.review-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.review-confirm-actions .btn-primary {
    background: rgba(234, 179, 8, 0.9);
    color: #2b2e31;
    border: none;
    padding: 9px 18px;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
}

.review-confirm-actions .btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.review-confirm-actions .btn-secondary {
    background: transparent;
    color: #fff7e7;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 9px 18px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
}

/* ── Profile dropdown counters ── */
.profile-menu-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #ef4467;
    color: #fff7e7;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

/* ── Reviews sidebar category counts ── */
/* Reserve room on the right so the count never overlaps the label/icon. */
.sidebar-filter-item[data-review-category] {
    padding-right: 46px;
}
.sidebar-filter-item span.review-cat-count {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    flex: none;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    box-sizing: border-box;
    padding: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    color: #fff7e7;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}
.sidebar-filter-item.active span.review-cat-count {
    background: rgba(255, 255, 255, 0.25);
}

/* ── Review cards (Reviews page) ── */
.review-card-actions {
    position: absolute;
    bottom: 8px;
    left: 8px;
    right: 8px;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
.btn-review-accept,
.btn-review-decline,
.btn-review-open {
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.btn-review-accept { background: rgba(89, 189, 122, 0.9); color: #08230f; }
.btn-review-decline { background: rgba(239, 68, 103, 0.9); color: #fff7e7; }
.btn-review-open { background: rgba(234, 179, 8, 0.92); color: #2b2e31; }

.reviews-empty-state {
    grid-column: 1 / -1;
    text-align: center;
    color: rgba(255, 247, 231, 0.6);
    font-style: italic;
    padding: 40px;
}

/* Review icon bar on Reviews-page cards */
.review-gallery-controls i {
    font-size: 20px;
    cursor: pointer;
    transition: transform 0.15s ease, color 0.15s ease;
}
.review-gallery-controls i:hover {
    transform: scale(1.15);
}
.review-icon-accept { color: #7be0a3; }
.review-icon-refuse { color: #ff8aa3; }
.review-icon-review { color: #ffd98a; }

/* ── Reviewed badge on gallery / featured cards ── */
.record-card-reviewed-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 11;
    color: #fff7e7;
    font-size: 20.7px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
    pointer-events: auto;
    cursor: help;
}

/* Review-status pill on My designs > Reviews cards */
.review-status-badge {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 11;
    padding: 3px 9px;
    border-radius: 11px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: #fff7e7;
    background: rgba(0, 0, 0, 0.55);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}
.review-status-badge.review-status-submitted { background: rgba(90, 98, 110, 0.9); }
.review-status-badge.review-status-in-progress { background: rgba(214, 138, 26, 0.92); }
.review-status-badge.review-status-done { background: rgba(34, 145, 90, 0.92); }
.review-status-badge.review-status-refused { background: rgba(196, 58, 80, 0.92); }

/* Keep the title clear of the reviewed badge */
.gallery-card.has-reviewed-badge .card-title,
.design-card-item.has-reviewed-badge .card-title {
    padding-right: 28px;
}

.record-badge-clickable {
    cursor: pointer;
}
.record-badge-clickable:hover {
    filter: brightness(1.15);
}

/* ── Reviewer review container (movable + minimizable) ── */
.review-container {
    position: fixed;
    top: 60px;
    right: 60px;
    z-index: 60;
    display: flex;
    flex-direction: column;
    background: #2b2e31;
    border: 1px solid rgba(234, 179, 8, 0.5);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    overflow: hidden;
}
.review-container-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: rgba(234, 179, 8, 0.15);
    border-bottom: 1px solid rgba(234, 179, 8, 0.3);
}
.review-container-header h3 {
    margin: 0;
    color: #f4c842;
    font-size: 16px;
}
.review-container-header-icons {
    display: flex;
    align-items: center;
    gap: 14px;
}
.review-min-icon,
.review-expand-icon,
.review-container-grip {
    color: #fff7e7;
    cursor: pointer;
    font-size: 15px;
}
.review-container-grip { cursor: grab; }
.review-container-text {
    flex: 1;
    margin: 0;
    padding: 12px 14px;
    background: transparent;
    border: none;
    color: #fff7e7;
    font-size: 14px;
    font-family: inherit;
    resize: none;
    outline: none;
    overflow-y: auto;
}
.review-container-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.review-container-footer button,
.review-decision-toggle button,
.review-send-btn {
    margin: 0;
}
.review-decision-toggle {
    display: inline-flex;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 8px;
    overflow: hidden;
}
.review-decision-toggle button {
    background: transparent;
    color: #fff7e7;
    border: none;
    padding: 7px 16px;
    font-weight: 700;
    cursor: pointer;
}
.review-decision-toggle button.active.accept { background: rgba(89, 189, 122, 0.9); color: #08230f; }
.review-decision-toggle button.active.decline { background: rgba(239, 68, 103, 0.9); color: #fff7e7; }
.review-send-btn {
    background: rgba(234, 179, 8, 0.92);
    color: #2b2e31;
    border: none;
    border-radius: 8px;
    padding: 8px 18px;
    font-weight: 700;
    cursor: pointer;
}
.review-container-min {
    position: fixed;
    top: 60px;
    right: 60px;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
    background: #2b2e31;
    border: 1px solid rgba(234, 179, 8, 0.5);
    border-radius: 10px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
}

/* ── Read-the-review overlay ── */
.review-read-overlay {
    position: absolute;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
}
.review-read-modal {
    position: relative;
    width: min(560px, 90%);
    max-height: 80%;
    overflow-y: auto;
    background: #2b2e31;
    color: #fff7e7;
    border: 1px solid rgba(234, 179, 8, 0.4);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}
.review-read-modal h3 { color: #f4c842; margin: 16px 0 6px; }
.review-read-modal h3:first-of-type { margin-top: 0; }
.review-read-text {
    white-space: pre-wrap;
    background: rgba(0, 0, 0, 0.2);
    padding: 12px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.5;
}
.review-read-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: transparent;
    border: none;
    color: #fff7e7;
    font-size: 24px;
    cursor: pointer;
    line-height: 1;
}
.review-read-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 18px;
}
.review-read-actions .btn-primary {
    background: rgba(234, 179, 8, 0.92);
    color: #2b2e31;
    border: none;
    padding: 9px 18px;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
}
.review-read-actions .btn-secondary {
    background: transparent;
    color: #fff7e7;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 9px 18px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
}

.react-flow-container {
    height: 100%;
    width: 100%;
  }

#react-flow-canvas {
    height: 100%;
    width: 100%;
    background-color: #2b2e3151;
    position: relative;
}

.fa-xmark, .fa-pencil, .fa-floppy-disk {
    position: absolute;
    bottom: -25px;
    font-size: 50px;
    margin: 0px;
    cursor: pointer;
    z-index: 20;
    color: #fff7e7;
    left: 12px;
}

.fa-floppy-disk {
    left: 55px;
}

.fa-grip {
    color: #fff7e7;
    font-size: 36px;
    z-index: 1000;
    cursor: grab;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
    transition: all 0.3s ease;
}

.fa-grip:hover {
    color: #ef4467;
}

.fa-grip:active {
    cursor: grabbing;
}

.search-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #2b2e31;
    border: 1px solid #ccc;
    color: #fff7e7;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 5px #2b2e31;
}

.search-bar input {
    width: 500px;
    padding: 5px;
    font-size: 30px;
}

.search-bar .fa-magnifying-glass {
    margin-left: 10px;
}

.suggestions {
    list-style-type: none;
    margin-top: 5px;
    padding: 0;
}

.suggestions li {
    padding: 5px;
    cursor: pointer;
}

.suggestions li:hover {
    background-color: #fff7e7;
}

.search-options {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: #fff7e7;
    color: #2b2e31;
}

.search-options li {
    padding: 10px;
    cursor: pointer;
}

.search-options li:hover {
    background-color: #fff7e7;
}

.node-name-popup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff7e7;
    padding: 20px;
    /* z-index: 1000; */
}

.node-name-popup input {
    padding: 10px;
    width: 100%;
}

.node-type-buttons {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
}

.node-type-buttons button {
    padding: 10px 15px;
    background-color: #fff7e7;
    color: #2b2e31;
    cursor: pointer;
}

.node-type-buttons button:hover {
    background-color: #fff7e7;
}

.sidebar-field-name {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 18px;
}

.sidebar-field-name .node-type-emoji {
    font-size: 28px;
    line-height: 1.3;
    flex-shrink: 0;
}

.sidebar-field-name .sidebar-field-title {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    font-size: 22px;
    font-weight: 700;
    color: #fff7e7;
    border: none;
    background: transparent;
    /* Allow long titles to wrap onto multiple lines instead of being cut off */
    resize: none;
    overflow: hidden;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.3;
    font-family: inherit;
}

/* Discrete frame around the Location field + its value */
.sidebar-field-location {
    border: 1px solid rgba(255, 247, 231, 0.35);
    border-radius: 6px;
    padding: 6px 8px;
    margin-bottom: 12px;
}

.sidebar-field-location label {
    margin-bottom: 2px;
}

.sidebar-field-location input {
    width: 100%;
    padding: 8px;
}

.location-results {
    list-style: none;
    margin-top: 0;
    padding: 0;
    max-height: 200px;
    overflow-y: auto;
    border: 0px #ccc;
    background: rgba(255, 255, 255, 0); /* transparent */
}

.location-results li {
    padding: 8px;
    cursor: pointer;
}

.location-results li:hover {
    background-color: #f0f0f0;
}

.sidebar-field label {
    display: block;
    margin-bottom: 5px;
    font-size: 20px;
    font-weight: bold;
}

.sidebar-field input {
    width: 100%;
    background-color: #fff7e700;
    box-sizing: border-box;
}

/* Update the properties section to be scrollable */
.properties-section {
    padding: 0;
    color: #fff7e7;
    max-height: 80vh;
    overflow-y: hidden;
    overflow-x: hidden;
    position: relative;
}

/* Scrollbar styling for the properties section */
.properties-section::-webkit-scrollbar {
    width: 8px;
}

.properties-section::-webkit-scrollbar-track {
    background: rgba(43, 46, 49, 0.5);
    border-radius: 4px;
}

.properties-section::-webkit-scrollbar-thumb {
    background-color: rgba(255, 247, 231, 0.2);
    border-radius: 4px;
}

.properties-section::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 247, 231, 0.3);
}

.properties-category h3 {
    color: #fff7e7;
    margin-top: 0;
    margin-bottom: 6px;
    font-size: 1em;
    font-weight: 400;
}

/* Add label styles for location and other fields */
.sidebar-field-location label, 
.form-group label {
    display: block;
    color: #fff7e7;
    margin-bottom: 8px;
    font-weight: 500;
    font-size: 0.95em;
}

/* Empty category message */
.empty-category-message {
    color: rgba(255, 247, 231, 0.5);
    font-style: italic;
    font-size: 0.9em;
    margin: 12px 0;
    text-align: center;
}

.add-button{
    margin: 0;
    background-color: #ef4467;
    color: #fff7e7;
    border: none;
    padding: 1px 4px;
    border-radius: 50px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.add-button:hover{
    background-color: #fff7e7;
    color: #ef4467;
}

.form-group {
    margin-top: 6px;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 10px;
    background: #fff7e7;
    border: none;
    color: #2b2e31;
}

.form-group select {
    height: 38px;
    margin: 6px 0 0 0;
}

.input-help-text {
    font-size: 0.8em;
    color: rgba(255, 247, 231, 0.7);
    margin-top: 4px;
    font-style: italic;
}

/* Disabled button */
.add-property-button:disabled {
    background: rgba(239, 68, 103, 0.3);
    cursor: not-allowed;
}


/* Location input container */
.location-input-container {
    position: relative;
    display: flex;
}

.clear-location-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: rgba(255, 247, 231, 0.6);
    cursor: pointer;
    font-size: 18px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.clear-location-btn:hover {
    color: #ef4467;
    background-color: rgba(255, 247, 231, 0.1);
}

.location-input-container input {
    padding-right: 35px;
}

.value-unit-container {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
}

.property-value-input {
    flex: 1;
    padding: 8px;
    border: none;
    border-radius: 4px;
    background-color: #1a1d20;
    color: #fff7e7;
    font-size: 14px;
    height: 36px;
    box-sizing: border-box;
}

.property-value-input:focus {
    outline: none;
    border: none;
}

.unit-select {
    min-width: 100px;
    padding: 8px;
    border: none;
    border-radius: 4px;
    background-color: #1a1d20;
    color: #fff7e7;
    font-size: 14px;
    height: 36px;
    box-sizing: border-box;
}

.unit-select:focus {
    outline: none;
    border: none;
}

.custom-unit-input {
    min-width: 100px;
    padding: 8px;
    border: none;
    border-radius: 4px;
    background-color: #1a1d20;
    color: #fff7e7;
    font-size: 14px;
    height: 36px;
    box-sizing: border-box;
}

.custom-unit-input:focus {
    outline: none;
    border: none;
}

/* Remove form labels in add property section */
.new-property-section .form-group label {
    display: none;
}

/* Sample shape & dimensions form (optional, in Add New Property) */
.sample-shape-section {
    margin-top: 12px;
    border-top: 1px solid rgba(255, 247, 231, 0.15);
    padding-top: 12px;
}

.sample-shape-toggle {
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    color: #fff7e7;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 0;
    opacity: 0.85;
}

.sample-shape-toggle:hover {
    opacity: 1;
}

.sample-shape-form {
    margin-top: 10px;
    background: rgba(26, 29, 32, 0.6);
    border: 1px solid rgba(255, 247, 231, 0.12);
    border-radius: 8px;
    padding: 12px;
}

.sample-shape-hint {
    font-size: 12px;
    line-height: 1.4;
    color: rgba(255, 247, 231, 0.65);
    margin: 0 0 12px 0;
}

/* Re-show labels inside the sample shape form */
.sample-shape-form .form-group label {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 247, 231, 0.8);
}

.sample-shape-form .form-group {
    margin-bottom: 10px;
}

.sample-dim-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.sample-dim-grid-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.shape-dim-details .shape-select,
.shape-dim-details .dim-input {
    background-color: #1a1d20;
    color: #fff7e7;
    border: 1px solid rgba(255, 247, 231, 0.15);
    border-radius: 4px;
    padding: 4px 6px;
    font-size: 13px;
}

/* Landing page */
.landing-container {
    position: relative;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    background-size: fixed;
    background-position: center;
    overflow-y: auto;
    overflow-x: hidden;
    flex-direction:column;
    align-items: center;
    justify-content: flex-start;
    display: flex;
    user-select: none;
}

/* Background Container */
/* Fixed wrapper pinned to the viewport that CLIPS the blurred background layers.
   The blur fades each layer's own border to transparent; keeping the layers
   oversized inside this overflow-hidden clip means that faded border always sits
   outside the viewport and is never visible — no darker/soft edge on any screen
   size, desktop or mobile. */
.background-blur-clip {
    position: fixed;
    inset: 0;
    overflow: hidden;
    z-index: -1;
    /* Deliberately NOT GPU-promoted (no transform/will-change here). Promoting a
       position:fixed element makes Chromium size it against the viewport width
       INCLUDING the scrollbar, which pushes it a scrollbar-width past the right
       edge and adds a tiny horizontal scroll. Compositing is applied to the
       absolute children below instead — they are contained by this overflow:hidden
       clip, so they can never contribute to page overflow. */
}

.background-container, .fading-container {
    /* Absolute inside .background-blur-clip, sized larger than the viewport so
       the blurred border is pushed outside the clip. */
    position: absolute;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    background-size: cover;
    background-position: 0% center;
    transition: opacity 2s ease-in-out;
    animation: continuousPan 30s linear infinite;
    /* Blur the background image directly instead of using a fixed
       backdrop-filter overlay. backdrop-filter re-blurs the whole viewport on
       every scroll frame (major jank); a static image filter is GPU-composited
       and independent of scrolling. -webkit- prefix keeps it identical on iOS. */
    -webkit-filter: blur(30px);
    filter: blur(30px);
    /* Promote each blurred layer to its own compositing layer (identity
       transform, so no visual change) so iOS Safari keeps the fixed background
       pinned and off the per-frame repaint path during scroll. Safe here — these
       are absolute children of the overflow:hidden clip, so they cannot cause
       page overflow the way a promoted fixed element would. */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.animate-background {
    animation: continuousPan 30s linear infinite;
}

.fading-container {
    opacity: 0;
}

/* Fade-in Animation */
.fade-in {
    opacity: 1;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes continuousPan {
    0% { background-position: 0% center; }
    100% { background-position: 100% center; }
}

/* Mobile pan: move the already-rasterised blurred layer with a GPU transform
   instead of animating background-position (which re-rasterises the heavy blur
   every frame and stutters on phones). Ping-pongs so the loop never snaps. The
   layer is oversized (120%) and clipped, so a few % of travel stays fully
   covered on all sides. */
@keyframes continuousPanMobile {
    0%   { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
    50%  { -webkit-transform: translate3d(-5%, 0, 0); transform: translate3d(-5%, 0, 0); }
    100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}


/* Landing Content */
.landing-content {
    position: relative;
    z-index: 1;
    color: #fff7e7;
    text-align: center;
}


.blur-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* The background image is already blurred (see .background-container). This
       overlay is NOT a blur — it is only a very light tint to keep white text
       legible. Kept intentionally faint so it does not visibly darken the
       background artwork (previously 0.28, which read as a grey wash). */
    background: rgba(30, 32, 34, 0.1);
    z-index: 0;
}

/* ---------------------------------------------------------------------------
   Landing page: document-level scrolling.
   The app shell keeps <body> fixed (height:100vh; overflow:hidden) with an
   inner scroll region. That breaks the landing on mobile: a position:fixed
   element inside an internal overflow:auto container is NOT pinned to the
   viewport on iOS, so the blurred background/tint scroll away and the sections
   feel like separate scroll panes. On the landing we let the body scroll the
   whole document instead, which keeps the fixed background + blur truly pinned
   and the sections rendering as one continuous page.
   --------------------------------------------------------------------------- */
body.landing-page-active {
    display: block;
    height: auto;
    min-height: 100vh;
    width: 100%;
    /* Let the whole document scroll naturally (overflow: visible) rather than
       making <body> an internal scroll container. A scroll container on <body>
       (overflow-y:auto) unpins position:fixed layers on iOS Safari — which is
       why the blurred background behaved differently on mobile than desktop.
       Natural document scroll keeps the fixed background pinned identically on
       both. Horizontal overflow is prevented per-section, not by clipping the
       scroll root (which would re-introduce the same iOS fixed-positioning bug). */
    overflow: visible;
    /* The landing's backdrop is the rotating pinkish images (.background-container).
       The base <body> uses "Chorogram bg.webp" as its background, which was
       peeking through around the blurred edges of the pinkish layer on narrow
       screens. Suppress it on the landing — that artwork is only meant to appear
       once the user logs in (the welcome page re-applies it). */
    background-image: none;
    /* Restrict text selection and the iOS long-press callout across the whole
       landing (matches the desktop no-select behaviour, plus prevents the
       "Save Image / Copy" sheet on mobile). These properties inherit to all
       descendants (image drag is additionally disabled on <img> below). */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* Block dragging / long-press saving of every image on the landing page,
   without disabling clicks on interactive images (e.g. the logo). */
body.landing-page-active img {
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
}

body.landing-page-active .landing-container {
    height: auto;
    min-height: 100vh;
    /* Clip horizontal overflow so nothing can ever make the page scroll sideways,
       WITHOUT turning this into a scroll container. overflow-x: clip (unlike
       hidden/auto) does not establish a scroll container, so it does not unpin the
       position:fixed background on iOS Safari the way overflow:hidden would. The
       fixed background layers are not descendants for clipping purposes (no
       transform on this element), so they are unaffected. overflow-y stays visible
       so the whole document keeps scrolling naturally. */
    overflow-x: clip;
    overflow-y: visible;
}

/* Hero fills the first viewport in normal flow (no absolute positioning or the
   old margin-top:100vh spacer), so it scrolls continuously into the sections
   below. */
.landing-hero {
    position: relative;
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

body.landing-page-active .main-content {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
}

body.landing-page-active .sales-section {
    margin-top: 0;
}

/* Main content styles */
.main-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #2b2e31;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 70%;
}

/* Auth buttons row, centered below the tagline */
.landing-auth-buttons {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
    z-index: 3;
}

.landing-auth-buttons .auth-button,
.landing-auth-buttons .signup-button {
    position: static;
    top: auto;
    right: auto;
    margin: 0;
}

/* Floating auth buttons: a fixed clone pinned to the top-right that fades /
   slides in once the hero buttons scroll out of view (mirrors .corner-logo). */
.landing-auth-buttons.landing-auth-floating {
    position: fixed;
    top: 1rem;
    right: 1rem;
    margin-top: 0;
    z-index: 1000;
    opacity: 0;
    transform: translateY(-14px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
}

.landing-auth-buttons.landing-auth-floating.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Small corner logo (appears once the hero logo scrolls out of view) */
.corner-logo {
    position: fixed;
    top: 0.75rem;
    left: 1rem;
    width: 5.1rem;
    height: auto;
    z-index: 1000;
    opacity: 0;
    transform: translateY(-14px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
}

.corner-logo.visible {
    opacity: 1;
    transform: translateY(0);
}

.corner-logo-img {
    display: block;
    width: 100%;
    height: auto;
}

.corner-logo-beige {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.corner-logo.beige .corner-logo-beige {
    opacity: 1;
}

.landing-logo {
    position: relative;
    top: 0;
    width: 40%;
    height: auto;
    z-index: 2;
    display: block;
}

.landing-site-name {
    font-size: 6.5rem;
    /* margin-top: 20rem; */
    margin: 0;
    font-weight: bold;
    color: #2b2e31; 
    position: center;
    z-index: 10;
    text-shadow: none;
}

.landing-headline{
    font-size: 1.375rem;
    font-weight:lighter;
    margin-top: 0.5rem;
    color: #2b2e31;
}

.mailchimp-form iframe {
    margin-top: 2rem;
}

/* Sales section */
.sales-section {
    margin-top: 100vh;
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 3.5rem;
    z-index: 5;
    padding: 5rem 1.5rem 6rem;
    box-sizing: border-box;
}

/* Intro / heading */
.sales-intro {
    max-width: 760px;
    text-align: center;
    color: #2b2e31;
}

.sales-eyebrow {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #ef4467;
    margin-bottom: 1rem;
}

.sales-heading {
    font-size: 2.75rem;
    line-height: 1.15;
    font-weight: 800;
    margin: 0 0 1rem;
    color: #2b2e31;
}

.sales-subheading {
    font-size: 1.25rem;
    line-height: 1.6;
    font-weight: 300;
    margin: 0;
    color: #2b2e31;
}

/* Grid of feature cards */
.sales-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    width: 100%;
    max-width: 1200px;
}

.sales-point {
    display: flex;
    flex-direction: column;
    background: rgba(255, 247, 231, 0.96);
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(43, 46, 49, 0.18);
    color: #2b2e31;
    opacity: 0;
    transform: translateY(2.5rem);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out, box-shadow 0.3s ease;
    transition-delay: var(--sales-delay, 0s);
}

.sales-point:hover {
    box-shadow: 0 18px 45px rgba(43, 46, 49, 0.28);
    transform: translateY(-4px);
}

.sales-point.visible {
    opacity: 1;
    transform: translateY(0);
}

.sales-point-media {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #2b2e31;
}

.sales-point-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.sales-point:hover .sales-point-media img {
    transform: scale(1.05);
}

/* Connect artwork ships with white padding; zoom in a touch by default so the
   borders sit outside the 4:3 frame. */
.sales-point-media--zoom img {
    transform: scale(1.08);
}

.sales-point:hover .sales-point-media--zoom img {
    transform: scale(1.13);
}

.sales-point .text-container {
    padding: 1.75rem;
    text-align: left;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.sales-point-badge {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ef4467;
    color: #fff7e7;
    font-size: 1.2rem;
    margin: -3.5rem 0 1rem;
    box-shadow: 0 4px 12px rgba(43, 46, 49, 0.3);
    position: relative;
    z-index: 2;
}

.sales-point h3 {
    font-size: 1.6rem;
    font-weight: 800;
    color: #2b2e31;
    margin: 0 0 0.25rem;
}

.sales-point-tagline {
    font-size: 1.05rem;
    font-weight: 600;
    color: #ef4467;
    margin: 0 0 1rem;
}

.sales-point-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.sales-point-list li {
    position: relative;
    padding-left: 1.5rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #2b2e31;
}

.sales-point-list li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 0.1rem;
    color: #ef4467;
    font-size: 0.8rem;
}

/* ----- PLATFORM CAPABILITIES SECTION ----- */
.capabilities-section {
    position: relative;
    z-index: 5;
    width: 100%;
    box-sizing: border-box;
    padding: 6rem 1.5rem 7rem;
    background: #2b2e31;
    color: #fff7e7;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3.5rem;
}

.capabilities-intro {
    max-width: 780px;
    text-align: center;
}

.capabilities-intro .sales-heading,
.capabilities-intro .sales-subheading {
    color: #fff7e7;
}

.capabilities-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
    width: 100%;
    max-width: 1100px;
}

.capability-card {
    display: flex;
    gap: 1.25rem;
    padding: 2rem;
    background: rgba(255, 247, 231, 0.06);
    border: 1px solid rgba(255, 247, 231, 0.12);
    border-radius: 1.25rem;
    opacity: 0;
    transform: translateY(2rem);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out, background 0.3s ease, border-color 0.3s ease;
    transition-delay: var(--cap-delay, 0s);
}

.capability-card.visible {
    opacity: 1;
    transform: translateY(0);
}

.capability-card:hover {
    background: rgba(255, 247, 231, 0.1);
    border-color: rgba(239, 68, 103, 0.6);
}

.capability-icon {
    flex-shrink: 0;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ef4467;
    color: #fff7e7;
    font-size: 1.4rem;
}

.capability-content {
    display: flex;
    flex-direction: column;
}

.capability-eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #ef4467;
    margin-bottom: 0.5rem;
}

.capability-title {
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.25;
    margin: 0 0 0.6rem;
    color: #fff7e7;
}

.capability-text {
    font-size: 1rem;
    line-height: 1.6;
    margin: 0 0 1.1rem;
    color: rgba(255, 247, 231, 0.85);
}

.capability-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: auto;
}

.capability-tag {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.35rem 0.75rem;
    border-radius: 2rem;
    background: rgba(255, 247, 231, 0.1);
    border: 1px solid rgba(255, 247, 231, 0.2);
    color: #fff7e7;
}

.capability-contact {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    align-self: flex-start;
    margin-top: 1.25rem;
    padding: 0.65rem 1.1rem;
    border-radius: 0.6rem;
    background: #ef4467;
    color: #fff7e7;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
}

.capability-contact:hover {
    background: #d63659;
    transform: translateY(-2px);
}

/* A lone final card on an odd row spans full width */
.capabilities-grid .capability-card:nth-child(odd):last-child {
    grid-column: 1 / -1;
}

@media (max-width: 768px) {
    .capabilities-section {
        padding: 4rem 1rem 5rem;
        gap: 2.5rem;
    }

    .capabilities-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .capability-card {
        padding: 1.5rem;
    }
}

/* ----- PRICING SECTION ----- */
.pricing-section {
    position: relative;
    z-index: 5;
    width: 100%;
    box-sizing: border-box;
    padding: 6rem 1.5rem 7rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
    color: #2b2e31;
}

.pricing-intro {
    max-width: 780px;
    text-align: center;
}

.pricing-body {
    width: 100%;
    max-width: 1100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
}

.pricing-loading,
.pricing-fallback {
    font-size: 1.05rem;
    color: #2b2e31;
    opacity: 0.8;
    text-align: center;
    max-width: 640px;
}

.pricing-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    width: 100%;
}

.plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: rgba(255, 247, 231, 0.94);
    border: 1px solid rgba(43, 46, 49, 0.1);
    border-radius: 1.25rem;
    padding: 2rem 1.75rem;
    box-shadow: 0 10px 30px rgba(43, 46, 49, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.plan-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 45px rgba(43, 46, 49, 0.25);
}

.plan-card.featured {
    border-color: #ef4467;
    box-shadow: 0 18px 45px rgba(239, 68, 103, 0.28);
}

/* "Coming soon" locked plans / cards */
.plan-locked,
.pricing-locked {
    position: relative;
    overflow: hidden;
}

.coming-soon-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    background: rgba(255, 247, 231, 0.4);
    z-index: 4;
}

.coming-soon-label {
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff7e7;
    background: #ef4467;
    padding: 0.4rem 1rem;
    border-radius: 2rem;
    box-shadow: 0 4px 12px rgba(43, 46, 49, 0.25);
}

.plan-placeholder {
    color: rgba(43, 46, 49, 0.55);
}

.plan-badge {
    position: absolute;
    top: -0.8rem;
    left: 50%;
    transform: translateX(-50%);
    background: #ef4467;
    color: #fff7e7;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.3rem 0.8rem;
    border-radius: 2rem;
    white-space: nowrap;
}

.plan-name {
    font-size: 1.4rem;
    font-weight: 800;
    margin: 0 0 0.75rem;
    color: #2b2e31;
}

.plan-price {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
}

.plan-price-amount {
    font-size: 2.2rem;
    font-weight: 800;
    color: #2b2e31;
}

.plan-price-period {
    font-size: 0.95rem;
    color: #2b2e31;
    opacity: 0.7;
}

.plan-price-annual {
    font-size: 0.85rem;
    opacity: 0.7;
    margin-top: 0.25rem;
}

.plan-desc {
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0.9rem 0 1.1rem;
    color: #2b2e31;
    opacity: 0.85;
}

.plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}

.plan-features li {
    position: relative;
    padding-left: 1.5rem;
    font-size: 0.95rem;
    line-height: 1.4;
    color: #2b2e31;
}

.plan-features li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 0.1rem;
    color: #ef4467;
    font-size: 0.75rem;
}

.plan-cta {
    display: block;
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: 0.6rem;
    padding: 0.8rem 1rem;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    background: #2b2e31;
    color: #fff7e7;
    transition: background 0.2s ease, color 0.2s ease;
}

.plan-card.featured .plan-cta {
    background: #ef4467;
}

.plan-cta:hover {
    background: #ef4467;
    color: #fff7e7;
}

.pricing-extra {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
    width: 100%;
}

.pricing-extra-item,
.pricing-earn {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    background: rgba(255, 247, 231, 0.96);
    border: 1px solid rgba(43, 46, 49, 0.12);
    border-radius: 1rem;
    padding: 1.1rem 1.4rem;
    max-width: 480px;
}

.pricing-extra-item i,
.pricing-earn i {
    color: #ef4467;
    font-size: 1.3rem;
    margin-top: 0.15rem;
}

.pricing-extra-title,
.pricing-earn-title {
    display: block;
    font-weight: 700;
    font-size: 1rem;
    color: #2b2e31;
}

.pricing-extra-desc,
.pricing-earn-desc {
    display: block;
    font-size: 0.9rem;
    line-height: 1.45;
    color: #2b2e31;
    opacity: 0.8;
}

.pricing-earn {
    background: #fff7e7;
    border-color: rgba(239, 68, 103, 0.55);
    box-shadow: 0 8px 24px rgba(43, 46, 49, 0.18);
    max-width: 620px;
}

.pricing-earn .pricing-earn-desc {
    opacity: 1;
}

.pricing-note {
    font-size: 0.9rem;
    color: #2b2e31;
    opacity: 0.8;
    text-align: center;
    margin: 0;
}

.pricing-terms-link,
.terms-meta {
    color: #ef4467;
}

.pricing-terms-link {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.terms-meta {
    font-size: 0.85rem;
    font-style: italic;
    margin-top: -0.5rem;
    opacity: 0.8;
}

@media (max-width: 768px) {
    .pricing-section {
        padding: 4rem 1rem 5rem;
        gap: 2.5rem;
    }
}

/* Footer styles */
.footer {
    position: relative;
    width: 100%;
    padding: 0.5rem;
    background-color: #2b2e31;
    color: #fff7e7;
    text-align: center;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.social-links {
    display: flex;
    gap: 1rem;
    margin-left: 2rem;
}

.social-links a,
.social-links .footer-icon-button {
    color: #fff7e7;
    font-size: 1.5rem;
    width: auto;
    height: 3rem;
    display: inline-block;
    text-align: center;
    line-height: 3rem;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.3s ease;
}

.social-links a:hover,
.social-links .footer-icon-button:hover {
    color: #ef4467;
    background-color: transparent;
}

.about-section {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
    margin-right: 2rem;
    color: #fff7e7;
}

.about-section .about-text {
    margin: 0;
    color: #fff7e7;
    text-align: right;
    font-size: 0.9rem;
}

.footer-links {
    display: flex;
    gap: 1rem;
}

.footer-link {
    background: none;
    border: none;
    color: #fff7e7;
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.2s ease;
}

.footer-link:hover {
    color: #ef4467;
}

/* ----- INFO MODAL (About / Privacy) ----- */
.info-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(43, 46, 49, 0.55);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    padding: 1.5rem;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.info-modal-overlay.visible {
    opacity: 1;
}

/* Layer the Terms/Privacy popups above the registration overlay (z-index 10000)
   when they are opened from within the sign-up flow. */
.info-modal-overlay.info-modal-overlay--topmost {
    z-index: 10050;
}

.info-modal {
    position: relative;
    background: #fff7e7;
    color: #2b2e31;
    width: 100%;
    max-width: 560px;
    max-height: 85vh;
    overflow-y: auto;
    border-radius: 0;
    box-shadow: 0 20px 60px rgba(43, 46, 49, 0.4);
    transform: translateY(1.5rem);
    transition: transform 0.25s ease;
}

.info-modal-overlay.visible .info-modal {
    transform: translateY(0);
}

/* Shared, discrete close crossmark used by the credits, signup and login
   popups. Consistent placement, small footprint, colour-only hover. */
.info-modal-close,
.reg-close,
.popup-close {
    position: absolute;
    top: 0.85rem;
    right: 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s ease;
}

.info-modal-close:hover,
.reg-close:hover,
.popup-close:hover {
    color: #ef4467;
    background: none;
}

.info-modal-close {
    color: #2b2e31;
}

.info-modal-body {
    padding: 1.6rem 2.25rem 2.25rem;
}

.info-modal-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    min-height: 1.6rem;
    padding-right: 2rem;
    margin-bottom: 1.25rem;
}

.info-modal-header h2 {
    line-height: 1.6rem;
    margin: 0;
}

.info-modal-logo {
    width: 3rem;
    height: auto;
}

.info-modal-body h2 {
    font-size: 1.75rem;
    font-weight: 800;
    margin: 0;
    color: #2b2e31;
}

.info-modal-body h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 1.5rem 0 0.5rem;
    color: #2b2e31;
}

.info-modal-body p {
    font-size: 1rem;
    line-height: 1.6;
    margin: 0 0 0.75rem;
    color: #2b2e31;
}

.info-modal-body a {
    color: #ef4467;
    font-weight: 600;
}

.info-modal-placeholder {
    font-style: italic;
    opacity: 0.7;
}

.info-modal-list {
    margin: 0 0 0.75rem;
    padding-left: 1.25rem;
    line-height: 1.6;
}

.info-modal-list li {
    margin-bottom: 0.4rem;
}

.info-modal-actions {
    margin-top: 1.75rem;
    display: flex;
    justify-content: flex-end;
}

/* Cookie preference rows */
.cookie-pref-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 0;
    border-top: 1px solid rgba(43, 46, 49, 0.12);
}

.cookie-pref-label {
    display: flex;
    flex-direction: column;
}

.cookie-pref-title {
    font-weight: 700;
    font-size: 1rem;
}

.cookie-pref-desc {
    font-size: 0.85rem;
    opacity: 0.75;
}

/* Toggle switch */
.cookie-switch {
    position: relative;
    display: inline-block;
    width: 3rem;
    height: 1.6rem;
    flex-shrink: 0;
}

.cookie-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.cookie-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: #c9c3b4;
    border-radius: 1.6rem;
    transition: background 0.25s ease;
}

.cookie-slider::before {
    content: "";
    position: absolute;
    height: 1.2rem;
    width: 1.2rem;
    left: 0.2rem;
    bottom: 0.2rem;
    background: #fff7e7;
    border-radius: 50%;
    transition: transform 0.25s ease;
}

.cookie-switch input:checked + .cookie-slider {
    background: #ef4467;
}

.cookie-switch input:checked + .cookie-slider::before {
    transform: translateX(1.4rem);
}

.cookie-switch input:disabled + .cookie-slider {
    opacity: 0.65;
    cursor: not-allowed;
}

/* ----- COOKIE CONSENT BANNER ----- */
.cookie-banner {
    position: fixed;
    left: 1.5rem;
    right: 1.5rem;
    bottom: 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
    background: #2b2e31;
    color: #fff7e7;
    border-radius: 1rem;
    box-shadow: 0 15px 45px rgba(43, 46, 49, 0.45);
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    z-index: 2500;
    transform: translateY(150%);
    transition: transform 0.4s ease;
}

.cookie-banner.visible {
    transform: translateY(0);
}

.cookie-banner-text {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
}

.cookie-banner-icon {
    color: #ef4467;
    font-size: 1.4rem;
    margin-top: 0.15rem;
}

.cookie-banner-text p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #fff7e7;
}

.cookie-inline-link {
    background: none;
    border: none;
    color: #ef4467;
    font-size: 0.95rem;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cookie-banner-actions {
    display: flex;
    gap: 0.75rem;
    flex-shrink: 0;
}

.cookie-btn {
    border: none;
    border-radius: 0.5rem;
    padding: 0.65rem 1.1rem;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.1s ease;
    white-space: nowrap;
}

.cookie-btn:active {
    transform: translateY(1px);
}

.cookie-btn-primary {
    background: #ef4467;
    color: #fff7e7;
}

.cookie-btn-primary:hover {
    background: #d63659;
}

.cookie-btn-secondary {
    background: transparent;
    color: #fff7e7;
    border: 1px solid rgba(255, 247, 231, 0.5);
}

.cookie-btn-secondary:hover {
    border-color: #ef4467;
    color: #ef4467;
}

@media (max-width: 768px) {
    .cookie-banner {
        flex-direction: column;
        align-items: stretch;
    }
    .cookie-banner-actions {
        flex-wrap: wrap;
    }
    .cookie-btn {
        flex: 1;
    }
}

/* ----- MAILCHIMP ----- */


.mailchimp-form {
    position: relative;
    z-index: 20;
    margin-bottom: 2rem;
    margin-top: 2rem;
    justify-content: center;
    align-items: center;
    color: #2b2e31;
    width: 100%;
    margin: 0px 20%;
    margin-bottom: 4rem;
    margin-top: 4rem;
}

#shell {
    background: #2b2e3100;
    padding: 0;
    z-index: 20;
    margin-top: 2rem;
}

#indicates-required {
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

#mc_embed_signup_scroll .h2 {
    font-size: 2rem;
    font-weight: bold;
    /* margin-bottom: 0.2rem; */
    color: #2b2e31;
    justify-content: center;
    margin: 0;
}

#mc_embed_signup_scroll .p {
    font-size: 1rem;
    margin-bottom: 5px;
    color: #2b2e31;
    justify-content: center;
}

#mc_embed_shell {
    z-index: 20;

}

#mc_embed_signup {
    background: #fff7e700;
    padding: 0;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    z-index: 20;
}

/* Label Styles */
#mc_embed_signup label {
    display: block;
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    background: #2b2e3100;
    color: #2b2e31;
}

#mc-field-group {
    background: #fff7e700;
    margin-top: 0px;
}

/* Input Field Styles */
#mc_embed_signup input[type="email"],
#mc_embed_signup input[type="text"] {
    width: 100%;
    padding: 1rem;
    font-size: 1rem;
    background: #fff7e7;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    box-sizing: border-box;
}

#mc-embedded-subscribe-form.validate {
    background: #2b2e3100;
}

#mc_embed_signup {
    background: #2b2e3100;
}

.input {
    background: #fff7e7;
}


#mc_embed_signup input[type="email"]:focus,
#mc_embed_signup input[type="text"]:focus {
    border-color: #2b2e31; 
    outline: none; 
}

/* Submit Button Styles */
#mc_embed_signup input[type="submit"] {
    background-color: #fff7e7;
    color: #ef4467;
    border: none;
    padding: 1rem;
    font-size: 1rem;
    cursor: pointer;
    width: 30%;
    justify-content: center;
    transition: background-color 0.3s ease;
    box-shadow: 0 2px 5px #2b2e31;
    font-weight: bold;
}

#mc_embed_signup input[type="submit"]:hover {
    background-color: #ef4467;
    color: #fff7e7;
}

#mc_embed_signup .mce_inline_error {
    color: #ef4467;
    font-size: 1rem;
    margin-bottom: 10px;
}

#mc_embed_signup .mce_success_msg {
    color: #2ecc71; 
    font-size: 1rem;
}

#mc_embed_signup .mc-field-group {
    margin-bottom: 1rem;
    background-color: #2b2e3100;
}

#mc_embed_signup .mc-field-group input[type="checkbox"] {
    margin-right: 0.5rem;
}

#mc_embed_signup .mc-field-group label {
    font-size: 1rem;
}

/* Media Queries for Mobile */
@media (max-width: 768px) {
    .main-content {
        top: 10%;
    }

    .landing-logo {
        width: 70vw;
    }

    .landing-site-name {
        font-size: 3rem;
    }

    .landing-headline {
        font-size: 1rem;
    }

    .sales-section {
        padding: 3rem 1rem 4rem;
        gap: 2.5rem;
    }

    .sales-heading {
        font-size: 2rem;
    }

    .sales-subheading {
        font-size: 1.05rem;
    }

    .sales-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .footer {
        flex-direction: column;
        gap: 0.75rem;
    }

    .social-links {
        margin-left: 0;
    }

    .about-section {
        align-items: center;
        margin-right: 0;
    }

    .about-section .about-text {
        text-align: center;
    }
}

/* ----- PROFILE ICON AND MENU ----- */
.profile-icon {
    position: fixed;
    top: 1rem;
    right: 1rem;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    z-index: 1000;
    /* overflow: visible; */
    box-shadow: 0 2px 5px #2b2e31;
}

.profile-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Initials fallback shown in place of a profile picture when the user hasn't
   set one (or removed it). Cream circle with dark initials. */
.avatar-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: #fff7e7;
    color: #2b2e31;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1;
    user-select: none;
}

.profile-icon .avatar-initials {
    font-size: 1.15rem;
}

/* Profile settings page avatar (picture or initials) */
.profile-avatar-wrap {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    border: 3px solid #fff7e7;
    margin: 0 auto;
}

.profile-avatar-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-avatar-wrap .avatar-initials {
    font-size: 2.4rem;
}

.remove-photo-btn {
    display: none;
    margin-top: 10px;
    background: transparent;
    border: none;
    color: #fff7e7;
    font-size: 0.85rem;
    cursor: pointer;
    text-decoration: underline;
    opacity: 0.85;
}

.remove-photo-btn:hover {
    opacity: 1;
    color: #ef4467;
}

.profile-menu {
    display: none;
    position: absolute;
    overflow: visible;
    top: 75px;
    right: 20px;
    color: #2b2e31;
    background-color: #fff7e7;
    box-shadow: 0 2px 5px #2b2e31;
    border-radius: 0px;
    z-index: 1000;
    width: 130px;
    cursor: pointer;
    transition: opacity 0.3s ease-in-out;
    /* opacity: 0; */
    padding: 10px 0;
    pointer-events: none;
}

.profile-menu.visible {
    display: block;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.profile-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.profile-menu ul li {
    padding: 10px 16px;
    text-align: left;
}

.profile-menu ul li:hover {
    color: #ef4467;
    font-weight: bold;
}

.profile-menu ul li a {
    text-decoration: none;
    /* color: #2b2e31; */
    display: block;
}

.profile-menu ul li a:hover {
    color: #ef4467;
    font-weight: bold;
}

@media screen and (max-width: 600px) {
    .profile-menu {
        right: auto;
        left: 0;
        width: 100%;
    }

    .profile-icon {
        width: 40px;
        height: 40px;
    }
}

/* ----- MAILCHIMP ----- */


.mailchimp-form {
    position: relative;
    z-index: 20;
    margin-bottom: 150px;
    margin-top: 150px;
    justify-content: center;
    align-items: center;
    color: #fff7e7;
}

#shell {
    background: #2b2e3100; /* Light background color */
    padding: 0px;
    z-index: 20;
    margin-top: 50px;
}

#indicates-required {
    font-size: 12px;
    /* color: #fff7e7; */
    margin-bottom: 5px;
}

#mc_embed_signup_scroll .h2 {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 5px;
    color: #fff7e7;
}

#mc_embed_signup_scroll .p {
    font-size: 14px;
    /* font-weight: bold; */
    margin-top:5px;
    margin-bottom: 5px;
    color: #fff7e7;
}

#mc_embed_shell {
    z-index: 20;

}

#mc_embed_signup {
    background: #2b2e3100;
    padding: 0px;
    /* border-radius: 10px; */
    /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);  */
    width: 100%;
    max-width: 500px;
    margin: 0 auto; /* Center form on page */
    z-index: 20;
}

/* Label Styles */
#mc_embed_signup label {
    display: block;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px;
    background: #2b2e3100;
    color: #fff7e7; /* Darker label color */
}

#mc-field-group {
    background: #fff7e700;
    margin-top: 0px;
}

/* Input Field Styles */
#mc_embed_signup input[type="email"],
#mc_embed_signup input[type="text"] {
    width: 100%;
    padding: 10px;
    font-size: 14px;
    background: #fff7e7;
    /* border: 1px solid #ccc;  */
    border-radius: 5px;
    margin-bottom: 10px;
    box-sizing: border-box;
    /* transition: border-color 0.3s ease; */
}

#mc-embedded-subscribe-form.validate {
    background: #2b2e3100;
}

#mc_embed_signup {
    background: #2b2e3100;
}

.input {
    background: #fff7e7;
}


#mc_embed_signup input[type="email"]:focus,
#mc_embed_signup input[type="text"]:focus {
    border-color: #2b2e31;
    outline: none;
}

/* Submit Button Styles */
#mc_embed_signup input[type="submit"] {
    background-color: #ef4467;
    color: #fff7e7;
    border: none;
    padding: 12px 20px;
    font-size: 16px;
    cursor: pointer;
    width: 30%;
    transition: background-color 0.3s ease;
}

#mc_embed_signup input[type="submit"]:hover {
    background-color: #fff7e7;
    color: #ef4467;
}

#mc_embed_signup .mce_inline_error {
    color: #ef4467;
    font-size: 12px;
    margin-bottom: 10px;
}

#mc_embed_signup .mce_success_msg {
    color: #2ecc71;
    font-size: 14px;
}

/* Optional: Add Custom Styles for GDPR Consent Fields */
#mc_embed_signup .mc-field-group {
    margin-bottom: 15px;
    background-color: #2b2e3100;
}

/* GDPR consent checkbox styles */
#mc_embed_signup .mc-field-group input[type="checkbox"] {
    margin-right: 5px;
}

#mc_embed_signup .mc-field-group label {
    font-size: 13px;
}

/*  Profile formatting */

/* General Styling for Display Container */
#displayContainer {
    width: 100vw;
    height: 100vh;
    padding: 20px;
    background-color: #fff7e7;
    border-radius: 8px;
    box-shadow: 0 2px 5px #2b2e311c;
}

/* Profile Image Styling */
.profile-img {
    width: 95px;
    height: 95px;
    border-radius: 50%;
    object-fit: cover;
    cursor: pointer;
    pointer-events: auto;
    border: 2px solid #ccc;
    z-index: 1000;
}

.profile-img:hover {
    border-color: #ef4467;
}

/* Input fields for editable profile data */
/* input[type="text"], input[type="email"], input[type="password"], textarea {
    width: 100%;
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
 background-color: #fff; 
    box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.1);
} */

/* Save Message Styling */
.save-message {
    color: #fff7e7;
    font-size: 18px;
    font-weight: bold;
    display: inline;
    margin-left: 10px;
    z-index: 1000;
}

.confirmation-message {
    color: #fff7e7;
    font-size: 18px;
    font-weight: bold;
    display: inline;
    margin-left: 10px;
    z-index: 1000;
}

/* Button Styling */
button {
    padding: 10px 15px;
    font-size: 16px;
    background-color: #ef4467;
    transition: background-color 0.3s ease;
    color: #fff7e7;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 10px;
}

button:hover {
    background-color: #fff7e7;
    transition: background-color 0.3s ease;
    color: #ef4467;
}

/* Gallery Item Styling */
.gallery-item {
    width: 200px;
    height: 200px;
    background-color: #f0f0f0;
    background-size: cover;
    background-position: center;
    border: 2px solid #ccc;
    border-radius: 8px;
    margin: 10px;
    position: relative;
    display: inline-block;
    vertical-align: top;
}

/* Favorite Button Styling */
.favorite-btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff7e7;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 14px;
}

/* ===== Settings Page ===== */
.settings-container {
    color: #fff7e7;
    width: 100%;
    max-width: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-sizing: border-box;
}

.settings-header {
    margin-bottom: 4px;
}

.settings-header h2 {
    color: #fff7e7;
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 6px 0;
}

.settings-header p {
    color: rgba(255, 247, 231, 0.6);
    font-size: 14px;
    margin: 0;
}

.settings-section {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 20px 24px;
}

.settings-section h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff7e7;
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 16px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.settings-section h3 i {
    font-size: 15px;
}

/* A single setting row: label/description on the left, control on the right */
.setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
}

.setting-row + .setting-row {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.setting-row:first-of-type {
    padding-top: 0;
}

.setting-row:last-of-type {
    padding-bottom: 0;
}

.setting-row-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.setting-row-text .setting-label {
    color: #fff7e7;
    font-size: 14px;
    font-weight: 600;
    margin: 0;
}

.setting-row-text .setting-description {
    color: rgba(255, 247, 231, 0.55);
    font-size: 12px;
    margin: 0;
}

/* Toggle switch */
.settings-toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.settings-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.settings-toggle .slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.18);
    border-radius: 24px;
    transition: background-color 0.25s ease;
}

.settings-toggle .slider::before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: #fff7e7;
    border-radius: 50%;
    transition: transform 0.25s ease;
}

.settings-toggle input:checked + .slider {
    background-color: #ef4467;
}

.settings-toggle input:checked + .slider::before {
    transform: translateX(20px);
}

.settings-toggle input:focus-visible + .slider {
    box-shadow: 0 0 0 2px rgba(239, 68, 103, 0.5);
}

/* Storage usage */
.storage-usage-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    color: #fff7e7;
    font-size: 13px;
    margin-bottom: 10px;
}

.storage-usage-label .storage-percent {
    color: rgba(255, 247, 231, 0.6);
    font-size: 12px;
}

.storage-bar {
    width: 100%;
    height: 10px;
    background-color: rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    overflow: hidden;
}

.storage-bar-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.4s ease;
}

/* Footer / actions */
.settings-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 4px;
}

.settings-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    background-color: #ef4467;
    color: #fff7e7;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: background-color 0.25s ease, transform 0.1s ease;
}

.settings-back-btn:hover {
    background-color: #d83a59;
}

.settings-back-btn:active {
    transform: translateY(1px);
}

/* Name and email container layout */
.name-container {
    display: flex;
    flex-direction: row;
    justify-content: left;
    border: 0px;
    gap: 10px;
    margin-bottom: 10px;
    width: 100%;
}

.name-email-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 0px;
}

/* Editable fields (first name, last name, email) */
.editable-field {
    width: 100%;
    padding: 8px 12px;
    background-color: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 4px;
    color: #fff7e7;
    font-size: 0.9em;
    transition: border-color 0.3s ease;
    box-sizing: border-box;
}

.editable-field:focus {
    border: none;
    outline: none;
}

.tagline-text-area, .location-text-area, .company-text-area, .bio-text-area {
    width: 100%;
    resize: none;
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 8px 12px;
    font-size: 0.9em;
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff7e7;
    border-radius: 4px;
    transition: border-color 0.3s ease;
    box-sizing: border-box;
}

.tagline-text-area:focus, .location-text-area:focus, .company-text-area:focus, .bio-text-area:focus {
    border-color: #ef4467;
    outline: none;
}

.tagline-text-area, .location-text-area, .company-text-area {
    height: 39px;
}

.bio-text-area {
    height: 40px;
}

.sidebar-field {
    margin-bottom: 5px;
}

.sidebar-field label {
    display: block;
    color: #fff7e7;
    font-size: 0.9em;
    font-weight: bold;
    margin-bottom: 5px;
}

/* Profile container adjustments */
.profile-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    height: calc(100vh - 120px); /* Adjust based on your header/footer heights */
    overflow-y: auto;
    padding-right: 10px;
}

/* Left column adjustments */
.left-column {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-height: 100%;
    overflow-y: auto;
    padding-right: 10px; /* Add padding for scrollbar */
}

/* Additional Info Fields container */
.additional-fields {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Profile view specific styles */
.profile-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Main profile grid container */
.profile-view .display-container > div[style*="grid"] {
    height: 100% !important; /* Account for padding */
    overflow: hidden !important;
}

/* Profile left column - ensure it can scroll */
.profile-view .left-column {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 10px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 247, 231, 0.3) transparent;
}

.profile-view .left-column::-webkit-scrollbar {
    width: 6px;
}

.profile-view .left-column::-webkit-scrollbar-track {
    background: transparent;
}

.profile-view .left-column::-webkit-scrollbar-thumb {
    background-color: rgba(255, 247, 231, 0.3);
    border-radius: 3px;
}

/* Profile right column - groups section */
.profile-view .groups-container {
    max-height: calc(100% - 100px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 247, 231, 0.3) transparent;
}

.profile-view .groups-container::-webkit-scrollbar {
    width: 6px;
}

.profile-view .groups-container::-webkit-scrollbar-track {
    background: transparent;
}

.profile-view .groups-container::-webkit-scrollbar-thumb {
    background-color: rgba(255, 247, 231, 0.3);
    border-radius: 3px;
}

/* Popup container styles */
.popup-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.name-prompt-container .fa-arrow-left {
    font-size: 4rem;
}

/* Popup styles */
/* .popup {
    background-color: #fff7e7;
    padding: 20px;
    border-radius: 10px;
    width: 300px;
    text-align: center;
    position: relative;
    box-shadow: 0px 0px 15px #2b2e31;
} */

/* Return arrow styling */

/* Input field styles */
.popup input {
    width: 100%;
    padding: 1rem;
    margin: 1rem 0;
    border: 0px solid #ccc;
    border-radius: 0;
}

/* Log in button styles */
.popup-login-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: #2b2e31;
    color: #ef4467;
    position: relative;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    width: 20rem;
    max-width: 100%;
    padding: 2rem 1.75rem;
    border: none;
    border-radius: 0;
    transition: background-color 0.3s ease;
}

.popup-close {
    color: #fff7e7;
}

.popup-login-message {
    width: 100%;
    box-sizing: border-box;
    margin: 0.25rem 0 0.5rem;
    padding: 0.55rem 0.7rem;
    font-size: 0.82rem;
    line-height: 1.4;
    text-align: center;
    border-radius: 3px;
}
.popup-login-message-error {
    background: rgba(239, 68, 103, 0.15);
    color: #ff9bb0;
    border: 1px solid #ef4467;
}
.popup-login-message-info {
    background: rgba(255, 247, 231, 0.1);
    color: #fff7e7;
    border: 1px solid rgba(255, 247, 231, 0.3);
}

.login-submit {
    background-color: #fff7e7;
    box-shadow: 0 2px 5px #2b2e31;
    transition: background-color 0.3s ease;
    border-radius: 0;
    color: #ef4467;
    padding: 0.5rem 1rem;
    cursor: pointer;
    font-size: 1rem;
    font-weight: bold;
    margin-top: 1rem;
}

.login-submit:hover {
    background-color: #ef4467;
    box-shadow: 0 2px 5px #2b2e31;
    transition: background-color 0.3s ease;
    color: #fff7e7;
}

.return-arrow {
    position: absolute;
    top: 1rem;
    left: 1rem;
    cursor: pointer;
    color: #fff7e7;
    font-size: 2rem;
}

.return-arrow:hover {
    color: #ef4467;
}

.logo-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 0;
}

.logo {
    width: 10rem;
    height: auto;
    margin-bottom: 2rem;
}

.logo-name {
    font-size: 2rem;
    font-weight: bold;
    color: #fff7e7;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}

#popup-email {
    padding: 0.5rem;
    font-size: 1rem;
    background: #fff7e7;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    box-sizing: border-box;
}

#popup-email:focus {
    border-color: #ef4467; 
    outline: none; 
}

#popup-password {
    padding: 0.5rem;
    font-size: 1rem;
    background: #fff7e7;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    box-sizing: border-box;
}

#popup-password:focus {
    border-color: #ef4467; 
    outline: none; 
}

/* =============================================
   Name Prompt Overlay & Container
   ============================================= */

/* Radial fade-in: circle expands from center */
@keyframes overlayFadeIn {
    0% {
        clip-path: circle(0% at 50% 50%);
        opacity: 0;
    }
    100% {
        clip-path: circle(150% at 50% 50%);
        opacity: 1;
    }
}

/* Radial fade-out: circle contracts to center */
@keyframes overlayFadeOut {
    0% {
        clip-path: circle(150% at 50% 50%);
        opacity: 1;
    }
    100% {
        clip-path: circle(0% at 50% 50%);
        opacity: 0;
    }
}

/* Content scale-in for the input container */
@keyframes promptScaleIn {
    0% {
        opacity: 0;
        transform: scale(0.85);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Content scale-out for the input container */
@keyframes promptScaleOut {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0.85);
    }
}

/* Full-screen darkened overlay */
.name-prompt-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.55);
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: overlayFadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Closing state – plays the reverse radial animation */
.name-prompt-overlay.closing {
    animation: overlayFadeOut 0.45s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Styles for the name prompt pop-up */
.name-prompt-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #ef4467;
    position: relative;
    width: min(70rem, 90vw);
    padding: 1rem;
    border: none;
    border-radius: 0;
    animation: promptScaleIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s both;
}

/* Closing state for the container content */
.name-prompt-overlay.closing .name-prompt-container {
    animation: promptScaleOut 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.name-prompt {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #2b2e31;
    background: #2b2e31;
    color: #fff7e7;
    font-size: 3.5rem;
    padding: 1.5rem;
    z-index: 99999;
}

.name-prompt-field {
    padding: 0.5rem;
    font-size: 2.5rem;
    background: #fff7e700;
    margin-bottom: 1rem;
    width: auto;
    box-sizing: border-box;
    border: none;
    color: #fff7e7;
    text-align: center;
}
    
.name-prompt-field:focus {
    border-color: #ef4467; 
    outline: none; 
}

.name-prompt-hint {
    font-size: 0.8rem;
    color: #fff7e7;
    opacity: 0.7;
    margin-top: 0.5rem;
}

/* Overlay styles for the record container */
.overlay-container {
    position: absolute;
    top: 10px;
    left: 10px;
    color: #fff7e7;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 10px;
    border-radius: 5px;
}

.overlay-info {
    display: block;
    margin-bottom: 5px;
}

/* Privacy checkbox styles */
.privacy-checkbox {
    margin-left: 10px;
    margin-right: 5px;
}

.search-container {
    display: flex;
    flex-direction: column;
    padding: 0px;
    /* background: #2b2e3141;
    backdrop-filter: blur(10px); */
    border-radius: 5px;
    margin-bottom: 0px;
}

.search-input {
    padding: 8px 16px;
    margin-bottom: 5px;
    font-size: 1rem;
    border: 1px solid #fff7e7;
    background-color: #2b2e31;
    color: #fff7e7;
    border-radius: 100px;
}

.search-button {
    padding: 8px;
    background-color: #ef4467;
    color: #fff7e7;
    border: none;
    cursor: pointer;
    border-radius: 100px;
    font-size: 18px;
    
}

.search-button:hover {
    background-color: #fff7e7;
    color: #ef4467;
}

/* Circular "reviewed only" filter button overlaid on the search bar's
   rounded right side. Visibility/position are controlled in searchBar.js. */
.review-filter-btn {
    position: absolute;
    z-index: 5;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: #ef4467;
    color: #fff7e7;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.review-filter-btn i {
    font-size: 0.95rem;
    line-height: 1;
}

.review-filter-btn:hover {
    transform: scale(1.05);
}

.review-filter-btn.active {
    background-color: #fff7e7;
    color: #ef4467;
}

/* When the reviewed-only filter is active, hide non-reviewed cards in galleries */
body.reviewed-filter-active .gallery-card:not(.has-reviewed-badge) {
    display: none;
}

.results-container {
    margin-top: 10px;
    max-height: 300px;
    overflow-y: auto;
}

/* Search-in-progress spinner (on-brand, matches gallery/map ring) */
.search-spinner-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 0;
}

.search-spinner {
    width: 26px;
    height: 26px;
    border: 3px solid transparent;
    border-top: 3px solid #ef4467;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    flex: 0 0 auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.search-spinner-text {
    color: #fff7e7;
    font-size: 14px;
    letter-spacing: 0.3px;
}

.suggestion-item {
    padding: 5px;
    border-bottom: 1px solid #ef4467;
    cursor: pointer;
    color: #fff7e7;
}

.suggestion-item:hover {
    background-color: #ef4467;
    color: #fff7e7;
}

.tag-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    /* padding: 10px; */
    border-radius: 4px;
    margin-top: 10px;
    max-height: none;
    overflow: visible;
}

.tag-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    color: #fff7e7;
    font-size: 0.9em;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.tag-chip:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}

.tag-chip.selected {
    background: #ef4467;
    border-color: #ef4467;
}

.tag-suggestions-header {
    width: 100%;
    color: #fff7e7;
    font-size: 0.9em;
    font-weight: bold;
    margin-bottom: 8px;
}

.share-button {
    position: relative;
    cursor: pointer;
    font-size: 18px;
    color: #fff7e7;
    background-color: rgba(43, 46, 49, 0.6);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px #2b2e31;
}

.share-button:hover {
    color: #ef4467;
}

.sparkle {
    position: absolute;
    pointer-events: none;
    width: 5px;
    height: 5px;
    background: radial-gradient(circle, #ef4467, #fff7e700);
    border-radius: 50%;
    animation: sparkle-fade 600ms ease-out forwards;
    z-index: 1000;
}
  
@keyframes sparkle-fade {
    0% {
      opacity: 1;
      transform: scale(0.1);
    }
    100% {
      opacity: 0;
      transform: scale(3);
    }
}

.fade-transition {
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
}

.fade-inside {
    opacity: 1;
}

.map-grip {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1000;
    cursor: grab;
    user-select: none;
    color: #fff7e7;
    font-size: 40px;
    padding: 8px;
    border-radius: 4px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
    transition: all 0.3s ease;
}

.map-grip:hover {
    color: #ef4467;
}

.map-grip:active {
    cursor: grabbing;
}

/* React Flow Node Styles */
.react-flow__node {
    display: flex;
    align-items: center;
    padding: 8px;
    border-radius: 50px;
    box-shadow: 0 2px 5px #2b2e31;
    font-size: 14px;
    border: none !important;
    min-width: 180px;
    width: fit-content;
    height: 48px;
    background: none !important;
    position: relative;
}

.react-flow__node-result {
    min-width: auto !important;
    width: 64px !important;
    height: 64px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    justify-content: center;
}

.react-flow__node-material {
    background-color: #f4d88c !important;
    color: #2b2e31;
}

.react-flow__node-method {
    background-color: #f4b08c !important;
    color: #2b2e31;
}

.react-flow__node-species {
    background-color: #f4d88c !important;
    color: #2b2e31;
}

.react-flow__node-result {
    background-color: #fff3e0 !important;
    color: #2b2e31;
}

/* Edge styles */
.react-flow__edge path {
    stroke: #fff7e7 !important;
    stroke-width: 2;
}

.react-flow__handle {
    width: 8px;
    height: 8px;
    background-color: #2b2e31;
    border: 2px solid #fff7e7;
}

.react-flow__handle-top {
    top: -4px;
}

.react-flow__handle-bottom {
    bottom: -4px;
}

.node-content {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0;
}

.react-flow__node-result .node-content {
    justify-content: center;
    align-items: center;
}

.node-emoji-container {
    width: 48px;
    height: 48px;
    background-color: #fff7e7 !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: absolute;
    left: 0;
    transform: translateX(-1px);
}

.react-flow__node-result .node-emoji-container {
    width: 100%;
    height: 100%;
    position: static;
    transform: none;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #59bd7a !important;
}

.node-emoji {
    font-size: 22px;
}

.react-flow__node-result .node-emoji {
    font-size: 32px;
}

.node-label {
    flex: 1;
    text-align: center;
    font-weight: 500;
    padding-left: 56px;
    padding-right: 16px;
    white-space: nowrap;
}

.react-flow__edge.animated path {
    stroke-dasharray: 5;
    animation: dashdraw 0.5s linear infinite;
}

@keyframes dashdraw {
    to { stroke-dashoffset: -10; }
}

.canvas-controls {
    position: absolute;
    bottom: 45px;
    left: 10px;
    display: flex;
    gap: 20px;
    z-index: 10;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px #2b2e31;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.canvas-controls i {
    font-size: 36px;
    color: #fff7e7;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 4px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: left;
}

.canvas-controls i:hover {
    color: #ef4467;
}

.canvas-grip {
    position: absolute !important;
    top: 5px !important;
    right: 10px !important;
    font-size: 40px;
    color: #fff7e7;
    cursor: grab;
    z-index: 5;
    padding: 8px;
    border-radius: 4px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
}

.canvas-grip:hover,
.fa-grip.canvas-grip:hover {
    color: #ef4467 !important;
}

.canvas-grip:active,
.fa-grip.canvas-grip:active {
    cursor: grabbing !important;
}

.edit-permission-note {
    color: #fff7e7;
    font-size: 14px;
    opacity: 0.8;
    font-style: italic;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Node Creation Toolbar */
.node-toolbar {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
    background-color: #2b2e31;
    padding: 0px 20px;
    border-radius: 50px;
    box-shadow: 0 2px 5px #2b2e31;
    z-index: 1000;
    align-items: center;
}

.node-tool {
    font-size: 32px;
    cursor: grab;
    padding: 8px;
    border-radius: 50%;
    transition: all 0.2s ease;
    position: relative;
}

.node-tool:hover {
    transform: scale(1.1);
}

.node-tool-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #2b2e31;
    color: #fff7e7;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    margin-bottom: 5px;
}

.node-tool:hover .node-tool-tooltip {
    opacity: 1;
    visibility: visible;
}

.node-toolbar-sort {
    color: #fff7e7;
    font-size: 20px;
    cursor: pointer;
    margin-left: 15px;
    padding: 8px;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.node-toolbar-sort:hover {
    color: #ef4467;
    background-color: rgba(255, 255, 255, 0.1);
}

.draggable {
    cursor: move;
    user-select: none;
}

/* Image Gallery Styles - Exact match to PropertiesBar */
.image-gallery-container {
    margin-bottom: 16px;
    background: rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: background-color 0.2s ease;
    position: relative;
}

.image-gallery-container:hover {
    background: rgba(0, 0, 0, 0.3);
}

.image-gallery {
    position: relative;
    height: 220px;
    background: radial-gradient(circle, rgba(43, 46, 49, 0.4) 0%, rgba(33, 36, 39, 0.6) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    overflow: hidden;
}

.gallery-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.gallery-controls {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(43, 46, 49, 0.5);
    border-radius: 20px;
    z-index: 10;
    margin: 0;
}

.gallery-control {
    background: none;
    border: none;
    color: #fff7e7;
    font-size: 16px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.gallery-control:hover {
    background: rgba(255, 255, 255, 0.2);
}

.gallery-counter {
    color: #fff7e7;
    font-size: 12px;
    white-space: nowrap;
}

.recipe-overview {
    padding: 0;
}

.mini-map-container {
    width: 100%;
    margin-bottom: 20px;
    background: rgba(43, 46, 49, 0.8);
    border-radius: 8px;
    overflow: hidden;
}

.mini-map {
    width: 100%;
    height: 150px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-images-message,
.image-error-message,
.loading-map-message,
.map-error-message {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: #fff7e7;
    font-size: 14px;
}

.properties-footer-icons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 247, 231, 0.2);
}

.properties-footer-icons i,
.properties-footer-icons .custom-icon {
    font-size: 18px;
    color: rgba(255, 247, 231, 0.6);
    transition: color 0.3s ease, transform 0.3s ease;
    cursor: pointer;
}

/* Equal-width boxes so the middle (choro) icon is exactly centred and aligns
   with the sidebar grip handle. */
.properties-footer-icons > i,
.properties-footer-icons > .custom-icon {
    flex: 0 0 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.properties-footer-icons .custom-icon svg {
    color: inherit;
    fill: currentColor;
}

.properties-footer-icons i:hover,
.properties-footer-icons .custom-icon:hover {
    color: #ef4467;
    transform: scale(1.2);
}

.properties-footer-icons .fa-heart.fa-solid {
    color: #fff7e7;
}

.no-images-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: rgba(255, 247, 231, 0.7);
    font-size: 14px;
    text-align: center;
}

.no-images-message i {
    font-size: 24px;
    margin-bottom: 10px;
    opacity: 0.5;
}

/* React Flow Controls Positioning */
.react-flow__controls {
    position: absolute !important;
    left: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    bottom: auto !important;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 5;
}

.react-flow__panel {
    margin: 0px !important;
}

.react-flow__controls button {
    background-color: #2b2e31 !important;
    color: #fff7e7 !important;
    border: 1px solid #fff7e7 !important;
    width: 24px;
    height: 24px;
    cursor: pointer;
    border-radius: 2px;
}

.react-flow__controls button:hover {
    background-color: #fff7e7 !important;
    color: #2b2e31 !important;
}

/* Hide React Flow Minimap SVG only */
.react-flow__minimap-svg {
    display: none !important;
}

/* Properties Section Styling - Exact match to PropertiesBar */
.properties-section {
    padding: 0;
    color: #fff7e7;
    max-height: 80vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.properties-section::-webkit-scrollbar {
    width: 6px;
}

.properties-section::-webkit-scrollbar-track {
    background: rgba(255, 247, 231, 0.1);
    border-radius: 3px;
}

.properties-section::-webkit-scrollbar-thumb {
    background: rgba(255, 247, 231, 0.3);
    border-radius: 3px;
}

.properties-section::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 247, 231, 0.5);
}

.properties-category h3 {
    color: #fff7e7 !important;
    margin-top: 0;
    margin-bottom: 6px;
    font-size: 1em;
    font-weight: 400;
}

.sidebar-field-location label, 
.form-group label {
    display: block;
    color: #fff7e7 !important;
    margin-bottom: 8px;
    font-weight: 500;
    font-size: 0.95em;
}

.empty-category-message {
    color: rgba(255, 247, 231, 0.5) !important;
    font-style: italic;
    font-size: 0.9em;
    margin: 12px 0;
    text-align: center;
}

/* Featured Record Marker Animation */
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.featured-marker {
  z-index: 10000 !important;
}

.custom-choro-marker.featured-marker {
  animation: pulse 2s infinite;
}

/* Featured Record Infobox Styles */
.featured-record-infobox {
    width: 280px;
    min-height: 180px;
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0 8px 25px rgba(43, 46, 49, 0.3);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: visible;
    cursor: pointer;
    position: absolute;
    z-index: 15000 !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
}

.featured-record-infobox:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 35px rgba(43, 46, 49, 0.4);
}

/* Featured Record Marker Styles */
.featured-record-marker {
    z-index: 16000 !important;
}

/* Featured Record Marker Pulse Animation */
.featured-record-pulse {
    animation: featured-marker-pulse 2s ease-in-out infinite;
}

@keyframes featured-marker-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
    }
}

@keyframes subtle-pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* Featured Record Loading Overlay */
.featured-record-loading {
    background: transparent !important;
    backdrop-filter: none !important;
    z-index: 15001;
    border-radius: 20px;
    transition: opacity 0.3s ease;
}

.featured-record-content {
    position: relative;
    padding: 10px 15px 10px;
    background: linear-gradient(to bottom, rgba(239, 68, 102, 0.9) 0%, rgba(239, 68, 102, 0.3) 70%, rgba(0,0,0,0) 100%);
    flex: 1 1 auto;
    height: auto;
    min-height: 180px;
    box-sizing: border-box;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* When a record image is present, the gradient is applied (with the image) on
   the infobox itself - matching the gallery cards - so the content overlay must
   stay transparent and let the text sit just under the title. */
.featured-record-infobox.has-image .featured-record-content {
    background: transparent;
    justify-content: flex-start;
}

.featured-record-infobox.has-image .featured-record-metadata {
    margin-top: 8px;
}

.featured-record-controls,
.gallery-controls {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: row;
    gap: 8px;
    z-index: 10004;
    align-items: center;
    justify-content: center;
    /* Single shared background for all icons */
    background: rgba(43, 46, 49, 0.35);
    backdrop-filter: blur(8px);
    border-radius: 50px;
    padding: 0px 2px;
}

.featured-record-controls:hover,
.gallery-controls:hover {
    background: rgba(43, 46, 49, 0.8);
}

/* Remove separate choro icon positioning - now handled within controls */
.featured-record-choro-icon,
.gallery-choro-icon {
    cursor: pointer;
    transition: all 0.3s ease;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: 50%;
    /* Remove individual background - using shared container background */
}

.featured-record-choro-icon svg,
.gallery-choro-icon svg {
    width: 16px;
    height: 16px;
    fill: #fff7e7;
    transition: fill 0.3s ease;
}

.featured-record-choro-icon:hover,
.gallery-choro-icon:hover {
    transform: scale(1.1);
}

.featured-record-choro-icon:hover svg,
.gallery-choro-icon:hover svg {
    fill: #ef4467;
}

.featured-record-title {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 5px 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
    line-height: 1.3;
    letter-spacing: -0.5px;
}

/* When a reviewed badge sits in the top-right corner, keep the title clear of
   it so the text is never rendered behind the icon. */
.featured-record-infobox.has-reviewed-badge .featured-record-title {
    padding-right: 34px;
}

.featured-record-author {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 16px 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    font-weight: 400;
}

.featured-record-metadata {
    display: flex;
    flex-direction: column;
    gap: 0px;
    margin-top: auto;
}

.featured-species {
    font-style: italic;
    font-weight: 500;
    font-size: 14px;
    color: #fff7e7;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 1px 2px rgba(0, 0, 0, 0.8);
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    padding: 4px 8px;
    border-radius: 12px;
    backdrop-filter: blur(10px);
    display: inline-block;
    width: fit-content;
}

.featured-location {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #fff7e7;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 1px 2px rgba(0, 0, 0, 0.8);
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    padding: 4px 8px;
    border-radius: 12px;
    backdrop-filter: blur(10px);
    width: fit-content;
    margin-top: 4px;
}

/* Location icon is added via JavaScript now */

/* Reusable pill used on gallery cards for the "performed by" name and the
   record location. Matches the featured record's location pill. */
.gallery-meta-pill {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    font-size: 13px;
    color: #fff7e7;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 1px 2px rgba(0, 0, 0, 0.8);
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    padding: 4px 8px;
    border-radius: 12px;
    width: fit-content;
    margin-top: 4px;
    box-sizing: border-box;
    overflow: hidden;
}

.gallery-meta-pill span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gallery-meta-pill i {
    margin-right: 4px;
    flex-shrink: 0;
}

/* Featured record marker icon */
.featured-choro-icon {
    background: transparent !important;
    border: none !important;
    z-index: 2000 !important;
    overflow: visible !important;
}

.featured-choro-icon svg {
    overflow: visible;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Ensure star/choro marker points and strokes are never clipped by the icon container */
.leaflet-marker-icon svg,
.high-similarity-marker svg,
.custom-choro-marker svg,
.project-minimap-choro-marker svg {
    overflow: visible;
}

@keyframes featured-appear {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.featured-record-infobox {
    animation: featured-appear 0.4s ease-out;
}

/* Designs sidebar styles - coherent with rest of the website */
/* Removed designs-sidebar-content class - not needed */

.sidebar-search-container {
    margin-bottom: 20px;
}

.sidebar-search-input {
    width: 100%;
    padding: 10px 16px;
    font-size: 0.95rem;
    border: 1px solid rgba(255, 247, 231, 0.3);
    background-color: #2b2e31;
    color: #fff7e7;
    border-radius: 20px;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.sidebar-search-input:focus {
    outline: none;
    border-color: #ef4467;
    box-shadow: 0 0 0 2px rgba(239, 68, 103, 0.2);
}

.sidebar-search-input::placeholder {
    color: rgba(255, 247, 231, 0.6);
}

.sidebar-filter-list {
    margin-top: 20px;
}

.sidebar-filter-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    margin-bottom: 8px;
    background: rgba(255, 247, 231, 0.05);
    border: 1px solid rgba(255, 247, 231, 0.1);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #fff7e7;
    font-weight: 500;
    position: relative;
}

.sidebar-filter-item:hover {
    background: rgba(255, 247, 231, 0.1);
    border-color: rgba(239, 68, 103, 0.5);
    transform: translateX(2px);
}

.sidebar-filter-item.active {
    background: linear-gradient(135deg, #ef4467, #d63a5c);
    border-color: #ef4467;
    color: #fff7e7;
    box-shadow: 0 4px 8px rgba(239, 68, 103, 0.3);
}

.sidebar-filter-item i {
    margin-right: 12px;
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
}

.sidebar-filter-item span {
    flex: 1;
}

.sidebar-filter-add-btn {
    background: none;
    border: none;
    color: rgba(255, 247, 231, 0.6);
    font-size: 1rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: 0px;
}

.sidebar-filter-add-btn:hover {
    background: rgba(239, 68, 103, 0.2);
    color: #ef4467;
    transform: scale(1.1);
}

.sidebar-filter-item.active .sidebar-filter-add-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff7e7;
}

.tag-chips-container {
    margin: 15px 0;
    min-height: 0; /* Changed from 30px to 0 */
}

.tag-chips-container:empty {
    margin: 0; /* Remove margin when empty */
    min-height: 0;
    display: none; /* Hide completely when empty */
}

.tag-chip {
    display: inline-block;
    background: rgba(239, 68, 103, 0.2);
    color: #fff7e7;
    padding: 6px 12px;
    margin: 4px 4px 4px 0;
    border-radius: 16px;
    font-size: 0.85rem;
    border: 1px solid rgba(239, 68, 103, 0.4);
    cursor: pointer;
    transition: all 0.3s ease;
}

.tag-chip:hover {
    background: rgba(239, 68, 103, 0.3);
    border-color: #ef4467;
    transform: translateY(-1px);
}

.tag-chip.selected {
    background: #ef4467;
    border-color: #ef4467;
}

.featured-record-controls i,
.gallery-controls i {
    cursor: pointer;
    font-size: 1.1rem;
    padding: 4px;
    border-radius: 50%;
    color: #fff7e7;
    transition: all 0.3s ease;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Remove individual backgrounds - using shared container background */
    /* Override global fa-xmark positioning */
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    margin: 0 !important;
}

.featured-record-controls i:hover,
.gallery-controls i:hover {
    color: #ef4467;
    transform: scale(1.1);
}

/* Main gallery container grid layout */
#gallery-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: auto;
    gap: 20px;
    padding: 20px;
    overflow: auto;
}

/* ── Relevance tier headers (Solution B) ───────────────────────────── */
.gallery-tier-header {
    grid-column: 1 / -1;            /* span the full gallery row */
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 6px 2px -6px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 247, 231, 0.12);
}
.gallery-tier-title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #fff7e7;
}
.gallery-tier-count {
    font-size: 11px;
    color: #fff7e7;
    background: rgba(239, 68, 103, 0.85);
    border-radius: 10px;
    padding: 1px 8px;
    flex: 0 0 auto;
}
.gallery-tier-hint {
    font-size: 11px;
    opacity: 0.55;
    color: #fff7e7;
}
/* Progressive de-emphasis of lower-relevance bands so the gradient reads
   visually without hiding anything. */
.gallery-card--related { opacity: 0.88; }
.gallery-card--loose   { opacity: 0.72; }
.gallery-card--related:hover,
.gallery-card--loose:hover { opacity: 1; }

/* Designs gallery container - consistent with regular gallery */
#designs-gallery-container {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    grid-auto-rows: minmax(220px, 220px) !important; /* Set minimum row height for consistency */
    gap: 20px !important;
    padding: 20px !important;
    overflow: auto !important;
    min-height: 260px !important;
    align-items: start !important; /* Align cards to top of their grid cells */
}

/* Design cards - remove conflicting margins when in grid layout */
#designs-gallery-container .gallery-card,
#designs-gallery-container .design-card-item {
    margin: 0 !important; /* Remove margin since grid gap handles spacing */
    width: 100% !important; /* Ensure cards fill grid cells properly */
    box-sizing: border-box !important;
    height: 220px !important; /* Fixed height to match the grid row height */
    max-height: 220px !important; /* Ensure cards don't exceed this height */
}

/* Responsive: 3 columns on small screens (13" laptops and smaller, ≤1440px) */
@media (max-width: 1440px) {
    #gallery-container {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    #designs-gallery-container {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* PROJECT PAGE SPECIFIC STYLES */
.project-display-container {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 0px;
    height: 100%;
    padding: 0px;
}

.project-left-column {
    background-color: rgba(43, 46, 49, 0.9);
    border-radius: 0px;
    padding: 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    z-index: 1;
    position: relative;
}

.project-right-column {
    background-color: rgba(43, 46, 49, 0.7);
    border-radius: 0px 12px 12px 0px;
    padding: 24px;
    overflow-y: auto;
    margin: 8px 8px 8px 0px;
}

.project-controls {
    position: absolute;
    bottom: 0px;
    left: -3px;
    display: flex;
    gap: 20px;
    z-index: 10;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px #2b2e31;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.project-controls i {
    font-size: 36px;
    color: #fff7e7;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 4px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: left;
    /* Override global fa-xmark positioning */
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    margin: 0 !important;
}

.project-controls i:hover {
    color: #ef4467;
}

.project-delete-btn {
    position: absolute;
    bottom: 0;
    right: 8px;
    left: auto;
    background-color: transparent;
    border: none;
    color: #ef4467;
    cursor: pointer;
    font-size: 18px;
    padding: 8px 20px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.project-delete-btn:hover {
    background-color: rgba(239, 68, 103, 0.1);
    transform: scale(1.1);
}

/* Project container - replaces map-container for project page */
.project-container {
    padding: 0px;
}

/* Project-specific mini-map classes */
.project-mini-map-container { 
    width: 100%;
    margin-bottom: 20px;
    background: rgba(43, 46, 49, 0.8);
    border-radius: 8px;
    overflow: hidden;
    padding: 0px;
}

.project-mini-map {
    width: 100%;
    height: 150px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px;
}

.project-mini-map .loading-map-message,
.project-mini-map .map-error-message {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: #fff7e7;
    font-size: 14px;
}

/* PROJECT PAGE COMPONENT STYLES */

/* Status Indicator */
.project-status-select {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    color: #fff7e7;
    padding: 4px 8px;
    font-size: 13px;
}

.project-status-option {
    background-color: #2b2e31;
    color: #fff7e7;
}

.project-status-badge {
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
}

/* Date picker - center the month/year selectors in the calendar dropdown */
.project-display-container input[type="date"] {
    text-align: center;
}

.project-display-container input[type="date"]::-webkit-datetime-edit {
    text-align: center;
    display: flex;
    justify-content: center;
}

.project-display-container input[type="date"]::-webkit-datetime-edit-fields-wrapper {
    display: flex;
    justify-content: center;
}

/* Participants Display */
.participants-display-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.participants-display-label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
}

.participants-manage-btn {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff7e7;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s ease;
}

.participants-manage-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.participants-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
    align-items: center;
}

.participant-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    position: relative;
    overflow: visible;
}

.participant-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    /* Clip the image to circle without overflow:hidden on parent (which would clip the crown badge) */
    clip-path: circle(50%);
}

.participant-admin-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 14px;
    height: 14px;
    background-color: #fff7e7;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
}

.participant-admin-badge i {
    color: #ef4467;
}

.add-participant-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    border: 2px dashed rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.add-participant-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff7e7;
}

.add-participant-btn i {
    font-size: 12px;
}

/* Modal Styles */
.project-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.project-modal {
    background-color: #2b2e31;
    border-radius: 8px;
    padding: 24px;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    overflow-y: auto;
}

.project-modal h3 {
    color: #fff7e7;
    margin-top: 0;
    margin-bottom: 16px;
}

.project-modal-section {
    margin-bottom: 16px;
}

.project-search-input {
    width: 100%;
    padding: 8px 12px;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    color: #fff7e7;
    font-size: 14px;
    box-sizing: border-box;
}

.project-search-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.project-search-loading {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    margin-bottom: 16px;
}

.project-search-results {
    margin-bottom: 16px;
    max-height: 200px;
    overflow-y: auto;
}

.project-search-result-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    margin-bottom: 4px;
}

.project-search-result-user {
    display: flex;
    align-items: center;
}

.project-search-result-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    margin-right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    overflow: hidden;
}

.project-search-result-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.project-search-result-info {
    flex: 1;
}

.project-search-result-name {
    color: #fff7e7;
    font-size: 14px;
}

.project-search-result-email {
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
}

.project-search-result-add-btn {
    background-color: #ef4467;
    color: #fff7e7;
    border: none;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 12px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.project-search-result-add-btn:hover {
    background-color: #d63a5c;
}

.project-modal-buttons {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.project-modal-btn-cancel {
    background-color: transparent;
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    padding: 8px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.project-modal-btn-cancel:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff7e7;
}

.project-modal-btn-primary {
    background-color: #ef4467;
    color: #fff7e7;
    border: none;
    border-radius: 4px;
    padding: 8px 16px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.project-modal-btn-primary:hover {
    background-color: #d63a5c;
}

/* Manage Participants Modal */
.manage-participants-list {
    margin-bottom: 16px;
}

.manage-participant-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    margin-bottom: 8px;
}

.manage-participant-user {
    display: flex;
    align-items: center;
}

.manage-participant-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    overflow: hidden;
}

.manage-participant-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.manage-participant-info {
    flex: 1;
}

.manage-participant-name {
    color: #fff7e7;
    font-size: 14px;
}

.manage-participant-details {
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
}

.manage-participant-actions {
    display: flex;
    gap: 8px;
}

.manage-participant-role-btn {
    color: #fff7e7;
    border: none;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 12px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.manage-participant-remove-btn {
    background-color: transparent;
    color: #ef4467;
    border: 1px solid #ef4467;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.manage-participant-remove-btn:hover {
    background-color: #ef4467;
    color: #fff7e7;
}

/* Location Search Field */
.location-search-container {
    position: relative;
}

.location-search-input {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    padding: 8px 12px;
    color: #fff7e7;
    font-size: 14px;
}

.location-search-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.location-search-loading {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
}

.location-search-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #2b2e31;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-top: none;
    border-radius: 0 0 4px 4px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
}

.location-search-suggestion {
    padding: 8px 12px;
    color: #fff7e7;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.location-search-suggestion:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Custom Icon */
.custom-icon-container {
    display: inline-block;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Project Logo */
.project-logo-container {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    border: 2px dashed rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-right: 20px;
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease;
}

.project-logo-container:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.5);
}

.project-logo-container img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.project-logo-placeholder {
    color: rgba(255, 255, 255, 0.5);
    font-size: 24px;
}

.project-logo-edit-overlay {
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(43, 46, 49, 0.9);
    color: #fff7e7;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 8px;
    white-space: nowrap;
}

/* Project Title */
.project-title-container {
    flex: 1;
}

.project-title-input {
    font-size: 24px;
    font-weight: bold;
    color: #fff7e7;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    padding: 8px 12px;
    width: 100%;
    margin: 0;
}

.project-title-display {
    font-size: 24px;
    font-weight: bold;
    color: #fff7e7;
    margin: 0;
    cursor: pointer;
}

/* Project Period */
.project-period-container {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    margin-bottom: 20px;
}

.project-period-field {
    flex: 1;
}

.project-period-label {
    display: block;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    margin-bottom: 4px;
}

.project-period-input {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    padding: 6px 8px;
    color: #fff7e7;
    font-size: 13px;
    width: 100%;
}

.project-period-input:disabled {
    opacity: 0.5;
}

.project-period-ongoing {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
}

.project-period-display {
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
}

/* Project Description */
.project-description-label {
    display: block;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    margin-bottom: 4px;
}

.project-description-textarea {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    padding: 8px 12px;
    color: #fff7e7;
    font-size: 14px;
    resize: none;
    overflow-y: auto;
}

.project-description-textarea::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.project-description-display {
    min-height: 100px;
    max-height: 100px;
    overflow-y: auto;
    padding: 8px 12px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

/* Project Location */
.project-location-label {
    display: block;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    margin-bottom: 4px;
}

.project-location-display {
    color: #fff7e7;
    font-size: 14px;
}

/* Related Records Interface */
.related-records-section {
    margin-bottom: 20px;
}

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

.related-records-title {
    color: #fff7e7;
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.related-records-count {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
}

.related-records-add-btn {
    background-color: #4ade80;
    color: #fff7e7;
    border: none;
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: background-color 0.2s ease;
}

.related-records-add-btn:hover {
    background-color: #22c55e;
}

.related-records-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    max-height: 400px;
    overflow-y: auto;
    padding-right: 8px;
}

.related-record-card {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.related-record-card:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

.related-record-image {
    width: 100%;
    height: 80px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    margin-bottom: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.related-record-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.related-record-image-placeholder {
    color: rgba(255, 255, 255, 0.3);
    font-size: 24px;
}

.related-record-title {
    color: #fff7e7;
    font-size: 14px;
    font-weight: 500;
    margin: 0 0 4px 0;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.related-record-author {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.related-record-remove-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background-color: rgba(239, 68, 103, 0.8);
    color: #fff7e7;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 10px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.related-record-card:hover .related-record-remove-btn {
    display: flex;
}

.related-record-remove-btn:hover {
    background-color: #ef4467;
    transform: scale(1.1);
}

.related-records-empty {
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
    padding: 40px 20px;
}

.related-records-empty i {
    font-size: 32px;
    margin-bottom: 12px;
    opacity: 0.5;
}

/* Related Records Modal */
.related-records-modal-section {
    margin-bottom: 20px;
}

.related-records-search-container {
    position: relative;
    margin-bottom: 16px;
}

.related-records-search-input {
    width: 100%;
    padding: 10px 40px 10px 12px;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    color: #fff7e7;
    font-size: 14px;
}

.related-records-search-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.related-records-search-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.5);
}

.related-records-search-results {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.02);
}

.related-record-search-item {
    display: flex;
    align-items: center;
    padding: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.related-record-search-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.related-record-search-item:last-child {
    border-bottom: none;
}

.related-record-search-image {
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    margin-right: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.related-record-search-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.related-record-search-image-placeholder {
    color: rgba(255, 255, 255, 0.3);
    font-size: 16px;
}

.related-record-search-info {
    flex: 1;
    min-width: 0;
}

.related-record-search-title {
    color: #fff7e7;
    font-size: 14px;
    font-weight: 500;
    margin: 0 0 4px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.related-record-search-author {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.related-record-search-add-btn {
    background-color: #4ade80;
    color: #fff7e7;
    border: none;
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 12px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
}

.related-record-search-add-btn:hover {
    background-color: #22c55e;
}

.related-record-search-add-btn:disabled {
    background-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.5);
    cursor: not-allowed;
}

.related-records-search-loading {
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    padding: 20px;
}

.related-records-search-empty {
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
    padding: 20px;
}

/* ===========================================================================
   Registration & waitlist UI (landing page)
   =========================================================================== */
.signup-button {
    position: fixed;
    top: 1.5rem;
    right: 6.5rem;
    padding: 0.5rem 1rem;
    margin: 0;
    background-color: #ef4467;
    color: #fff7e7;
    border: none;
    font-weight: bold;
    border-radius: 0;
    cursor: pointer;
    z-index: 1000;
    transition: background-color 0.3s ease;
    box-shadow: 0 2px 5px #2b2e31;
}

.signup-button:hover {
    background-color: #fff7e7;
    color: #ef4467;
}

.popup-signup-prompt {
    margin-top: 1rem;
    font-size: 0.85rem;
    color: #fff7e7;
}

.popup-signup-prompt a {
    color: #ef4467;
    font-weight: bold;
    text-decoration: underline;
    cursor: pointer;
}

.reg-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 1rem;
    overflow-y: auto;
}

.reg-modal {
    position: relative;
    background: #2b2e31;
    color: #fff7e7;
    width: 100%;
    max-width: 440px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 2rem 1.75rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    border-radius: 0;
}

.reg-close {
    color: #fff7e7;
}

.reg-content { display: flex; flex-direction: column; }

.reg-title {
    margin: 0 0 0.25rem;
    color: #fff7e7;
    text-align: center;
}

.reg-subtitle {
    margin: 0 0 1.25rem;
    font-size: 0.9rem;
    color: #cbb9a0;
    text-align: center;
}

.reg-section {
    margin: 1.25rem 0 0.5rem;
    font-size: 0.9rem;
    color: #ef4467;
    border-top: 1px solid rgba(255, 247, 231, 0.15);
    padding-top: 1rem;
}

.reg-hint {
    font-size: 0.78rem;
    color: #cbb9a0;
    margin-bottom: 0.75rem;
    font-style: italic;
}

.reg-field { display: flex; flex-direction: column; margin-bottom: 0.85rem; }

.reg-field label {
    font-size: 0.8rem;
    margin-bottom: 0.3rem;
    color: #fff7e7;
}

.reg-req { color: #ef4467; }
.reg-optional { color: #9a8e7a; font-weight: normal; font-style: italic; }

.reg-field input,
.reg-field textarea {
    background: #1f2123;
    border: 1px solid rgba(255, 247, 231, 0.2);
    color: #fff7e7;
    padding: 0.55rem 0.65rem;
    font-size: 0.95rem;
    border-radius: 3px;
    width: 100%;
    box-sizing: border-box;
}
.reg-field input:focus,
.reg-field textarea:focus {
    outline: none;
    border-color: #ef4467;
}
.reg-field textarea { resize: vertical; min-height: 3.5rem; }

.reg-submit {
    background-color: #ef4467;
    color: #fff7e7;
    border: none;
    padding: 0.7rem 1rem;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    margin-top: 1rem;
    border-radius: 3px;
    transition: background-color 0.3s ease, opacity 0.3s ease;
}
.reg-submit:hover { background-color: #ff6b85; }
.reg-submit:disabled { opacity: 0.6; cursor: default; }

.reg-link {
    background: none;
    border: none;
    color: #cbb9a0;
    text-decoration: underline;
    cursor: pointer;
    margin-top: 0.75rem;
    font-size: 0.85rem;
}
.reg-link:hover { color: #ef4467; }

.reg-choice-btn {
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 0.25rem;
    background: #1f2123;
    border: 1px solid rgba(255, 247, 231, 0.2);
    color: #fff7e7;
    padding: 1rem;
    margin-top: 0.85rem;
    cursor: pointer;
    border-radius: 4px;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.reg-choice-btn:hover { border-color: #ef4467; background: #26282b; }
.reg-choice-btn strong { color: #ef4467; font-size: 1rem; }
.reg-choice-btn span { font-size: 0.82rem; color: #cbb9a0; }
.reg-choice-secondary strong { color: #fff7e7; }

/* Beta / active-development notice above the terms acknowledgement. */
.reg-beta-notice {
    margin-top: 1.25rem;
    padding: 0.85rem 1rem;
    background: rgba(239, 68, 103, 0.1);
    border: 1px solid rgba(239, 68, 103, 0.35);
    border-radius: 4px;
    font-size: 0.82rem;
    line-height: 1.5;
    color: #e8dcc8;
}
.reg-beta-notice strong { color: #ef4467; }
.reg-beta-notice a { color: #ef4467; text-decoration: underline; }

/* Mandatory Terms & Conditions acknowledgement row. */
.reg-consent {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-top: 0.85rem;
}
.reg-consent-check {
    flex: 0 0 auto;
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.15rem;
    accent-color: #ef4467;
    cursor: pointer;
}
.reg-consent-label {
    font-size: 0.82rem;
    line-height: 1.5;
    color: #e8dcc8;
    cursor: pointer;
}
.reg-inline-link {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    color: #ef4467;
    font-size: inherit;
    text-decoration: underline;
    cursor: pointer;
}
.reg-inline-link:hover { color: #ff6b85; }

.reg-message {
    padding: 0.6rem 0.75rem;
    border-radius: 3px;
    font-size: 0.85rem;
    margin-bottom: 0.85rem;
}
.reg-message-error { background: rgba(239, 68, 103, 0.15); color: #ff9bb0; border: 1px solid #ef4467; }
.reg-message-success { background: rgba(34, 197, 94, 0.15); color: #86efac; border: 1px solid #22c55e; }
.reg-message-info { background: rgba(255, 247, 231, 0.1); color: #fff7e7; border: 1px solid rgba(255, 247, 231, 0.3); }

.reg-success-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #ef4467;
    color: #fff7e7;
    font-size: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

/* Large outline icon for the invitation "open on desktop" notice. */
.reg-icon {
    font-size: 2.6rem;
    color: #ef4467;
    text-align: center;
    margin: 0.25rem auto 1rem;
}

/* Invitation choice shown as desktop-only on mobile: muted, non-actionable look
   with a small badge, while it still explains itself when tapped. */
.reg-choice-disabled {
    opacity: 0.6;
    position: relative;
}
.reg-choice-disabled:hover {
    border-color: rgba(255, 247, 231, 0.2);
    background: #1f2123;
}
.reg-choice-disabled strong {
    color: #cbb9a0;
}
.reg-choice-tag {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    font-size: 0.62rem !important;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #2b2e31 !important;
    background: #cbb9a0;
    padding: 0.12rem 0.4rem;
    border-radius: 999px;
    font-weight: 700;
}

/* ─────────────── Registration popup: mobile presentation ────────────────
   Keep the dark card + pink-accent graphic identity, but present it as an
   elegant bottom sheet that slides up, spans the screen width, and is thumb
   friendly. Inputs use 16px on mobile so iOS Safari does not auto-zoom (which
   otherwise jars the whole popup) on focus. */
@media (max-width: 768px) {
    .reg-overlay {
        padding: 0;
        align-items: flex-end;
    }

    .reg-modal {
        width: 100%;
        max-width: 100%;
        max-height: 92vh;
        border-radius: 16px 16px 0 0;
        padding: 1.5rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.45);
        animation: regSheetUp 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    /* Small drag-handle affordance at the top of the sheet. */
    .reg-modal::before {
        content: "";
        position: absolute;
        top: 0.55rem;
        left: 50%;
        transform: translateX(-50%);
        width: 2.5rem;
        height: 0.28rem;
        border-radius: 999px;
        background: rgba(255, 247, 231, 0.25);
    }

    .reg-content { padding-top: 0.5rem; }

    .reg-close {
        top: 0.9rem;
        right: 0.9rem;
    }

    /* 16px prevents iOS focus auto-zoom. */
    .reg-field input,
    .reg-field textarea {
        font-size: 16px;
    }

    .reg-choice-btn {
        padding: 1.1rem;
    }

    .reg-submit {
        padding: 0.9rem 1rem;
        font-size: 1.05rem;
    }
}

@keyframes regSheetUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

/* ───────────────────────── Settings: sidebar navigation ───────────────── */
.settings-nav-title {
    color: #fff7e7;
    font-size: 20px;
    margin: 8px 12px 12px;
}
.settings-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 8px;
}
.settings-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #fff7e7;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease;
}
.settings-nav-item i {
    width: 18px;
    text-align: center;
    opacity: 0.85;
}
.settings-nav-item:hover {
    background: rgba(255, 255, 255, 0.1);
}
.settings-nav-item.active {
    background: #ef4467;
    color: #fff;
}
.settings-nav-lock {
    margin-left: auto;
    width: auto;
    font-size: 12px;
    opacity: 0.55;
}
.settings-nav-item-locked span {
    opacity: 0.7;
}
.settings-panel {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.settings-locked {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.5rem;
    padding: 3rem 1.5rem;
    color: #2b2e31;
}
.settings-locked-icon {
    font-size: 2rem;
    color: #ef4467;
    margin-bottom: 0.5rem;
}
.settings-locked h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
}
.settings-locked p {
    margin: 0;
    max-width: 360px;
    opacity: 0.8;
}

/* ───────────────────────── Subscription & Billing UI ──────────────────── */
.billing-current-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    margin-top: 8px;
}
.billing-stat {
    display: flex;
    flex-direction: column;
}
.billing-stat-value {
    font-size: 26px;
    font-weight: 700;
    color: #2b2e31;
}
.billing-stat-label {
    font-size: 12px;
    color: #888;
}
.spore-dot { color: #27ae60; font-size: 16px; }

.billing-cycle-toggle {
    display: inline-flex;
    align-items: stretch;
    gap: 4px;
    background: #f1f0ec;
    border: 1px solid #e1e1e1;
    border-radius: 50px;
    padding: 4px;
    margin: 10px 0 18px;
    width: fit-content;
}
.billing-cycle {
    border: none;
    background: transparent;
    padding: 7px 20px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    font-weight: 600;
    color: #555;
    border-radius: 50px;
    transition: background 0.15s ease, color 0.15s ease;
}
.billing-cycle:hover {
    color: #2b2e31;
}
.billing-cycle.active {
    background: #2b2e31;
    color: #fff7e7;
}

.billing-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 16px;
}
.billing-plan {
    border: 1px solid #e1e1e1;
    border-radius: 12px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    background: #fff;
}
.billing-plan.current {
    border-color: #27ae60;
    box-shadow: 0 0 0 2px rgba(39, 174, 96, 0.2);
}
.billing-plan-name { font-weight: 700; font-size: 16px; color: #2b2e31; }
.billing-plan-price { font-size: 28px; font-weight: 700; color: #2b2e31; margin: 6px 0; }
.billing-plan-price span { font-size: 13px; font-weight: 400; color: #888; }
.billing-plan-desc { font-size: 13px; color: #666; min-height: 38px; }
.billing-plan-feats { list-style: none; padding: 0; margin: 10px 0; font-size: 13px; color: #444; }
.billing-plan-feats li { padding: 3px 0; }
.billing-plan-feats li::before { content: "\2713 "; color: #27ae60; }

.billing-btn {
    margin-top: auto;
    padding: 10px 16px;
    border: none;
    border-radius: 50px;
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    font-size: 14px;
}
.billing-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.billing-btn-ghost {
    background: transparent;
    border: 1px solid #cfcfcf;
    color: #2b2e31;
}
.billing-btn-danger {
    background: linear-gradient(135deg, #ef4467, #c0392b);
}

.billing-buy-row {
    display: flex;
    gap: 12px;
    align-items: center;
    margin: 12px 0;
    flex-wrap: wrap;
}
.billing-select {
    padding: 9px 12px;
    border: 1px solid #cfcfcf;
    border-radius: 8px;
    font-size: 14px;
    background: #fff;
    color: #2b2e31;
}
.billing-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #555;
}

.billing-tx-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-size: 13px;
}
.billing-tx-table th,
.billing-tx-table td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid #eee;
    color: #2b2e31;
}
.billing-tx-table th { color: #888; font-weight: 600; }

/* Billing space uses dark text on light cards instead of the beige used
   elsewhere in Settings. */
.billing-space .settings-section {
    background-color: #fff;
    border: 1px solid #e1e1e1;
}
.billing-space .settings-section h3,
.billing-space .settings-section h3 i,
.billing-space .setting-row-text .setting-label {
    color: #2b2e31;
}
.billing-space .setting-row-text .setting-description,
.billing-space .setting-description {
    color: #555;
}
.billing-space .storage-usage-label,
.billing-space .storage-usage-label .storage-percent {
    color: #2b2e31;
}
.reg-message.error { color: #c0392b; }
.reg-message.info { color: #2b2e31; background: #fff7e7; padding: 10px 14px; border-radius: 8px; }
.status-badge.status-accepted { background: #27ae60; color: #fff; padding: 2px 8px; border-radius: 10px; font-size: 12px; }
.status-badge.status-pending { background: #f39c12; color: #fff; padding: 2px 8px; border-radius: 10px; font-size: 12px; }

/* ===================================================================
   Spore spend popup — pill that rises from below and fades up
   =================================================================== */
.spore-spend-popup {
    position: fixed;
    top: 64px;
    left: 50%;
    transform: translate(-50%, 16px);
    background: #2b2e31;
    color: #fff7e7;
    padding: 8px 18px;
    border-radius: 9999px;
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.2px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    opacity: 0;
    pointer-events: none;
    z-index: 100000;
    transition: opacity 0.35s ease, transform 0.45s ease;
}
.spore-spend-popup--visible {
    opacity: 1;
    transform: translate(-50%, 0);
}
.spore-spend-popup--leaving {
    opacity: 0;
    transform: translate(-50%, -16px);
}

/* ===================================================================
   Analyze view + floating Compare/Expand control
   =================================================================== */
.analyze-view {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding: 24px;
    box-sizing: border-box;
    color: #fff7e7;
    font-family: 'Manrope', sans-serif;
}
.analyze-view h2 { margin: 0 0 4px; font-size: 20px; }
.analyze-view .analyze-subtitle { margin: 0 0 18px; opacity: 0.75; font-size: 13px; }
/* Outer wrapper that hosts the top tab bar + panels — kept transparent so the
   tabs read as the top-level navigation of the display container. */
.analyze-section[data-sec="action"] {
    margin: 0;
    background: transparent;
    border-radius: 0;
    padding: 0;
}
.analyze-section {
    margin-bottom: 28px;
    background: rgba(255, 247, 231, 0.05);
    border-radius: 12px;
    padding: 16px;
}
.analyze-subsection {
    margin-bottom: 28px;
    background: rgba(255, 247, 231, 0.05);
    border-radius: 12px;
    padding: 16px;
}
.analyze-subsection:last-child { margin-bottom: 0; }
.analyze-section h3,
.analyze-subsection h3 {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 600;
}
.analyze-chart { width: 100%; min-height: 220px; position: relative; }
.analyze-empty { opacity: 0.7; font-size: 13px; padding: 12px; }
.analyze-loading { display: flex; align-items: center; justify-content: center; gap: 12px; height: 100%; opacity: 0.8; }
.analyze-loading::before {
    content: '';
    width: 22px;
    height: 22px;
    border: 3px solid transparent;
    border-top: 3px solid #ef4467;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    flex: 0 0 auto;
}

/* Comparison / inference qualitative cards */
.analyze-cards { display: flex; flex-wrap: wrap; gap: 12px; }
.analyze-card {
    background: rgba(43, 46, 49, 0.6);
    border: 1px solid rgba(255, 247, 231, 0.12);
    border-radius: 10px;
    padding: 12px 14px;
    min-width: 200px;
    flex: 1 1 220px;
}
.analyze-card .ac-title { font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.analyze-card .ac-estimate { font-size: 22px; font-weight: 700; line-height: 1.1; }
.analyze-card .ac-range { font-size: 14px; font-weight: 600; opacity: 0.85; margin-top: 2px; }
.analyze-card .ac-unit { font-size: 12px; opacity: 0.7; margin-left: 2px; }
.analyze-card .ac-band {
    display: inline-block;
    margin-top: 8px;
    padding: 2px 10px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 600;
    background: #ef4467;
    color: #fff;
}
.analyze-card .ac-sub { font-size: 11px; opacity: 0.65; margin-top: 6px; }

/* Gradient confidence marker shown next to a predicted value */
.ac-confidence {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
    vertical-align: middle;
    white-space: nowrap;
}
.ac-confidence-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15);
    flex: 0 0 auto;
}
.ac-confidence-pct { font-size: 11px; font-weight: 700; }

/* Floating Choro action button (bottom-right of display container) */
.analyze-fab {
    position: absolute;
    bottom: 18px;
    right: 18px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #ef4467;
    color: #fff7e7;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
    z-index: 1200;
    border: none;
    transition: transform 0.2s ease;
}
.analyze-fab:hover { transform: scale(1.06); }
.analyze-fab-menu {
    position: absolute;
    bottom: 84px;
    right: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 1200;
    align-items: flex-end;
}
.analyze-fab-option {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #2b2e31;
    color: #fff7e7;
    border: 1px solid rgba(255, 247, 231, 0.18);
    border-radius: 9999px;
    padding: 8px 16px;
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.analyze-fab-menu.open .analyze-fab-option { opacity: 1; transform: translateY(0); }
.analyze-fab-option .ico { color: #ef4467; display: inline-flex; }

/* Tabbed Compare/Expand results inside the Analyze view */
.analyze-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: -24px -24px 18px;
    padding: 16px 24px 10px;
    border-bottom: 1px solid rgba(255, 247, 231, 0.12);
    position: sticky;
    top: -24px;
    z-index: 5;
    background: #2b2e31;
}
.analyze-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(43, 46, 49, 0.6);
    color: #fff7e7;
    border: 1px solid rgba(255, 247, 231, 0.14);
    border-radius: 9999px;
    padding: 6px 12px;
    font-family: 'Manrope', sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    max-width: 220px;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.analyze-tab .analyze-tab-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.analyze-tab:hover { border-color: rgba(255, 247, 231, 0.35); }
.analyze-tab.active {
    background: #ef4467;
    border-color: #ef4467;
    color: #fff7e7;
}
.analyze-tab-close {
    font-size: 14px;
    line-height: 1;
    opacity: 0.7;
    flex-shrink: 0;
}
.analyze-tab-close:hover { opacity: 1; }
.analyze-tab-panel { animation: analyze-fade-in 0.2s ease; }
@keyframes analyze-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* Expand plot + paid "See data" grid reveal */
.analyze-chart.expand-plot { min-height: 120px; }
.analyze-seedata-bar { margin: 14px 0 4px; }
.analyze-seedata-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #2b2e31;
    color: #fff7e7;
    border: 1px solid rgba(255, 247, 231, 0.18);
    border-radius: 9999px;
    padding: 8px 16px;
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
}
.analyze-seedata-btn .ico, .analyze-seedata-btn svg { color: #ef4467; flex-shrink: 0; }
.analyze-seedata-btn:hover { transform: translateY(-1px); }
.analyze-seedata-btn:disabled { opacity: 0.5; cursor: default; transform: none; }
.analyze-seedata-grid:not(:empty) { margin-top: 14px; }

/* Analyze tab choro icon */
.selector-tab .tab-choro-icon {
    display: inline-flex;
    vertical-align: middle;
    margin-right: 6px;
    width: 14px;
    height: 14px;
}
.selector-tab .tab-choro-icon svg { width: 14px; height: 14px; }

/* Project Choro analysis: floating tab bar + analyze overlay glued to the
   project display container (see src/projectAnalyze.js). */
.project-analyze-tabs {
    position: fixed;
    width: auto;
    display: flex;
    z-index: 1201;
}
.project-analyze-tabs .selector-tab { display: inline-flex; align-items: center; }
.project-analyze-overlay {
    position: fixed;
    z-index: 1200;
    background: #2b2e319f;
    backdrop-filter: blur(20px);
    overflow: hidden;
    box-sizing: border-box;
}
/* The choro menu triggered from the project sidebar reuses the FAB menu look. */
.project-choro-menu { align-items: flex-start; }

/* Property picker modal (Expand / infer) */
.analyze-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100001;
}
.analyze-modal {
    background: #2b2e31;
    color: #fff7e7;
    border-radius: 14px;
    padding: 22px;
    width: 420px;
    max-width: 92vw;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    font-family: 'Manrope', sans-serif;
}
.analyze-modal h3 { margin: 0 0 6px; font-size: 17px; }
.analyze-modal p.hint { margin: 0 0 14px; font-size: 12px; opacity: 0.7; }
.analyze-prop-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.analyze-prop-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 247, 231, 0.14);
    cursor: pointer;
}
.analyze-prop-item.selected { border-color: #ef4467; background: rgba(239, 68, 102, 0.15); }
.analyze-prop-item .pp-name { font-weight: 600; font-size: 13px; flex: 1 1 auto; }
.analyze-prop-item .pp-meta { font-size: 11px; opacity: 0.65; margin-left: auto; }
.analyze-prop-item .pp-learn-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
    color: #fff7e7;
    opacity: 0.4;
    font-size: 13px;
    text-decoration: none;
    transition: opacity 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
}
.analyze-prop-item .pp-learn-more:hover { opacity: 1; color: #ef4467; }
.analyze-modal-actions { display: flex; justify-content: flex-end; gap: 10px; }
.analyze-modal-actions button {
    border: none;
    border-radius: 9999px;
    padding: 8px 18px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Manrope', sans-serif;
}
.analyze-modal-actions .btn-primary { background: #ef4467; color: #fff7e7; }
.analyze-modal-actions .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.analyze-modal-actions .btn-secondary { background: transparent; color: #fff7e7; border: 1px solid rgba(255, 247, 231, 0.3); }
.analyze-cost-note { font-size: 11px; opacity: 0.7; margin: 0 0 14px; }
.analyze-prop-search {
    width: 100%;
    box-sizing: border-box;
    background: rgba(255, 247, 231, 0.08);
    border: 1px solid rgba(255, 247, 231, 0.2);
    border-radius: 8px;
    color: #fff7e7;
    padding: 9px 12px;
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    margin-bottom: 12px;
    outline: none;
}
.analyze-prop-search::placeholder { color: rgba(255, 247, 231, 0.5); }
.analyze-confidence {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    margin-bottom: 12px;
}
.analyze-confidence-select {
    background: rgba(255, 247, 231, 0.08);
    border: 1px solid rgba(255, 247, 231, 0.2);
    border-radius: 8px;
    color: #fff7e7;
    padding: 7px 10px;
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    outline: none;
}
.analyze-confidence-select option { color: #2b2e31; }
.analyze-prop-list { max-height: 320px; overflow-y: auto; }

/* Blurred graphs that require a paid click to reveal */
.analyze-masked > svg { filter: blur(12px); pointer-events: none; user-select: none; }
.analyze-blur-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}
.analyze-reveal-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(43, 46, 49, 0.85);
    color: #fff7e7;
    border: 1px solid rgba(255, 247, 231, 0.25);
    border-radius: 9999px;
    padding: 10px 18px;
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
    transition: transform 0.15s ease, background 0.15s ease;
}
.analyze-reveal-btn:hover { transform: scale(1.04); background: rgba(43, 46, 49, 0.95); }

/* ───────────────────────── Record sharing popup ──────────────────────── */
.record-share-icon:hover { opacity: 1 !important; }

.record-share-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
}
.record-share-modal {
    background: #2b2e31;
    color: #fff7e7;
    width: 440px;
    max-width: 92%;
    max-height: 82%;
    overflow-y: auto;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
.record-share-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.record-share-header h3 {
    margin: 0;
    font-size: 17px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.record-share-close {
    background: transparent;
    border: none;
    color: #fff7e7;
    font-size: 18px;
    cursor: pointer;
    opacity: 0.7;
}
.record-share-close:hover { opacity: 1; }
.record-share-hint {
    font-size: 12px;
    color: rgba(255, 247, 231, 0.6);
    margin: 0 0 14px;
    line-height: 1.4;
}
.record-share-search {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #fff7e7;
    font-size: 14px;
    margin-bottom: 12px;
}
.record-share-loading,
.record-share-empty {
    font-size: 13px;
    color: rgba(255, 247, 231, 0.6);
    padding: 6px 0;
}
.record-share-error {
    font-size: 13px;
    color: #ff8a9b;
    padding: 6px 0;
}
.record-share-results {
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding-bottom: 8px;
}
.record-share-result,
.record-share-current-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px;
    border-radius: 8px;
}
.record-share-result:hover { background: rgba(255, 255, 255, 0.05); }
.record-share-result-main {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.record-share-result-main > i {
    width: 20px;
    text-align: center;
    opacity: 0.8;
}
.record-share-name { font-size: 14px; }
.record-share-sub { font-size: 12px; color: rgba(255, 247, 231, 0.55); }
.record-share-actions { display: flex; gap: 6px; flex-shrink: 0; }
.record-share-actions button {
    background: #ef4467;
    color: #fff7e7;
    border: none;
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 12px;
    cursor: pointer;
}
.record-share-actions button:hover { filter: brightness(1.1); }
.record-share-current h4 {
    margin: 4px 0 8px;
    font-size: 13px;
    color: rgba(255, 247, 231, 0.7);
}
.record-share-current-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.share-access-toggle {
    display: inline-flex;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 6px;
    overflow: hidden;
}
.share-access-toggle button {
    background: transparent;
    border: none;
    color: rgba(255, 247, 231, 0.7);
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
}
.share-access-toggle button.active {
    background: #ef4467;
    color: #fff7e7;
}
.record-share-revoke {
    background: transparent;
    border: none;
    color: rgba(255, 247, 231, 0.5);
    cursor: pointer;
    font-size: 13px;
}
.record-share-revoke:hover { color: #ff8a9b; }

/* ═════════════════════════════════════════════════════════════════════════
   "Best experienced on desktop" notice (shown to mobile visitors who try to
   log in / sign up). Elegant, brand-aligned, and responsive.
   ═════════════════════════════════════════════════════════════════════════ */
.desktop-only-modal {
    max-width: 420px;
    border-radius: 1.25rem;
    overflow: hidden;
    text-align: center;
}

.desktop-only-modal .info-modal-body {
    padding: 2.5rem 2rem 2.25rem;
}

.desktop-only-notice {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.desktop-only-icon {
    width: 4.25rem;
    height: 4.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-bottom: 1.25rem;
    background: linear-gradient(135deg, #ef4467 0%, #ff6b8a 100%);
    color: #fff7e7;
    font-size: 1.7rem;
    box-shadow: 0 10px 24px rgba(239, 68, 103, 0.35);
}

.desktop-only-notice h2 {
    font-size: 1.55rem;
    font-weight: 800;
    margin: 0 0 0.85rem;
    color: #2b2e31;
}

.desktop-only-notice p {
    font-size: 1rem;
    line-height: 1.6;
    margin: 0 0 0.85rem;
    color: #45484b;
}

.desktop-only-domain {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    width: 100%;
    margin: 0.5rem 0 1rem;
    padding: 0.9rem 1rem;
    border-radius: 0.9rem;
    background: rgba(239, 68, 103, 0.08);
    border: 1px solid rgba(239, 68, 103, 0.25);
}

.desktop-only-domain span {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #ef4467;
}

.desktop-only-domain strong {
    font-size: 1.35rem;
    font-weight: 800;
    color: #2b2e31;
    letter-spacing: 0.01em;
}

.desktop-only-notice .desktop-only-thanks {
    font-size: 0.9rem;
    color: #6b6e71;
    margin: 0;
}

/* ═════════════════════════════════════════════════════════════════════════
   Mobile landing layout. The desktop landing is now served to phones (login
   gently blocked in JS). The desktop hero uses absolute positioning + a 100vh
   spacer, which is fragile on mobile — so on small screens we switch the whole
   page to a simple, robust vertical flow.
   ═════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* ---- Horizontal-overflow guard ---------------------------------------
       Page width must equal the screen width exactly: vertical scroll only,
       never horizontal. We deliberately do NOT put overflow-x:hidden on
       html / body — that turns the scroll root into a clipping context and
       unpins the position:fixed background on iOS Safari.
       We use overflow-x: CLIP (not hidden) on the sections: `hidden` on one
       axis forces the other axis to compute to `auto`, which turns every
       section into its own nested scroll container — that is what made the
       page scroll "section by section" instead of as one continuous document.
       `clip` prevents horizontal overflow WITHOUT creating a scroll container,
       so the whole page scrolls smoothly and continuously. */
    .landing-hero,
    .sales-section,
    .capabilities-section,
    .pricing-section,
    .footer {
        max-width: 100%;
        overflow-x: clip;
    }

    /* ---- Background: fluid, fixed, no-jitter on phones -------------------
       Desktop animates background-position, which re-rasterises the 30px blur
       on every frame — fine on a desktop GPU, but on phones it stutters and the
       "fixed" layer visibly jitters while scrolling. On mobile we instead pan a
       once-rasterised layer with a GPU transform (composited, no repaint) and
       promote each layer so it stays genuinely pinned. This keeps the exact same
       concept as desktop while running smoothly. */
    .background-container,
    .fading-container {
        background-position: center center;
        -webkit-animation: continuousPanMobile 48s ease-in-out infinite;
        animation: continuousPanMobile 48s ease-in-out infinite;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        will-change: transform;
    }

    /* Promote the clip itself to a compositing layer on mobile so its
       overflow:hidden is enforced by the compositor. The blurred child layers
       are composited (for the transform pan); with a NON-composited clip, the
       ancestor clip can transiently fail to apply when a child repaints (e.g.
       the base layer swapping its image at the end of a crossfade), which flashed
       the blurred transparent edge as a dark blink. A composited clip applies the
       clip every frame, removing the edge flicker. Safe on mobile only — phones
       use overlay scrollbars (0 width), so promoting a fixed inset:0 element does
       NOT add the scrollbar-width horizontal overflow it would on desktop. */
    .background-blur-clip {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        will-change: transform;
    }

    /* ---- Hero -------------------------------------------------------------
       .landing-hero already centres this in the first viewport, so the content
       only needs a sensible width and a little breathing room. */
    .main-content {
        width: 88%;
        max-width: 32rem;
        margin: 0 auto;
        padding: 4.5rem 0 2.5rem;
        box-sizing: border-box;
    }

    .sales-section {
        margin-top: 0;
    }

    .landing-logo {
        width: 60vw;
    }

    .landing-site-name {
        font-size: 3.25rem;
    }

    .landing-headline {
        font-size: 1.05rem;
    }

    /* Keep the two hero auth buttons side-by-side but allow wrapping if needed. */
    .landing-auth-buttons {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    /* Shrink the floating (scrolled) auth clone so it doesn't crowd the corner. */
    .landing-auth-buttons.landing-auth-floating {
        top: 0.5rem;
        right: 0.5rem;
        gap: 0.5rem;
    }

    .corner-logo {
        width: 3.5rem;
    }

    /* ---- Section intros --------------------------------------------------- */
    .sales-heading {
        font-size: 2rem;
    }

    .sales-subheading {
        font-size: 1.05rem;
    }

    /* ---- Sales cards: Explore / Design / Connect --------------------------
       One full-width card per row, each with its image and comfortable padding
       so the copy has room to breathe. */
    .sales-section {
        padding: 3.5rem 1.25rem 4rem;
        gap: 2rem;
    }

    /* Make the grid span the full width of the (flex, centre-aligned) section
       so cards are never shrunk to their content width. */
    .sales-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        width: 100%;
        align-self: stretch;
    }

    .sales-point {
        width: 100%;
    }

    /* Scroll-reveal safety net: on mobile, render the cards immediately instead
       of relying on the IntersectionObserver to flip them from opacity:0. This
       guarantees the pictures and text are always visible (a missed observer
       callback previously left cards blank/collapsed). */
    .sales-point,
    .capability-card {
        opacity: 1;
        transform: none;
    }

    /* Give the artwork a fixed, comfortable height (independent of the card
       width) so it always renders, and cap it so it never dominates the card. */
    .sales-point-media {
        aspect-ratio: auto;
        height: 210px;
        min-height: 210px;
        flex: 0 0 auto;
    }

    .sales-point-media img {
        display: block;
    }

    /* Size the text block to its content (flex-basis: auto) instead of the
       base flex:1 (basis 0%), which could collapse the text to near-zero height
       inside the column — leaving the card only as tall as the image. */
    .sales-point .text-container {
        flex: 1 1 auto;
        padding: 1.6rem 1.4rem 1.9rem;
    }

    .sales-point h3 {
        font-size: 1.5rem;
    }

    .sales-point-tagline {
        font-size: 1.05rem;
    }

    .sales-point-list li {
        font-size: 1rem;
        line-height: 1.55;
    }

    /* ---- Why Chorogram cards ----------------------------------------------
       Stack the icon above the text and centre everything, so the round icon,
       eyebrow, title, description and tags all read cleanly on a narrow screen
       instead of being squeezed beside the icon. */
    .capabilities-section {
        padding: 4rem 1.25rem 4.5rem;
        gap: 2.5rem;
    }

    .capabilities-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    /* Single column: the lone final card no longer needs to span two columns. */
    .capabilities-grid .capability-card:nth-child(odd):last-child {
        grid-column: auto;
    }

    .capability-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1.1rem;
        padding: 2rem 1.5rem;
    }

    .capability-icon {
        width: 3.75rem;
        height: 3.75rem;
        border-radius: 1.1rem;
        font-size: 1.5rem;
    }

    .capability-content {
        align-items: center;
        width: 100%;
    }

    .capability-title {
        font-size: 1.3rem;
    }

    .capability-text {
        font-size: 1rem;
    }

    .capability-tags {
        justify-content: center;
    }

    /* "Contact us about scaling": compact, centred pill sized to its label
       (not full-width) with a comfortable tap target. */
    .capability-contact {
        align-self: center;
        justify-content: center;
        width: auto;
        max-width: 100%;
        margin-top: 1.5rem;
        padding: 0.75rem 1.35rem;
        font-size: 0.9rem;
    }

    /* ---- Pricing ---------------------------------------------------------- */
    .pricing-section {
        padding: 4rem 1.25rem 4.5rem;
        gap: 2.5rem;
    }

    .pricing-plans {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .pricing-extra {
        flex-direction: column;
        align-items: stretch;
    }

    .pricing-extra-item,
    .pricing-earn {
        max-width: 100%;
    }

    /* ---- Footer ----------------------------------------------------------- */
    .footer {
        flex-direction: column;
        gap: 0.75rem;
        padding: 1.25rem;
    }

    .about-section {
        align-items: center;
        margin-right: 0;
    }

    .about-section .about-text {
        text-align: center;
    }

    .social-links {
        margin-left: 0;
    }

    /* Info / desktop-only modal fits within small viewports. */
    .info-modal,
    .desktop-only-modal {
        width: calc(100vw - 2rem);
        max-width: 420px;
        max-height: 85vh;
        overflow-y: auto;
    }

    .desktop-only-modal .info-modal-body {
        padding: 2.25rem 1.5rem 2rem;
    }
}

@media (max-width: 380px) {
    .landing-site-name {
        font-size: 2.6rem;
    }
    .landing-headline {
        font-size: 0.95rem;
    }
    .landing-auth-buttons .auth-button,
    .landing-auth-buttons .signup-button {
        padding: 0.6rem 1.1rem;
        font-size: 0.95rem;
    }
}


.overview * {
  box-sizing: border-box;
}

.overview .react-flow__controls button {
  box-sizing: content-box;
  background-color: #333;
  color: #fffaed;
  border: 1px solid #fffaed;
}

.react-flow__controls button {
  box-sizing: content-box;
  background-color: #333;
  color: #fffaed;
  border: 1px solid #fffaed;
}

.overview .react-flow__node {
  font-size: 12px;
  background-color: #333;
  color: #fffaed;
}

.edgebutton {
  width: 20px;
  height: 20px;
  background-color: #333;
  border: 1px solid #ff305d;
  cursor: pointer;
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
}

.edgebutton:hover {
  box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.08);
}

.react-flow__node {
  border: 1px solid #ff305d;
  background: #fffaed;
  color:#333;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 10px;
}


.gradient:before {
  content: '';
  position: absolute;
  padding-bottom: calc(100% * 1.41421356237);
  width: calc(100% * 1.41421356237);
  background: conic-gradient(
    from -160deg at 50% 50%,
    #e92a67 0deg,
    #a853ba 120deg,
    #2a8af6 240deg,
    #e92a67 360deg
  );
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 100%;
}

/* .react-flow__minimap .group {
  fill-opacity: 0.4;
}

.react-flow__minimap .resizer,
.react-flow__minimap .tools,
.react-flow__minimap .circle,
.react-flow__minimap .textinput {
  fill: rgb(208, 192, 247);
}

.react-flow__minimap .resizer {
  fill: rgb(208, 192, 247);
}

.react-flow__minimap .circle {
  rx: 100%;
  ry: 100%;
}

.react-flow__minimap .annotation {
  display: none;
} */
  

/*# sourceMappingURL=main-9c755de3.bundle.css.map*/