:root {
    --bg-page: #FAF8F5;
    --bg-card: #FFFFFF;
    --bg-sand: #F5F2EB;
    --bg-sand-hover: #ECE7DD;
    --accent-forest: #0F4C3A;
    --accent-forest-hover: #0B3B2D;
    --accent-mint: #E8F3EE;
    --accent-mint-text: #0F4C3A;
    --border-warm: #EAE6DE;
    --border-sand: #E6E0D4;
    --text-primary: #18181B;
    --text-secondary: #57534E;
    --text-muted: #78716C;
    /* Typography system */
    --font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-display: "DM Serif Display", Georgia, "Times New Roman", serif;
}

*, ::after, ::before {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    background-color: #FAF8F5;
    overflow-x: hidden;
    max-width: 100%;
    width: 100%;
}

body {
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: #FAF8F5 !important;
    background-image: 
        linear-gradient(to right, rgba(28, 25, 23, 0.045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(28, 25, 23, 0.045) 1px, transparent 1px) !important;
    background-size: 44px 44px !important;
    background-attachment: fixed !important;
    color: #18181B !important;
    min-height: 100vh;
    overflow-x: hidden;
    max-width: 100%;
    width: 100%;
    position: relative;
}

::selection {
    background: #0F4C3A !important;
    color: #FAF8F5 !important;
}

::-moz-selection {
    background: #0F4C3A !important;
    color: #FAF8F5 !important;
}

/* Eliminate WebKit/Chrome/Safari/Edge autofill blue background */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset !important;
    box-shadow: 0 0 0 1000px #FFFFFF inset !important;
    -webkit-text-fill-color: #18181B !important;
    caret-color: #0F4C3A !important;
    color: #18181B !important;
    background-color: #FFFFFF !important;
    background-image: none !important;
    transition: background-color 50000s ease-in-out 0s !important;
}

input, textarea {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
    caret-color: #0F4C3A !important;
    accent-color: #0F4C3A !important;
}

input:focus, textarea:focus {
    outline: none !important;
}

img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    pointer-events: none;
}

iframe, img, video, canvas, svg {
    max-width: 100%;
}

header {
    background-color: rgba(250, 248, 245, 0.92) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-bottom: 1px solid rgba(28, 25, 23, 0.06) !important;
}

/* Atmospheric subtle grid class if needed inline */
.bg-subtle-grid {
    background-color: #FAF8F5;
    background-image: 
        linear-gradient(to right, rgba(28, 25, 23, 0.045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(28, 25, 23, 0.045) 1px, transparent 1px);
    background-size: 44px 44px;
}

/* Warm card surfaces */
.card-clean {
    background-color: #FFFFFF;
    border: 1px solid #EAE6DE;
    box-shadow: 0 10px 30px -8px rgba(28, 25, 23, 0.03);
    border-radius: 1.5rem;
}

.card-sand {
    background-color: #F5F2EB;
    border: 1px solid #E6E0D4;
    border-radius: 1rem;
}

.card-forest {
    background-color: #0F4C3A;
    color: #FFFFFF;
    border-radius: 1.75rem;
    box-shadow: 0 20px 45px -12px rgba(15, 76, 58, 0.25);
}

/* Quick search pill chips */
.quick-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.85rem;
    border-radius: 9999px;
    background-color: #FFFFFF;
    border: 1px solid #E5E0D6;
    color: #57534E;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}
.quick-chip:hover {
    background-color: #E8F3EE;
    color: #0F4C3A;
    border-color: rgba(15, 76, 58, 0.3);
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(15, 76, 58, 0.08);
}
.quick-chip:active {
    transform: translateY(0px) scale(0.97);
}

/* Search input focus styling */
.search-pill-container {
    background-color: #FFFFFF;
    border: 1px solid #E0DAD0;
    border-radius: 9999px;
    box-shadow: 0 4px 20px -2px rgba(28, 25, 23, 0.04);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.search-pill-container:focus-within {
    border-color: #0F4C3A;
    box-shadow: 0 0 0 4px rgba(15, 76, 58, 0.1), 0 8px 30px -4px rgba(15, 76, 58, 0.08);
}

/* Paste Button inside Search Pill */
.btn-paste {
    color: #78716C;
    background-color: transparent;
    border: none;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.btn-paste:hover {
    color: #0F4C3A !important;
    background-color: #F5F2EB !important;
}
.btn-paste:active {
    transform: scale(0.92);
}

/* Primary Forest Green Button */
.btn-forest {
    background-color: #0F4C3A;
    color: #FFFFFF;
    border-radius: 9999px;
    font-weight: 600;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(15, 76, 58, 0.2);
}
.btn-forest:hover {
    background-color: #0B3B2D;
    box-shadow: 0 4px 14px rgba(15, 76, 58, 0.3);
    transform: translateY(-1px);
}
.btn-forest:active {
    transform: translateY(0) scale(0.98);
}

/* ── Simple Wave Progress Line ── */
.simple-fetch-track {
    position: relative;
    width: 100%;
    height: 3px;
    background: rgba(15, 76, 58, 0.12);
    border-radius: 9999px;
    overflow: hidden;
    margin-top: 14px;
}

/* Wave shimmer sweep */
.simple-fetch-track .moving-runner {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: 9999px;
    background: linear-gradient(90deg,
        rgba(15, 76, 58, 0.08) 0%,
        rgba(15, 76, 58, 0.08) 20%,
        #0F4C3A 45%,
        #10B981 55%,
        rgba(15, 76, 58, 0.08) 80%,
        rgba(15, 76, 58, 0.08) 100%);
    background-size: 200% 100%;
    animation: wave-sweep 1.8s ease-in-out infinite;
}

/* Fill bar (real progress) */
#fetch-progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 9999px;
    background: linear-gradient(90deg, #0F4C3A 0%, #10B981 100%);
    opacity: 0.7;
    transition: width 10000ms linear;
}

@keyframes wave-sweep {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

@keyframes fetchPulse {
    0%   { opacity: 0.5; }
    50%  { opacity: 1; }
    100% { opacity: 0.5; }
}

/* Tabular numbers for clean stats — rendered in DM Serif Display */
#results-card #followers,
#results-card #hearts,
#results-card #following,
#results-card #videos,
#results-card #friends,
#results-card #hearts-per-follower,
#results-card #est-engagement {
    font-family: var(--font-display);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

/* Typography utility classes */
.font-display {
    font-family: var(--font-display);
    font-weight: 400;
}
.font-sans {
    font-family: var(--font-sans);
}
/* Label style: small-caps uppercase with tracking — matches image labels */
.font-label {
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* FAQ Accordion */
.faq-accordion-item {
    border-bottom: 1px solid #EAE6DE;
    transition: background-color 0.2s ease;
}
.faq-accordion-header {
    cursor: pointer;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 0;
    text-align: left;
    background: transparent;
    border: none;
}
.faq-accordion-header:hover .faq-title {
    color: #0F4C3A;
}
.faq-icon {
    width: 1.25rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #78716C;
    transition: transform 0.25s ease, color 0.2s ease;
    flex-shrink: 0;
}
.faq-accordion-item.active .faq-icon {
    transform: rotate(45deg);
    color: #0F4C3A;
}
.faq-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), padding 0.25s ease;
}
.faq-accordion-item.active .faq-accordion-content {
    max-height: 500px;
    transition: max-height 0.35s ease-in-out;
}

/* Screenshot capture styling */
#results-card.is-capturing {
    background-color: #FFFFFF !important;
    color: #18181B !important;
    border: 1px solid #EAE6DE !important;
    padding: 2.5rem !important;
    max-width: 900px !important;
    box-shadow: none !important;
    border-radius: 1.75rem !important;
}
#results-card.is-capturing #nickname {
    color: #18181B !important;
}
#results-card.is-capturing #username {
    color: #0F4C3A !important;
}
#results-card.is-capturing .card-sand,
#results-card.is-capturing .bg-sand {
    background-color: #F5F2EB !important;
    border-color: #E6E0D4 !important;
}
#results-card.is-capturing #screenshot-footer {
    display: flex !important;
    border-color: #EAE6DE !important;
    margin-top: 2rem !important;
}
#results-card.is-capturing #screenshot-footer span {
    color: #18181B !important;
}
#results-card.is-capturing #screenshot-footer p {
    color: #78716C !important;
}

/* Skip link */
.skip-link {
    position: absolute;
    top: -100px;
    left: 1rem;
    background: #0F4C3A;
    color: #FFFFFF;
    padding: .5rem 1rem;
    border-radius: .5rem;
    z-index: 9999;
    font-weight: 600;
    text-decoration: none;
    transition: top .2s ease;
}
.skip-link:focus {
    top: 1rem;
    outline: 2px solid #0F4C3A;
    outline-offset: 2px;
}

/* Google Translate Frame Hidden */
.goog-te-banner-frame,
.goog-te-balloon-frame,
#goog-gt-tt,
.goog-tooltip,
.goog-tooltip:hover,
.goog-text-highlight {
    display: none !important;
}
body {
    top: 0px !important;
}
.skiptranslate {
    display: none !important;
}
body.translated-ltr,
body.translated-rtl {
    margin-top: 0 !important;
}
iframe.goog-te-banner-frame {
    display: none !important;
}

@media (min-width: 640px) {
    .sm\:hidden { display: none !important; }
    .sm\:flex { display: flex !important; }
}
@media (min-width: 768px) {
    .md\:hidden { display: none !important; }
    .md\:flex { display: flex !important; }
}

/* Primary Action Buttons */
#copy-stats-action-btn {
    background-color: #0F4C3A !important;
    color: #FFFFFF !important;
    border: 1px solid #0F4C3A !important;
    cursor: pointer !important;
    display: inline-flex !important;
}
#copy-stats-action-btn:hover {
    background-color: #0B3B2D !important;
    opacity: 0.95;
}
#copy-stats-action-btn span {
    color: #FFFFFF !important;
}
#copy-stats-action-btn svg {
    stroke: #FFFFFF !important;
}

/* Circular Avatar Box & Download Button */
.profile-avatar-box {
    border-radius: 9999px !important;
    -webkit-border-radius: 9999px !important;
    overflow: hidden !important;
}
.profile-avatar-box img,
#avatar {
    border-radius: 9999px !important;
    -webkit-border-radius: 9999px !important;
    object-fit: cover !important;
}
#download-avatar-btn {
    border-radius: 9999px !important;
}

/* Action Badges below Hero in Clean Colors */
.badge-whatsapp,
.badge-downloader {
    background-color: #F5F2EB !important;
    color: #18181B !important;
    border: 1px solid #E6E0D4 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 1px 3px rgba(28, 25, 23, 0.04) !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}
.badge-whatsapp:hover,
.badge-downloader:hover {
    background-color: #EAE6DE !important;
    border-color: #D5CFBE !important;
    color: #0F4C3A !important;
    box-shadow: 0 4px 12px rgba(28, 25, 23, 0.08) !important;
    transform: translateY(-1px);
}
.badge-whatsapp svg,
.badge-downloader svg {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    flex-shrink: 0 !important;
}
.badge-whatsapp svg {
    color: #0F4C3A !important;
    fill: #0F4C3A !important;
    transition: transform 0.2s ease;
}
.badge-downloader svg {
    color: #18181B !important;
    fill: currentColor !important;
    transition: color 0.2s ease;
}
.badge-downloader:hover svg {
    color: #0F4C3A !important;
}

@media (max-width: 639px) {
    .badge-whatsapp,
    .badge-downloader {
        flex: 1 1 0% !important;
        min-width: 0 !important;
        padding: 7px 9px !important;
        font-size: 11px !important;
        gap: 5px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
    }
    .badge-whatsapp span,
    .badge-downloader span {
        font-size: 11px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

/* Header navbar button */
.nav-downloader-btn {
    background-color: #0F4C3A !important;
    color: #FFFFFF !important;
    border: 1px solid #0F4C3A !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
}
.nav-downloader-btn:hover {
    background-color: #0B3B2D !important;
    border-color: #0B3B2D !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(15, 76, 58, 0.25) !important;
}
.nav-downloader-btn svg {
    fill: #FFFFFF !important;
    color: #FFFFFF !important;
}

/* Responsive Embeds & Third-Party Overlays */
iframe, video, embed, object {
    max-width: 100% !important;
}

/* ── Brand Logo (Domain name only with green .us) ── */
.site-logo-text {
    font-size: 1.375rem !important;
    font-weight: 900 !important;
    letter-spacing: -0.025em !important;
    color: #18181B !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
}
@media (min-width: 640px) {
    .site-logo-text {
        font-size: 1.5rem !important;
    }
}
.site-logo-text .logo-tld,
.logo-tld {
    color: #0F4C3A !important;
    font-weight: 900 !important;
}

/* ── Social Share Tray & Action Buttons ── */
#social-share-tray {
    display: none;
}
#social-share-tray.flex {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding-top: 10px !important;
    border-top: 1px solid #EAE6DE !important;
}
#social-share-tray button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 9999px !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    transition: transform 0.15s ease, opacity 0.15s ease !important;
}
#social-share-tray button:hover {
    transform: scale(1.1) !important;
    opacity: 0.92 !important;
}
#social-share-tray button:active {
    transform: scale(0.92) !important;
}
#social-share-tray button svg {
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    min-height: 15px !important;
    max-width: 15px !important;
    max-height: 15px !important;
    display: block !important;
    fill: #FFFFFF !important;
    color: #FFFFFF !important;
}
#social-share-tray #share-copy-link svg {
    fill: none !important;
    stroke: #FFFFFF !important;
}

@media (max-width: 400px) {
    #social-share-tray button {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
    }
    #social-share-tray button svg {
        width: 13px !important;
        height: 13px !important;
        max-width: 13px !important;
        max-height: 13px !important;
    }
    #social-share-tray.flex {
        gap: 6px !important;
    }
}

#copy-stats-action-btn,
#share-toggle-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 46px !important;
    visibility: visible !important;
    opacity: 1 !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
}
#copy-stats-action-btn svg,
#share-toggle-btn svg {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    flex-shrink: 0 !important;
}

/* ── Responsive Profile Header & Card ── */
.profile-header-responsive {
    max-width: 100% !important;
    overflow: hidden !important;
}
.profile-avatar-wrapper {
    position: relative !important;
    width: 68px !important;
    height: 68px !important;
    min-width: 68px !important;
    min-height: 68px !important;
    flex-shrink: 0 !important;
    display: block !important;
}
@media (min-width: 640px) {
    .profile-avatar-wrapper {
        width: 80px !important;
        height: 80px !important;
        min-width: 80px !important;
        min-height: 80px !important;
    }
}
.profile-avatar-box {
    width: 100% !important;
    height: 100% !important;
    border-radius: 9999px !important;
    overflow: hidden !important;
}
#download-avatar-btn {
    position: absolute !important;
    bottom: -1px !important;
    right: -1px !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 9999px !important;
    background-color: #0F4C3A !important;
    color: #FFFFFF !important;
    border: 1.5px solid #FFFFFF !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 30 !important;
    cursor: pointer !important;
}
#download-avatar-btn svg {
    width: 11px !important;
    height: 11px !important;
    min-width: 11px !important;
    min-height: 11px !important;
    max-width: 11px !important;
    max-height: 11px !important;
}
.profile-info-box {
    min-width: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
}
.profile-info-box #nickname {
    word-break: break-word !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.profile-info-box #username {
    word-break: break-all !important;
}
#verified-badge {
    color: #10B981 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    margin-left: 2px !important;
}
#verified-badge svg {
    fill: #10B981 !important;
    color: #10B981 !important;
}

/* ── Space between action badges and fetching card ── */
#timeline-container {
    margin-top: 0 !important;
    background: transparent !important;
}

/* Ensure badges row has breathing room before content below */
.action-badges-row {
    margin-bottom: 24px !important;
}
@media (min-width: 640px) {
    .action-badges-row {
        margin-bottom: 30px !important;
    }
}

/* ── Results Card 2-Column Responsive Layout ── */
.results-card-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.75rem !important;
    width: 100% !important;
}
.results-left-col {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    min-width: 0 !important;
    width: 100% !important;
}
.results-right-col {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    border-top: 1px solid #EAE6DE !important;
    border-left: none !important;
    padding-top: 1.75rem !important;
    padding-left: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
}

@media (min-width: 1024px) {
    .results-card-grid {
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) !important;
        gap: 2.5rem !important;
    }
    .results-right-col {
        border-top: none !important;
        border-left: 1px solid #EAE6DE !important;
        padding-top: 0 !important;
        padding-left: 2rem !important;
    }
}

/* ── Region Box (Registered & Current Region) One Beside One on Laptop / Tablet ── */
.results-region-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    gap: 0.75rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.results-region-item {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    min-width: 0 !important;
    flex: 1 1 0% !important;
}
.results-region-divider {
    width: 100% !important;
    height: 1px !important;
    background-color: #E6E0D4 !important;
    flex-shrink: 0 !important;
    margin: 0.125rem 0 !important;
}
.results-region-item.hidden,
.results-region-divider.hidden {
    display: none !important;
}

/* On laptop / tablet / desktop (min-width: 640px): show one beside one */
@media (min-width: 640px) {
    .results-region-box {
        flex-direction: row !important;
        align-items: center !important;
        gap: 1rem !important;
    }
    .results-region-item {
        flex: 1 1 0% !important;
        min-width: 0 !important;
    }
    .results-region-divider {
        width: 1px !important;
        height: 38px !important;
        margin: 0 !important;
    }
}

/* Screenshot capture layout: always one beside one */
#results-card.is-capturing .results-card-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) !important;
    gap: 2rem !important;
}
#results-card.is-capturing .results-right-col {
    border-top: none !important;
    border-left: 1px solid #EAE6DE !important;
    padding-top: 0 !important;
    padding-left: 1.75rem !important;
}
#results-card.is-capturing .results-region-box {
    flex-direction: row !important;
    align-items: center !important;
    gap: 1rem !important;
}
#results-card.is-capturing .results-region-divider {
    width: 1px !important;
    height: 38px !important;
    margin: 0 !important;
}

@media (max-width: 480px) {
    #results-card {
        padding: 1rem !important;
        border-radius: 1.25rem !important;
    }
    .profile-avatar-wrapper {
        width: 58px !important;
        height: 58px !important;
        min-width: 58px !important;
        min-height: 58px !important;
    }
    #download-avatar-btn {
        width: 19px !important;
        height: 19px !important;
        bottom: 0px !important;
        right: 0px !important;
        border-width: 1px !important;
    }
    #download-avatar-btn svg {
        width: 9.5px !important;
        height: 9.5px !important;
        min-width: 9.5px !important;
        min-height: 9.5px !important;
        max-width: 9.5px !important;
        max-height: 9.5px !important;
    }
    #copy-stats-action-btn,
    #share-toggle-btn {
        font-size: 0.8125rem !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    /* Full-width share tray on narrow screens */
    #social-share-tray.flex {
        justify-content: flex-start !important;
    }
}

/* ── Full Site Responsiveness Patches ── */
@media (max-width: 360px) {
    /* Very narrow phones — compact everything */
    #results-card {
        padding: 0.875rem !important;
    }
    .profile-avatar-wrapper {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        min-height: 52px !important;
    }
    #download-avatar-btn {
        width: 18px !important;
        height: 18px !important;
        bottom: 0px !important;
        right: 0px !important;
    }
    #download-avatar-btn svg {
        width: 9px !important;
        height: 9px !important;
    }
    #copy-stats-action-btn span,
    #share-toggle-btn span {
        font-size: 0.75rem !important;
    }
    #social-share-tray button {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
    }
}

/* ── General mobile overflow guard ── */
@media (max-width: 640px) {
    .max-w-4xl, .max-w-xl, .max-w-2xl {
        max-width: 100% !important;
    }
    #results-card {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* ── Creator Brand Name (MOOR) in Green (#0F4C3A) ── */
a[href*="moor_._"],
.moor-brand-link {
    color: #0F4C3A !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}
a[href*="moor_._"]:hover,
.moor-brand-link:hover {
    color: #0B3B2D !important;
    text-decoration: underline !important;
}
/* Clean, modern primary navigation */
.site-header{background:rgba(255,255,255,.88);backdrop-filter:saturate(170%) blur(16px);border-color:#e7e9e7;box-shadow:0 1px 12px rgba(24,24,27,.035)}.primary-nav-links>a{border-radius:999px!important;transition:color .18s ease,background-color .18s ease}.primary-nav-links>a:hover,.primary-nav-links>a:focus-visible{background:#f1f6f3!important;color:#0f4c3a!important}.site-header a:focus-visible,.site-header button:focus-visible{outline:2px solid #0f4c3a;outline-offset:2px}.desktop-language-toggle{box-shadow:none!important;background:rgba(255,255,255,.72)!important}.mobile-menu-panel{background:rgba(255,255,255,.98)!important;border-color:#e7e9e7!important}

/* Festive display type for the blog masthead */
.blog-elegant-title{font-family:'Cormorant Garamond',var(--font-display);font-weight:600;letter-spacing:.015em;line-height:1.08}


/* Lightweight guide sharing links */






/* Article-end social sharing */
.guide-share-wrap { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #EAE6DE; }
.guide-share { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; margin: 0; padding: 0; border: 0; background: transparent; }
.guide-share > span:first-child { margin-right: .25rem; font-weight: 700; color: #18181B; }
.guide-share-link { display: inline-flex; align-items: center; gap: .45rem; color: #44403C; background: #fff; border: 1px solid #EAE6DE; border-radius: 999px; padding: .5rem .8rem; font-weight: 600; text-decoration: none; transition: background-color .15s ease, border-color .15s ease, transform .15s ease; }
.guide-share-link:hover { background: #FAF8F5; border-color: #D6D0C5; transform: translateY(-1px); }
.share-network-icon { display: inline-flex; color: var(--share-brand); }
.share-icon { width: 1.05rem; height: 1.05rem; display: block; }
.guide-share-link:focus-visible { outline: 2px solid #0F4C3A; outline-offset: 3px; }
@media (max-width: 420px) { .guide-share > span:first-child { flex-basis: 100%; } }

/* Consistent, compact footer across the site */
.site-footer { width: 100%; margin-top: 4rem; padding: 2.25rem 1.25rem; background: #fff; border-top: 1px solid #EAE6DE; color: #57534E; }
.site-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; width: 100%; max-width: 72rem; margin: 0 auto; }
.site-footer-brand-block p { margin: .35rem 0 0; color: #78716C; font-size: .875rem; }
.site-footer-brand { color: #18181B; font-weight: 800; font-size: 1.15rem; text-decoration: none; letter-spacing: -.035em; }
.site-footer-brand span { color: #0F4C3A; }
.site-footer-nav { display: flex; flex-wrap: wrap; gap: .55rem 1.25rem; }
.site-footer-nav a { color: #57534E; text-decoration: none; font-size: .875rem; transition: color .15s ease; }
.site-footer-nav a:hover { color: #0F4C3A; }
.site-footer a:focus-visible { outline: 2px solid #0F4C3A; outline-offset: 3px; border-radius: 3px; }
.site-footer-bottom { display: flex; justify-content: space-between; gap: 1rem; max-width: 72rem; margin: 1.5rem auto 0; padding-top: 1rem; border-top: 1px solid #F1EEE8; color: #78716C; font-size: .75rem; }
@media (max-width: 640px) { .site-footer-inner { align-items: flex-start; flex-direction: column; gap: 1.25rem; } .site-footer-nav { gap: .65rem 1rem; } .site-footer-bottom { flex-direction: column; gap: .35rem; } }
.guide-share-link { width: 2.7rem; height: 2.7rem; justify-content: center; padding: 0; border-radius: 50%; }
.guide-share-link .share-network-icon { align-items: center; justify-content: center; }


/* ===== bgg-branding: BYPASS GRITY GROUP watermark & copyright ===== */
.bgg-watermark {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  user-select: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27460%27%20height%3D%27230%27%3E%3Ctext%20x%3D%27230%27%20y%3D%27115%27%20text-anchor%3D%27middle%27%20transform%3D%27rotate%28-30%20230%20115%29%27%20font-family%3D%27DM%20Sans%2C%20Inter%2C%20sans-serif%27%20font-size%3D%2730%27%20font-weight%3D%27700%27%20fill%3D%27rgba%2815%2C76%2C58%2C0.075%29%27%20letter-spacing%3D%272%27%3EBYPASS%20GRITY%20GROUP%3C%2Ftext%3E%3C%2Fsvg%3E");
  background-repeat: repeat;
  background-size: 460px 230px;
}
.bgg-badge {
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 2;
  pointer-events: none;
  user-select: none;
  font: 600 11px/1 "DM Sans", Inter, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(15, 76, 58, .55);
  background: rgba(250, 248, 245, .72);
  border: 1px solid rgba(15, 76, 58, .14);
  border-right: 0;
  border-bottom: 0;
  border-radius: .6rem 0 0 0;
  padding: .42rem .7rem;
}
.bgg-copyright {
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(15, 76, 58, .12);
  text-align: center;
  font: 400 12.5px/1.7 "DM Sans", Inter, sans-serif;
  color: rgba(24, 24, 27, .62);
}
.bgg-copyright strong {
  color: #0F4C3A;
  font-weight: 700;
  letter-spacing: .1em;
}
.site-footer-bottom .bgg-brand {
  font-weight: 600;
  color: rgba(15, 76, 58, .8);
}
@media print {
  .bgg-watermark, .bgg-badge { display: none; }
}
/* ===== /bgg-branding ===== */