:root {
    color-scheme: light;
    --bg: #f3efe7;
    --panel: rgba(255, 255, 255, 0.82);
    --panel-strong: #fffaf2;
    --ink: #1f2933;
    --muted: #5b6670;
    --brand: #0b6e4f;
    --brand-dark: #084c39;
    --accent: #dd6b20;
    --border: rgba(31, 41, 51, 0.08);
    --shadow: 0 22px 50px rgba(31, 41, 51, 0.12);
    --page-gradient:
        radial-gradient(circle at top left, rgba(221, 107, 32, 0.18), transparent 25%),
        radial-gradient(circle at top right, rgba(11, 110, 79, 0.18), transparent 28%),
        linear-gradient(180deg, #f8f4ee 0%, #f2ece2 100%);
    --nav-bg: rgba(248, 244, 238, 0.72);
    --panel-border: rgba(255, 255, 255, 0.45);
    --soft-surface: rgba(255, 255, 255, 0.58);
    --soft-surface-strong: rgba(255, 255, 255, 0.72);
    --input-bg: rgba(255, 255, 255, 0.9);
    --input-border: rgba(31, 41, 51, 0.16);
    --link: #0b6e4f;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #111827;
    --panel: rgba(24, 32, 43, 0.86);
    --panel-strong: #18202b;
    --ink: #eef2f6;
    --muted: #a9b4c0;
    --brand: #1a936f;
    --brand-dark: #0f5f4b;
    --accent: #f59e47;
    --border: rgba(226, 232, 240, 0.14);
    --shadow: 0 24px 60px rgba(0, 0, 0, 0.42);
    --page-gradient:
        radial-gradient(circle at top left, rgba(245, 158, 71, 0.16), transparent 26%),
        radial-gradient(circle at top right, rgba(26, 147, 111, 0.2), transparent 30%),
        linear-gradient(180deg, #0f1722 0%, #111827 54%, #0b111b 100%);
    --nav-bg: rgba(17, 24, 39, 0.78);
    --panel-border: rgba(226, 232, 240, 0.12);
    --soft-surface: rgba(255, 255, 255, 0.07);
    --soft-surface-strong: rgba(255, 255, 255, 0.1);
    --input-bg: rgba(15, 23, 34, 0.92);
    --input-border: rgba(226, 232, 240, 0.2);
    --link: #42c49b;
}

body {
    font-family: "Manrope", sans-serif;
    color: var(--ink);
    background: var(--page-gradient);
    min-height: 100vh;
}

.site-header,
.sticky-nav-wrapper {
    position: sticky;
    top: 0;
    z-index: 1030;
}

.app-nav {
    backdrop-filter: blur(18px);
    background: var(--nav-bg);
    border-bottom: 1px solid var(--border);
}

a {
    color: var(--link);
}

.navbar-brand,
.nav-link {
    color: var(--ink);
}

.app-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.app-brand-logo {
    display: block;
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 auto;
    border-radius: 0.75rem;
}

.account-collapsible-panel {
    scroll-margin-top: 6rem;
}

.scroll-top-button {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1040;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border: 1px solid rgba(11, 110, 79, 0.24);
    border-radius: 999px;
    color: #ffffff;
    background: var(--brand);
    box-shadow: 0 16px 38px rgba(13, 53, 38, 0.22);
}

.scroll-top-button[hidden] {
    display: none;
}

.scroll-top-button:hover,
.scroll-top-button:focus-visible {
    background: var(--brand-dark);
}

.scroll-top-icon {
    width: 1.25rem;
    height: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 575.98px) {
    .scroll-top-button {
        right: 1rem;
        bottom: 1rem;
        width: 2.75rem;
        height: 2.75rem;
    }
}

.app-nav-actions {
    order: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.app-nav .navbar-collapse {
    order: 3;
}

.nav-link:hover,
.nav-link:focus,
.navbar-brand:hover,
.navbar-brand:focus {
    color: var(--brand);
}

.nav-message-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding-right: 1.15rem;
}

.nav-message-link .notification-count {
    top: 0;
    right: 0;
}

.navbar-toggler {
    border-color: var(--input-border);
}

:root[data-theme="dark"] .navbar-toggler-icon {
    filter: invert(1) grayscale(1) brightness(1.6);
}

@media (max-width: 991.98px) {
    .app-nav .navbar-collapse {
        padding-top: 0.75rem;
        text-align: left;
    }

    .app-nav .navbar-nav {
        gap: 0.5rem;
        align-items: stretch;
    }

    .app-nav .nav-link,
    .app-nav .dropdown-item {
        text-align: left;
    }

    .app-nav .nav-link {
        display: flex;
        justify-content: flex-start;
        width: 100%;
    }

    .app-nav .dropdown-menu {
        text-align: left;
    }

    .app-nav .theme-toggle {
        margin-top: 0.25rem;
    }
}

@media (min-width: 992px) {
    .app-nav-actions {
        order: 3;
    }

    .app-nav .navbar-collapse {
        order: 2;
    }
}

.navbar-brand,
h1,
h2 {
    font-weight: 800;
}

.btn-brand {
    background: linear-gradient(135deg, var(--brand), var(--brand-dark));
    color: white;
    border: none;
}

.cookie-banner {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1080;
    display: flex;
    align-items: center;
    gap: 1rem;
    width: min(100% - 2rem, 520px);
    padding: 0.85rem 0.95rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel-strong);
    box-shadow: 0 16px 40px rgba(31, 41, 51, 0.16);
}

.cookie-banner[hidden] {
    display: none;
}

.cookie-banner-copy {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
    color: var(--ink);
    font-size: 0.88rem;
    line-height: 1.35;
}

.cookie-banner-copy span {
    color: var(--muted);
}

.site-footer {
    margin-top: 2rem;
    border-top: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.28);
}

:root[data-theme="dark"] .site-footer {
    background: rgba(15, 23, 34, 0.42);
}

.site-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.site-footer-brand,
.site-footer-links,
.site-footer-actions {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.site-footer-brand {
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 700;
}

.site-footer-logo {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.55rem;
}

.site-footer-links a {
    color: var(--muted);
    font-size: 0.9rem;
    text-decoration: none;
}

.site-footer-links a:hover,
.site-footer-links a:focus {
    color: var(--brand);
    text-decoration: underline;
}

.site-footer-theme-toggle {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-color: var(--input-border);
    color: var(--muted);
    background: var(--soft-surface);
}

.site-footer-theme-toggle:hover,
.site-footer-theme-toggle:focus-visible {
    color: var(--brand);
    border-color: rgba(11, 110, 79, 0.32);
    background: var(--soft-surface-strong);
}

.legal-page {
    max-width: 860px;
    padding: 2rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel);
    box-shadow: var(--shadow);
}

.legal-page h1 {
    margin-bottom: 1rem;
}

.legal-section {
    margin-top: 1.75rem;
}

.legal-section h2 {
    margin-bottom: 0.65rem;
    font-size: 1.2rem;
}

.legal-section p {
    margin-bottom: 0;
    color: var(--muted);
    line-height: 1.7;
}

.btn-brand:hover,
.btn-brand:focus {
    color: white;
    background: linear-gradient(135deg, var(--brand-dark), var(--brand));
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    padding: 0;
}

.theme-toggle svg {
    width: 1rem;
    height: 1rem;
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.theme-toggle .theme-toggle-sun {
    display: none;
    fill: none;
}

:root[data-theme="dark"] .theme-toggle .theme-toggle-moon {
    display: none;
}

:root[data-theme="dark"] .theme-toggle .theme-toggle-sun {
    display: block;
}

.dropdown-menu {
    background: var(--panel-strong);
    border-color: var(--border);
    box-shadow: var(--shadow);
}

.dropdown-item {
    color: var(--ink);
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: var(--ink);
    background: var(--soft-surface);
}

.theme-switch-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.theme-switch-input {
    flex: 0 0 auto;
    margin: 0;
    cursor: pointer;
}

.form-control,
.form-select,
.form-check-input {
    color: var(--ink);
    background-color: var(--input-bg);
    border-color: var(--input-border);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    color: var(--ink);
    background-color: var(--input-bg);
    border-color: rgba(26, 147, 111, 0.7);
    box-shadow: 0 0 0 0.2rem rgba(26, 147, 111, 0.18);
}

.form-control::placeholder {
    color: var(--muted);
}

.generated-location-field[readonly] {
    cursor: default;
    background-color: var(--soft-surface);
}

.generated-location-field.is-manually-editable {
    background-color: var(--input-bg);
}

.generated-location-field-group .generated-location-unlock-button {
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    padding: 0;
}

.generated-location-unlock-button svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.generated-location-unlock-button.is-unlocked {
    color: white;
    border-color: var(--brand);
    background: var(--brand);
    opacity: 1;
}

.form-text,
.text-muted,
.meta-line {
    color: var(--muted) !important;
}

.btn-outline-secondary {
    color: var(--ink);
    border-color: var(--input-border);
    background: transparent;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    color: var(--ink);
    border-color: var(--brand);
    background: var(--soft-surface);
}

.table {
    --bs-table-color: var(--ink);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--border);
    color: var(--ink);
}

.modal-content,
.offcanvas {
    color: var(--ink);
    background: var(--panel-strong);
    border-color: var(--border);
}

.modal-header,
.modal-footer {
    border-color: var(--border);
}

.btn-close {
    filter: none;
}

:root[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(1) brightness(1.6);
}

.alert-success {
    color: var(--ink);
    background: rgba(26, 147, 111, 0.16);
    border-color: rgba(26, 147, 111, 0.28);
}

.alert-danger {
    color: var(--ink);
    background: rgba(220, 53, 69, 0.14);
    border-color: rgba(220, 53, 69, 0.3);
}

.alert-warning {
    color: var(--ink);
    background: rgba(245, 158, 71, 0.16);
    border-color: rgba(245, 158, 71, 0.32);
}

.hero-panel,
.map-shell,
.list-shell,
.auth-card,
.panel-form,
.map-picker-panel {
    background: var(--panel);
    border: 1px solid var(--panel-border);
    box-shadow: var(--shadow);
    border-radius: 28px;
}

.hero-panel {
    padding: 2rem;
    display: grid;
    gap: 1.5rem;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
}

.hero-panel-compact {
    padding: 1.5rem 1.75rem;
    gap: 1rem;
}

.hero-panel h1 {
    font-size: clamp(2.2rem, 4vw, 4rem);
    max-width: 11ch;
}

.hero-panel-compact h1 {
    font-size: clamp(1.8rem, 3vw, 3rem);
    max-width: 14ch;
    margin-bottom: 0.5rem;
}

.hero-panel-compact .eyebrow {
    margin-bottom: 0.45rem;
}

.hero-panel-compact p {
    max-width: 62ch;
}

.landing-hero-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: stretch;
}

.landing-hero-grid .hero-panel {
    height: 100%;
}

.landing-hero-grid .hero-panel-compact {
    grid-template-columns: minmax(0, 1fr);
    align-content: space-between;
}

.landing-hero-grid .hero-card {
    width: 100%;
    min-width: 0;
}

.hero-panel p,
.panel-copy,
.auth-card p,
.form-page-header p {
    color: var(--muted);
    margin-bottom: 0;
}

.guest-benefit-copy {
    max-width: 760px;
    margin: 1rem auto 0;
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.55;
    text-align: center;
}

.faq-page {
    display: grid;
    gap: 1.5rem;
}

.faq-panel {
    background: var(--panel);
    border: 1px solid var(--panel-border);
    box-shadow: var(--shadow);
    border-radius: 28px;
    padding: 1.25rem;
}

.faq-list {
    display: grid;
    gap: 0.65rem;
}

.faq-item {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--panel);
    overflow: hidden;
}

.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: var(--ink);
    padding: 1rem 1.1rem;
    cursor: pointer;
    font-weight: 800;
    list-style: none;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: ">";
    color: var(--brand);
    font-weight: 900;
    transition: transform 0.15s ease;
}

.faq-item[open] summary::after {
    transform: rotate(90deg);
}

.faq-item p {
    margin: 0;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 0.98rem;
    line-height: 1.7;
    padding: 0.95rem 1.1rem 1.1rem;
}

.eyebrow {
    display: inline-block;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.78rem;
    color: var(--accent);
    font-weight: 800;
}

.hero-card {
    background: linear-gradient(135deg, rgba(11, 110, 79, 0.1), rgba(221, 107, 32, 0.16));
    border-radius: 24px;
    padding: 1.5rem;
    min-width: 220px;
}

.landing-map-card {
    display: grid;
    justify-items: center;
    gap: 1rem;
    width: 100%;
    padding: 2rem;
    text-align: center;
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: 28px;
    box-shadow: var(--shadow);
}

.landing-map-visual {
    display: grid;
    place-items: center;
    min-height: 260px;
    padding: 1.5rem;
    overflow: hidden;
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: 28px;
    box-shadow: var(--shadow);
}

.landing-map-visual svg {
    display: block;
    width: min(100%, 720px);
    height: auto;
}

.map-region {
    fill: var(--soft-surface);
    stroke: var(--border);
    stroke-width: 2;
}

.map-region-two {
    fill: rgba(11, 110, 79, 0.08);
}

.route-line {
    fill: none;
    stroke: var(--accent);
    stroke-width: 7;
    stroke-linecap: round;
    stroke-dasharray: 14 16;
}

.coin-stack {
    filter: drop-shadow(0 12px 18px rgba(31, 41, 51, 0.16));
}

.pressed-coin {
    fill: rgba(221, 107, 32, 0.22);
    stroke: var(--accent);
    stroke-width: 4;
}

.coin-main {
    fill: rgba(255, 250, 242, 0.92);
    stroke: var(--accent);
    stroke-width: 4;
}

.coin-shadow {
    fill: rgba(11, 110, 79, 0.14);
    stroke: rgba(11, 110, 79, 0.2);
    stroke-width: 3;
}

.coin-mark {
    fill: none;
    stroke: var(--brand);
    stroke-width: 5;
    stroke-linecap: round;
    opacity: 0.78;
}

.coin-anchor {
    fill: var(--brand);
    stroke: var(--panel-strong);
    stroke-width: 4;
}

.coin-sparkles circle {
    fill: var(--accent);
    stroke: var(--accent);
    opacity: 0.5;
}

.landing-map-card h2 {
    margin-bottom: 0;
    font-size: clamp(1.6rem, 2.8vw, 2.4rem);
}

.landing-map-card p {
    max-width: 52ch;
    margin-bottom: 0.25rem;
    color: var(--muted);
}

.hero-panel-compact .hero-card {
    padding: 1.1rem 1.2rem;
    min-width: 190px;
}

.metric {
    font-size: 3rem;
    font-weight: 800;
}

.hero-panel-compact .metric {
    font-size: 2.35rem;
}

.metric-label {
    color: var(--muted);
}

.map-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(320px, 0.9fr);
    gap: 1.5rem;
}

.home-map-layout {
    grid-template-columns: minmax(0, 1.35fr) minmax(360px, 1fr);
    align-items: stretch;
}

.map-page-layout {
    --map-page-panel-height: calc(100dvh - 138px);
    grid-template-columns: minmax(0, 1.45fr) minmax(340px, 0.8fr);
    align-items: stretch;
    grid-auto-rows: var(--map-page-panel-height);
}

.map-page-main {
    min-height: calc(100dvh - 67px);
}

.map-shell,
.list-shell,
.panel-form,
.map-picker-panel {
    padding: 1rem;
}

.home-map-layout > .map-shell,
.home-map-layout > .list-shell {
    height: 620px;
    min-height: 0;
}

.home-map-layout .map-shell,
.home-map-layout .list-shell {
    display: flex;
    flex-direction: column;
}

.home-map-layout .list-shell {
    overflow: hidden;
}

.map-page-map-shell,
.map-side-stack,
.location-list-panel {
    min-height: 0;
}

.map-page-map-shell {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    height: 100%;
    min-height: 0;
    max-height: none;
}

.map-side-stack {
    box-sizing: border-box;
    display: flex;
    height: 100%;
    min-height: 0;
    max-height: none;
}

.map-control-panel {
    display: grid;
    gap: 0.9rem;
    flex: 0 0 auto;
}

.location-list-panel {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
    height: 100%;
    max-height: 100%;
}

.filter-mode-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
    padding: 0.25rem;
    width: min(100%, 25rem);
    margin-left: auto;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--soft-surface-strong);
}

.filter-mode-option {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 0;
    min-height: 2.75rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid transparent;
    border-radius: 11px;
    background: transparent;
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.filter-mode-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.filter-mode-option span {
    display: grid;
    justify-items: center;
    gap: 0.05rem;
    text-align: center;
    overflow-wrap: anywhere;
}

.filter-mode-option strong {
    color: var(--ink);
    font-size: 0.88rem;
    line-height: 1.2;
}

.filter-mode-option small {
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.filter-mode-option:has(input:checked) {
    background: var(--panel-strong);
    border-color: var(--border);
}

.filter-mode-option:has(input:checked) strong {
    color: var(--brand-dark);
}

.filter-mode-option:has(input:checked) small {
    color: var(--brand);
}

.filter-mode-option:hover {
    background: var(--soft-surface);
}

.filter-mode-option:has(input:focus-visible) {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.filter-fields {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-0.35rem);
    transition: max-height 0.24s ease, opacity 0.18s ease, transform 0.24s ease;
}

.filter-fields.is-open {
    max-height: 420px;
    opacity: 1;
    transform: translateY(0);
}

.filter-field {
    display: grid;
    gap: 0.35rem;
}

.filter-field > span {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.filter-toolbar {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 0.75rem;
}

.filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.filter-toggle svg {
    width: 1rem;
    height: 1rem;
    fill: currentColor;
    flex: 0 0 auto;
}

#location-filters {
    margin-bottom: 0;
}

#location-filters.is-open {
    margin-bottom: 0.35rem;
}

.filters-bar {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 0.8fr)) auto;
    gap: 0.75rem;
    align-items: stretch;
    padding: 0.85rem;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--soft-surface);
}

.filters-bar.map-filter-bar {
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    padding: 1rem;
}

.filters-bar > * {
    min-width: 0;
}

.filter-reset-button {
    display: inline-grid;
    place-items: center;
    width: 2.4rem;
    align-self: end;
    padding-right: 0;
    padding-left: 0;
}

.filter-reset-button svg {
    width: 1.05rem;
    height: 1.05rem;
    fill: currentColor;
}

#overview-map,
#picker-map {
    border-radius: 22px;
    min-height: 560px;
    overflow: hidden;
    isolation: isolate;
}

.overview-map-compact {
    min-height: 500px;
    flex: 1 1 auto;
}

.overview-map-large {
    flex: 1 1 auto;
    min-height: 0;
}

#overview-map.overview-map-large {
    min-height: 0;
}

.coinmap-world-control,
.coinmap-location-control,
.coinmap-layer-control,
.coinmap-cluster-toggle-control {
    overflow: hidden;
}

.coinmap-marker-cluster {
    display: grid;
    place-items: center;
    border: 3px solid rgba(255, 255, 255, 0.88);
    border-radius: 999px;
    color: #ffffff;
    background:
        radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.32), transparent 34%),
        linear-gradient(135deg, var(--brand), var(--brand-dark));
    box-shadow: 0 10px 24px rgba(31, 41, 51, 0.24);
}

.coinmap-marker-cluster span {
    display: grid;
    place-items: center;
    min-width: 2rem;
    min-height: 2rem;
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1;
}

.coinmap-marker-cluster-medium {
    background:
        radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.32), transparent 34%),
        linear-gradient(135deg, #0b6e4f, #dd6b20);
}

.coinmap-marker-cluster-large {
    background:
        radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.32), transparent 34%),
        linear-gradient(135deg, var(--accent), #8a3f10);
}

.coinmap-group-cluster {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.45rem;
    min-width: 6rem;
    padding: 0.35rem 0.65rem 0.35rem 0.4rem;
    border: 3px solid rgba(255, 255, 255, 0.9);
    border-radius: 999px;
    color: #ffffff;
    background:
        radial-gradient(circle at 18% 28%, rgba(255, 255, 255, 0.28), transparent 38%),
        linear-gradient(135deg, #0f766e, #14532d);
    box-shadow: 0 12px 28px rgba(31, 41, 51, 0.26);
}

.coinmap-country-cluster {
    background:
        radial-gradient(circle at 18% 28%, rgba(255, 255, 255, 0.28), transparent 38%),
        linear-gradient(135deg, #1d4ed8, #0f172a);
}

.coinmap-region-cluster {
    background:
        radial-gradient(circle at 18% 28%, rgba(255, 255, 255, 0.28), transparent 38%),
        linear-gradient(135deg, #0f766e, #14532d);
}

.coinmap-group-cluster span {
    display: grid;
    place-items: center;
    min-width: 2rem;
    min-height: 2rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1;
}

.coinmap-group-cluster strong {
    overflow: hidden;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.coinmap-map-control-button {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    background: #fff;
    color: #1f2933;
    cursor: pointer;
}

.coinmap-map-control-button:hover,
.coinmap-map-control-button:focus {
    background: #f4f4f4;
}

.coinmap-map-control-button:disabled {
    cursor: progress;
    opacity: 0.72;
}

.coinmap-map-control-button.is-satellite {
    color: #0b6e4f;
}

.coinmap-map-control-button.is-clustering-disabled {
    color: #8a3f10;
    background: #fff7ed;
}

.coinmap-map-control-button svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.coinmap-location-button.is-loading svg {
    animation: coinmap-spin 0.9s linear infinite;
}

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

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.map-control-panel .panel-header {
    margin-bottom: 0;
}

.map-control-panel .panel-header h2 {
    flex: 0 0 auto;
    margin-bottom: 0;
}

.count-pill {
    background: rgba(11, 110, 79, 0.1);
    color: var(--brand-dark);
    border-radius: 999px;
    padding: 0.35rem 0.8rem;
    font-weight: 700;
}

.location-list {
    display: grid;
    flex: 1 1 auto;
    gap: 0.9rem;
    margin-top: 1.25rem;
    min-height: 0;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.list-sort-field {
    margin: 0.15rem 0 0.85rem;
}

.location-card {
    background: var(--panel-strong);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 1rem;
}

.location-card h3 {
    font-size: 1rem;
    margin-bottom: 0.35rem;
}

.location-distance {
    color: var(--brand-dark);
    font-weight: 700;
    margin-top: 0.2rem;
}

.location-card-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: start;
    margin-bottom: 0.35rem;
}

.location-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.meta-line {
    color: var(--muted);
    font-size: 0.94rem;
    margin-bottom: 0.4rem;
}

.inline-link {
    color: var(--brand-dark);
    font-weight: 700;
    text-decoration: none;
}

.auth-body {
    display: grid;
    place-items: center;
    padding: 1.5rem;
    min-height: calc(100vh - 72px);
}

.account-card {
    min-height: 150px;
}

.account-summary-card {
    min-height: 118px;
}

.account-primary-card {
    grid-column: 1;
    grid-row: 1;
}

.account-management-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.account-management-actions-single {
    grid-template-columns: minmax(0, 1fr);
}

.account-management-button {
    min-height: 3.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
}

.account-toggle-card {
    width: 100%;
    border: 1px solid var(--panel-border);
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.account-link-card {
    display: block;
    text-decoration: none;
}

.account-link-card:hover,
.account-link-card:focus-visible {
    color: var(--ink);
    text-decoration: none;
}

.account-toggle-card:hover,
.account-toggle-card:focus-visible,
.account-toggle-card.is-open {
    border-color: var(--brand);
    box-shadow: var(--shadow);
    transform: translateY(-1px);
}

.account-toggle-card .admin-card-header {
    display: flex;
}

.account-collapsible-panel[hidden] {
    display: none;
}

.account-collapsible-panel {
    animation: account-panel-open 0.18s ease-out;
}

.account-collection-layout {
    display: grid;
    gap: 1rem;
}

.account-collection-map {
    min-height: 360px;
}

.account-collection-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.account-collection-stat {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--soft-surface);
}

.account-collection-stat-value {
    color: var(--brand-dark);
    font-size: 1.85rem;
    font-weight: 800;
    line-height: 1;
}

.account-collection-stat-label {
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.account-collection-list {
    display: grid;
    gap: 1rem;
}

.account-collection-location-card {
    gap: 1rem;
    cursor: pointer;
}

.account-collection-location-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    max-width: 100%;
    padding: 0;
    border: 0;
    color: var(--ink);
    background: transparent;
    font: inherit;
    text-align: left;
}

.account-collection-location-toggle span {
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.2;
}

.account-collection-location-toggle::after {
    content: ">";
    color: var(--brand);
    font-weight: 900;
    transition: transform 0.15s ease;
}

.account-collection-location-card.is-open .account-collection-location-toggle::after {
    transform: rotate(90deg);
}

.account-collection-location-toggle:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 4px;
}

.account-collection-motif-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

.account-collection-motif-panel[hidden] {
    display: none;
}

.account-collection-motif {
    cursor: default;
}

.account-collection-motif .motif-coin-wrapper {
    width: min(100%, 150px);
}

.account-collection-motif a.motif-coin-side {
    border-color: transparent;
    background: transparent;
    background-image: none;
    box-shadow: none;
}

.account-collection-motif.is-missing {
    filter: grayscale(1);
    opacity: 0.56;
}

.account-collection-motif.is-missing:hover,
.account-collection-motif.is-missing:focus-within {
    transform: none;
    box-shadow: none;
}

.account-collection-motif.is-missing .motif-coin,
.account-collection-motif.is-missing:hover .motif-coin,
.account-collection-motif.is-missing:focus-within .motif-coin {
    animation: none;
    transform: none;
}

.motif-collection-form {
    display: flex;
    justify-content: flex-end;
}

.motif-collection-button {
    position: relative;
    z-index: 3;
    justify-self: end;
}

@keyframes account-panel-open {
    from {
        opacity: 0;
        transform: translateY(-0.35rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.account-location-list {
    max-height: 65vh;
    overflow-y: auto;
    padding-right: 0.25rem;
    gap: 0.55rem;
}

.account-location-card {
    border-radius: 14px;
    padding: 0.62rem 0.72rem;
}

.account-location-card h3 {
    font-size: 0.92rem;
    line-height: 1.25;
    margin-bottom: 0.2rem;
}

.account-location-card .meta-line {
    font-size: 0.78rem;
    margin-bottom: 0;
}

.account-location-card .status-badge {
    font-size: 0.66rem;
    padding: 0.2rem 0.5rem;
    white-space: nowrap;
}

.account-location-header-actions form {
    margin: 0;
}

.account-pagination-row {
    margin-top: 1rem;
}

.auth-shell {
    width: 100%;
    max-width: 520px;
}

.auth-shell-wide {
    max-width: none;
}

.auth-card {
    padding: 2rem;
}

.back-link {
    display: inline-block;
    margin-bottom: 1rem;
    color: var(--brand-dark);
    text-decoration: none;
    font-weight: 700;
}

.demo-box {
    margin-top: 1.25rem;
    padding: 1rem;
    border-radius: 18px;
    background: rgba(11, 110, 79, 0.08);
}

.form-page-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: start;
    margin-bottom: 1.5rem;
}

.location-form-layout {
    align-items: stretch;
}

.location-form-layout > [class*="col-"] {
    display: flex;
}

.location-form-layout .panel-form,
.location-form-layout .map-picker-panel {
    width: 100%;
    height: 100%;
}

.location-form-layout .map-picker-panel {
    display: flex;
    flex-direction: column;
}

.location-edit-submit-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.25rem;
}

.location-form-layout #picker-map {
    flex: 1 1 auto;
}

.map-address-search {
    display: grid;
    gap: 0.75rem;
    margin-top: 1rem;
}

.admin-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}

.profile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.profile-card {
    align-content: start;
}

.profile-card:last-child {
    grid-column: 1 / -1;
}

.profile-avatar-card {
    display: grid;
    justify-items: center;
    gap: 0.6rem;
}

.profile-avatar {
    display: grid;
    place-items: center;
    width: 7rem;
    height: 7rem;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--soft-surface);
    color: var(--brand-dark);
    font-size: 2.4rem;
    font-weight: 800;
    text-transform: uppercase;
}

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

.profile-section-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text);
}

.profile-email-label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.profile-verified-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 999px;
    color: #ffffff;
    background: #15803d;
}

.profile-verified-check svg {
    width: 0.78rem;
    height: 0.78rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.profile-avatar-editable {
    cursor: pointer;
    position: relative;
}

.avatar-edit-overlay {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.45);
    display: grid;
    place-items: center;
    opacity: 0;
    transition: opacity 0.18s ease;
    color: #fff;
    pointer-events: none;
}

.profile-avatar-editable:hover .avatar-edit-overlay {
    opacity: 1;
}

.profile-visibility-form {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
}

.profile-public-link {
    color: var(--muted);
    font-size: 0.92rem;
}

.public-profile-page .hero-panel {
    align-items: center;
}

.public-profile-identity {
    align-items: center;
    display: flex;
    gap: 1rem;
    min-width: 0;
}

.public-profile-avatar {
    flex: 0 0 auto;
    height: 5.25rem;
    width: 5.25rem;
}

.public-profile-display-name {
    color: var(--text);
    font-size: 1.08rem;
    font-weight: 800;
    margin-bottom: 0.15rem;
    overflow-wrap: anywhere;
}

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

.public-collection-list {
    margin-top: 1rem;
}

.public-collection-list .account-collection-motif-grid {
    padding: 0.9rem;
}

.discussion-author-link,
.discussion-username-link,
.community-thread-title-link {
    color: inherit;
    text-decoration: none;
}

.discussion-author-link:hover,
.discussion-author-link:focus,
.discussion-username-link:hover,
.discussion-username-link:focus,
.community-thread-title-link:hover,
.community-thread-title-link:focus {
    color: var(--brand);
    text-decoration: underline;
}

.crop-container {
    max-height: 500px;
    overflow: hidden;
    background: #000;
}

.crop-container img {
    display: block;
    max-width: 100%;
}

.admin-panel {
    background: var(--panel);
    border: 1px solid var(--panel-border);
    box-shadow: var(--shadow);
    border-radius: 28px;
    padding: 1.25rem;
}

.stack-list {
    display: grid;
    gap: 1rem;
    margin-top: 1.25rem;
}

#admin-location-list {
    max-height: 620px;
    overflow-y: auto;
    padding-right: 0.25rem;
}

#admin-location-list {
    gap: 0.55rem;
}

#admin-location-list .admin-card {
    border-radius: 14px;
    padding: 0.7rem 0.8rem;
}

#admin-location-list .admin-card h3 {
    font-size: 0.95rem;
    line-height: 1.25;
    margin-bottom: 0.2rem;
}

#admin-location-list .meta-line {
    font-size: 0.8rem;
    margin-bottom: 0;
}

#admin-location-list .status-badge {
    font-size: 0.68rem;
    padding: 0.22rem 0.55rem;
    white-space: nowrap;
}

.admin-card {
    background: var(--panel-strong);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 1rem;
}

.admin-card-header,
.action-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: start;
}

.action-row {
    align-items: center;
    margin-top: 1rem;
}

.admin-location-card-header {
    align-items: flex-start;
}

.admin-location-header-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.4rem;
}

.admin-location-header-actions .btn {
    font-size: 0.76rem;
    padding: 0.24rem 0.5rem;
    white-space: nowrap;
}

.admin-location-header-actions form {
    margin: 0;
}

.admin-location-header-actions button[aria-label] {
    display: inline-grid;
    place-items: center;
    min-width: 2rem;
}

.admin-location-actions {
    justify-content: flex-end;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.55rem;
}

.admin-location-actions form {
    margin: 0;
}

.admin-location-actions .btn {
    font-size: 0.78rem;
    padding: 0.28rem 0.55rem;
    white-space: nowrap;
}

.admin-approval-list {
    max-height: 520px;
    overflow-y: auto;
    padding-right: 0.25rem;
    gap: 0.4rem;
}

.admin-approval-card {
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
}

.admin-approval-row {
    width: 100%;
    min-height: 2.55rem;
    border: 0;
    background: transparent;
    color: var(--text);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 0.55rem 0.7rem;
    text-align: left;
    font-weight: 800;
}

.admin-approval-row:hover,
.admin-approval-row:focus-visible {
    background: rgba(11, 110, 79, 0.08);
}

.admin-approval-row span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-approval-row small {
    color: var(--muted);
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.35rem;
    font-size: 0.74rem;
    font-weight: 700;
}

.admin-approval-drawer {
    width: min(520px, 100vw);
    background: var(--panel-strong);
}

.admin-approval-drawer .offcanvas-header {
    align-items: flex-start;
    border-bottom: 1px solid var(--border);
}

.admin-pending-location-pagination {
    margin-top: 1rem;
}

.status-badge {
    border-radius: 999px;
    padding: 0.3rem 0.7rem;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.05em;
}

.notification-nav-item {
    position: relative;
}

.notification-center {
    position: relative;
}

.notification-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--panel);
    color: var(--ink);
}

.notification-bell svg {
    width: 1.15rem;
    height: 1.15rem;
    fill: currentColor;
}

.notification-bell:hover,
.notification-bell:focus {
    color: var(--brand);
    background: var(--soft-surface);
}

.notification-count {
    position: absolute;
    top: -0.25rem;
    right: -0.2rem;
    min-width: 1.2rem;
    height: 1.2rem;
    padding: 0 0.28rem;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1.2rem;
    text-align: center;
}

.notification-popover {
    position: absolute;
    z-index: 1050;
    top: calc(100% + 0.5rem);
    right: 0;
    display: flex;
    flex-direction: column;
    width: min(390px, calc(100vw - 2rem));
    max-height: min(620px, calc(100vh - 6rem));
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--panel-strong);
    box-shadow: var(--shadow);
    color: var(--ink);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-0.2rem);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.notification-center:hover .notification-popover,
.notification-center:focus-within .notification-popover {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.notification-popover-head,
.notification-tabs,
.notification-item-actions {
    display: flex;
    align-items: center;
}

.notification-popover-head {
    justify-content: space-between;
    padding: 0.85rem 0.9rem 0.55rem;
}

.notification-popover-head span {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 700;
}

.notification-popover-head span[data-notification-connection="live"] {
    color: #dc2626;
}

.notification-popover-head span[data-notification-connection="offline"] {
    color: var(--muted);
}

.notification-tabs {
    gap: 0.4rem;
    padding: 0 0.9rem 0.7rem;
    border-bottom: 1px solid var(--border);
}

.notification-bulk-actions {
    display: flex;
    justify-content: flex-end;
    padding: 0.55rem 0.9rem 0;
}

.notification-tab {
    border: 1px solid var(--border);
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    padding: 0.28rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 800;
}

.notification-tab.active {
    background: rgba(11, 110, 79, 0.12);
    color: var(--brand-dark);
    border-color: rgba(34, 197, 94, 0.35);
}

.notification-list {
    display: grid;
    gap: 0.55rem;
    overflow-y: auto;
    padding: 0.7rem;
}

.notification-item {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel);
    padding: 0.7rem;
}

.notification-item-head {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
}

.notification-item-head strong {
    font-size: 0.86rem;
    line-height: 1.25;
}

.notification-item-head time {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 0.7rem;
}

.notification-item p {
    margin: 0.35rem 0 0;
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.35;
}

.notification-item-actions {
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.6rem;
}

.notification-open,
.notification-action {
    border: 1px solid var(--border);
    border-radius: 999px;
    background: transparent;
    color: var(--ink);
    padding: 0.25rem 0.58rem;
    font-size: 0.72rem;
    font-weight: 800;
    text-decoration: none;
}

.notification-action.danger {
    color: #b91c1c;
}

.notification-action:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.message-layout {
    --message-panel-height: clamp(520px, calc(100vh - 260px), 720px);
    display: grid;
    grid-template-columns: minmax(260px, 0.35fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: stretch;
}

.message-sidebar,
.message-panel {
    display: flex;
    flex-direction: column;
    height: var(--message-panel-height);
    min-width: 0;
    overflow: hidden;
}

.message-thread-list,
.message-bubble-list {
    display: grid;
    gap: 0.65rem;
}

.message-thread-list {
    align-content: start;
    min-height: 0;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.message-thread-list form {
    margin: 0;
}

.message-thread {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.7rem;
    align-items: center;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--ink);
    background: var(--soft-surface);
    text-decoration: none;
    text-align: left;
    cursor: pointer;
    font: inherit;
}

.message-thread:hover,
.message-thread:focus,
.message-thread.active {
    color: var(--ink);
    border-color: rgba(11, 110, 79, 0.28);
    background: rgba(11, 110, 79, 0.1);
}

.message-thread-main {
    display: grid;
    min-width: 0;
    gap: 0.18rem;
}

.message-thread-head {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: center;
}

.message-thread-head strong,
.message-thread-preview {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-thread-head time {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 0.72rem;
}

.message-thread-preview {
    color: var(--muted);
    font-size: 0.86rem;
}

.message-thread-count {
    top: 0.35rem;
    right: 0.35rem;
}

.message-compose {
    flex: 0 0 auto;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.message-compose-grid {
    display: grid;
    grid-template-columns: minmax(180px, 0.28fr) minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: end;
}

.message-compose-grid [data-message-recipient-free][hidden] {
    display: none;
}

.message-compose-grid:has([data-message-recipient-free][hidden]) {
    grid-template-columns: minmax(0, 1fr) auto;
}

.message-send-button {
    min-height: 42px;
    white-space: nowrap;
}

.message-conversation {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 1rem;
    flex: 1 1 auto;
    min-height: 0;
}

.message-conversation-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
}

.message-conversation-head h2 {
    margin: 0;
    font-size: 1.2rem;
}

.message-bubble-list {
    align-content: start;
    min-height: 0;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.message-bubble {
    width: min(72%, 720px);
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--soft-surface);
}

.message-bubble.own {
    justify-self: end;
    background: rgba(11, 110, 79, 0.12);
    border-color: rgba(11, 110, 79, 0.24);
}

.message-bubble p {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.message-bubble time {
    display: block;
    margin-top: 0.45rem;
    color: var(--muted);
    font-size: 0.75rem;
}

.message-empty-main {
    margin-top: 1rem;
}

.community-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.42fr);
    gap: 1rem;
    align-items: start;
}

.community-thread-panel,
.community-create-panel,
.community-detail-panel,
.community-stats-panel,
.community-stat-block {
    display: grid;
    gap: 1rem;
}

.community-section-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.community-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
}

.community-search-form {
    display: grid;
    gap: 0.45rem;
}

.community-search-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 0.65rem;
    align-items: center;
}

.community-stats-layout {
    display: grid;
    grid-template-columns: minmax(280px, 0.42fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.community-stat-block {
    min-width: 0;
}

.community-framed-block {
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--soft-surface);
}

.community-stat-block h3 {
    margin: 0;
    font-size: 1rem;
}

.community-ranking-list,
.community-member-list {
    display: grid;
    gap: 0.55rem;
}

.community-ranking-row,
.community-member-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--soft-surface);
}

.community-member-row {
    grid-template-columns: minmax(0, 1fr) auto auto auto;
}

.community-ranking-row strong,
.community-member-row strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.community-ranking-row > span:last-child,
.community-member-row span {
    color: var(--muted);
    font-size: 0.86rem;
    white-space: nowrap;
}

.community-ranking-place {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: rgba(11, 110, 79, 0.12);
    color: var(--brand-dark);
    font-weight: 900;
    font-size: 0.8rem;
}

.community-thread-list {
    margin-top: 0;
}

.community-thread-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.85rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--ink);
    background: var(--soft-surface);
    text-decoration: none;
}

.community-thread-card:hover,
.community-thread-card:focus {
    color: var(--ink);
    border-color: rgba(11, 110, 79, 0.28);
    background: rgba(11, 110, 79, 0.08);
}

.community-thread-main {
    display: grid;
    min-width: 0;
    gap: 0.25rem;
}

.community-thread-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    min-width: 0;
}

.community-thread-head strong {
    overflow: hidden;
    text-overflow: ellipsis;
}

.community-thread-head strong {
    white-space: nowrap;
}

.community-thread-head time {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 0.78rem;
}

.community-form {
    display: grid;
    gap: 0.9rem;
}

.community-form textarea {
    resize: vertical;
}

.community-thread-modal {
    border-radius: 18px;
}

.community-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 0.5rem;
}

.community-editor-toolbar .btn {
    min-width: 2.35rem;
    font-weight: 800;
}

.community-detail-header h1 {
    margin-bottom: 0;
    font-size: clamp(1.7rem, 3vw, 2.7rem);
    max-width: 28ch;
}

.community-post-list {
    margin-top: 0;
}

.community-post {
    display: grid;
    gap: 0.65rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--soft-surface);
}

.community-root-post {
    background: var(--soft-surface-strong);
}

.community-rendered-message {
    overflow-wrap: anywhere;
    line-height: 1.65;
}

.community-rendered-message p {
    margin: 0;
}

.community-rendered-message p + p {
    margin-top: 0.85rem;
}

.community-rendered-message a {
    font-weight: 800;
}

.community-inline-image {
    display: block;
    width: min(100%, 720px);
    max-height: 560px;
    margin-top: 0.65rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--soft-surface-strong);
    object-fit: contain;
}

.community-reply-form {
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.community-thread-actions {
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--border);
}

.community-thread-actions [data-thread-like].is-liked {
    color: var(--brand-dark);
    border-color: rgba(11, 110, 79, 0.32);
    background: rgba(11, 110, 79, 0.1);
}

.community-post-actions {
    padding-top: 0.25rem;
}

.community-post-actions [data-post-like].is-liked {
    color: var(--brand-dark);
    border-color: rgba(11, 110, 79, 0.32);
    background: rgba(11, 110, 79, 0.1);
}

.notification-empty {
    color: var(--muted);
    padding: 1.2rem;
    text-align: center;
    font-size: 0.86rem;
}

.notification-flyin-stack {
    position: fixed;
    z-index: 1025;
    top: 5rem;
    right: 1rem;
    display: grid;
    gap: 0.75rem;
    width: min(360px, calc(100vw - 2rem));
    pointer-events: none;
}

.notification-flyin {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(11, 110, 79, 0.2);
    border-radius: 8px;
    background: var(--panel);
    box-shadow: var(--shadow);
    padding: 0.85rem 0.95rem;
    opacity: 0;
    pointer-events: auto;
    transform: translateX(1.25rem);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.notification-flyin.visible {
    opacity: 1;
    transform: translateX(0);
}

.notification-flyin::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--brand);
}

.notification-flyin-close {
    position: absolute;
    top: 0.35rem;
    right: 0.45rem;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 1.1rem;
    line-height: 1;
}

.notification-flyin-head {
    display: grid;
    gap: 0.18rem;
    padding-right: 1.5rem;
}

.notification-flyin-head strong {
    font-size: 0.9rem;
    line-height: 1.25;
}

.notification-flyin-head time {
    color: var(--muted);
    font-size: 0.72rem;
}

.notification-flyin p {
    margin: 0.45rem 0 0;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.35;
}

.notification-flyin-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.7rem;
}

.notification-flyin-open,
.notification-flyin-read {
    border: 1px solid var(--border);
    border-radius: 999px;
    background: transparent;
    color: var(--brand-dark);
    font-size: 0.74rem;
    font-weight: 800;
    padding: 0.25rem 0.62rem;
    text-decoration: none;
}

:root[data-theme="dark"] .notification-flyin {
    border-color: rgba(110, 231, 183, 0.22);
}

.status-approved {
    color: #0b6e4f;
    background: rgba(11, 110, 79, 0.12);
}

.status-verified {
    color: #854d0e;
    background: rgba(234, 179, 8, 0.22);
    border: 1px solid rgba(234, 179, 8, 0.55);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.38);
    cursor: default;
    user-select: none;
}

.status-verified::before {
    content: "★";
    margin-right: 0.35rem;
    color: #b45309;
}

.status-pending {
    color: #c2410c;
    background: rgba(249, 115, 22, 0.18);
}

.status-rejected {
    color: #991b1b;
    background: rgba(239, 68, 68, 0.14);
}

.status-deletion-requested {
    color: #7c2d12;
    background: rgba(148, 163, 184, 0.25);
}

.status-deleted {
    color: #475569;
    background: rgba(15, 23, 42, 0.1);
}

.status-visited {
    color: #0f5132;
    background: rgba(25, 135, 84, 0.14);
}

.visit-badge-wrap {
    position: relative;
    display: inline-flex;
}

.verified-badge-wrap {
    cursor: default;
}

.visit-popover {
    position: absolute;
    z-index: 20;
    top: calc(100% + 0.45rem);
    right: 0;
    min-width: 240px;
    max-width: min(320px, 90vw);
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--panel-strong);
    box-shadow: var(--shadow);
    color: var(--text);
    padding: 0.75rem;
    font-size: 0.82rem;
    line-height: 1.5;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-0.2rem);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.visit-badge-wrap:hover .visit-popover,
.visit-badge-wrap:focus-within .visit-popover {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.status-disabled {
    color: #7c2d12;
    background: rgba(148, 163, 184, 0.25);
}

:root[data-theme="dark"] .status-approved {
    color: #6ee7b7;
    background: rgba(26, 147, 111, 0.22);
}

:root[data-theme="dark"] .status-verified {
    color: #fde68a;
    background: rgba(234, 179, 8, 0.2);
}

:root[data-theme="dark"] .status-pending {
    color: #fdba74;
    background: rgba(249, 115, 22, 0.22);
}

:root[data-theme="dark"] .status-rejected {
    color: #fca5a5;
    background: rgba(248, 113, 113, 0.16);
}

:root[data-theme="dark"] .status-deletion-requested {
    color: #fca5a5;
    background: rgba(148, 163, 184, 0.18);
}

:root[data-theme="dark"] .status-deleted {
    color: #cbd5e1;
    background: rgba(148, 163, 184, 0.18);
}

:root[data-theme="dark"] .status-visited {
    color: #86efac;
    background: rgba(34, 197, 94, 0.16);
}

:root[data-theme="dark"] .status-disabled {
    color: #fca5a5;
    background: rgba(248, 113, 113, 0.16);
}

.empty-state {
    color: var(--muted);
    background: var(--soft-surface);
    border: 1px dashed var(--border);
    border-radius: 18px;
    padding: 1rem;
}

.status-tab-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.status-tab {
    display: inline-flex;
    gap: 0.45rem;
    align-items: center;
    padding: 0.55rem 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--soft-surface);
    color: var(--ink);
    text-decoration: none;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
}

.status-tab.active {
    background: rgba(11, 110, 79, 0.12);
    color: var(--brand-dark);
    border-color: rgba(11, 110, 79, 0.2);
}

.inline-feedback {
    min-height: 1.25rem;
    margin-top: 0.75rem;
    font-size: 0.9rem;
    font-weight: 700;
}

.admin-table th {
    color: var(--muted);
    font-size: 0.86rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.admin-table td,
.admin-table th {
    background: transparent;
}

.table-toolbar {
    display: grid;
    grid-template-columns: minmax(160px, 0.7fr) minmax(220px, 1fr) minmax(110px, 0.35fr);
    gap: 0.9rem;
    align-items: end;
    margin: 1rem 0;
}

.admin-table-shell {
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: auto;
    background: var(--soft-surface);
}

.user-admin-table {
    min-width: 940px;
    margin-bottom: 0;
}

.table-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.button-icon {
    display: block;
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pagination-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
}

.detail-hero {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: stretch;
}

.detail-copy {
    background: var(--panel);
    border: 1px solid var(--panel-border);
    box-shadow: var(--shadow);
    border-radius: 28px;
    padding: 1.5rem;
    height: 100%;
}

.meta-stack {
    display: grid;
    gap: 0.5rem;
    color: var(--muted);
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: stretch;
}

.detail-content-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: stretch;
}

.detail-page-grid > * {
    min-width: 0;
}

.detail-content-grid > * {
    min-width: 0;
    height: 100%;
}

.detail-grid > .admin-panel {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.detail-map {
    min-height: 360px;
    border-radius: 22px;
    flex: 1 1 auto;
}

.detail-map-wide {
    min-height: min(58vh, 620px);
}

.detail-map-panel {
    padding: 1rem;
}

.detail-action-block {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--soft-surface);
}

.detail-action-block .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    white-space: nowrap;
}

.detail-action-block .detail-icon-button {
    width: 2.7rem;
    height: 2.7rem;
    padding: 0;
    flex: 0 0 2.7rem;
}

.detail-action-block .detail-icon-button svg {
    width: 1.05rem;
    height: 1.05rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.detail-icon-button.subscription-toggle-button .subscription-bookmark-icon {
    fill: none;
}

.detail-action-block form {
    margin: 0;
}

.detail-action-block .location-collection-button svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.subscription-toggle-button {
    justify-content: center;
}

.subscription-check-icon {
    display: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.subscription-toggle-button.is-subscribed {
    color: white;
    border-color: var(--brand);
    background: var(--brand);
}

.subscription-toggle-button.is-subscribed .subscription-bookmark-icon {
    display: none;
}

.subscription-toggle-button.is-subscribed .subscription-check-icon {
    display: block;
}

.detail-action-block .visit-badge-wrap {
    align-items: center;
}

.detail-action-block svg {
    width: 1rem;
    height: 1rem;
    fill: currentColor;
    flex: 0 0 auto;
}

.detail-title-header {
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.detail-title-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.7rem;
}

.detail-title-actions .btn {
    white-space: nowrap;
}

.detail-gallery-panel {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.detail-gallery-panel .photo-grid,
.detail-gallery-panel .empty-state {
    flex: 1 1 auto;
}

.detail-history-panel {
    padding: 0.85rem 1rem;
    border-radius: 20px;
    box-shadow: 0 12px 28px rgba(31, 41, 51, 0.08);
}

.detail-discussion-panel {
    display: grid;
    gap: 1rem;
}

.detail-discussion-panel .panel-header {
    margin-bottom: 0;
}

.detail-discussion-panel h2 {
    margin-bottom: 0;
}

.discussion-status {
    padding: 0.75rem 0.9rem;
    border: 1px solid rgba(11, 110, 79, 0.22);
    border-radius: 8px;
    color: var(--brand-dark);
    background: rgba(11, 110, 79, 0.08);
    font-weight: 700;
}

.discussion-status.is-error {
    color: #8a1f11;
    border-color: rgba(180, 54, 32, 0.24);
    background: rgba(180, 54, 32, 0.08);
}

.admin-action-status {
    margin-bottom: 1rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid rgba(11, 110, 79, 0.22);
    border-radius: 8px;
    color: var(--brand-dark);
    background: rgba(11, 110, 79, 0.08);
    font-weight: 700;
}

.admin-action-status.is-error {
    color: #8a1f11;
    border-color: rgba(180, 54, 32, 0.24);
    background: rgba(180, 54, 32, 0.08);
}

.discussion-form {
    display: grid;
    gap: 0.65rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--soft-surface);
}

.discussion-form textarea {
    resize: vertical;
}

.discussion-form-actions {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
}

.discussion-list {
    margin-top: 0;
}

.discussion-comment {
    display: grid;
    gap: 0.45rem;
}

.discussion-replies {
    display: grid;
    gap: 0.65rem;
    margin-top: 0.35rem;
    padding-left: 1rem;
    border-left: 2px solid var(--border);
}

.discussion-reply {
    background: var(--soft-surface-strong);
    box-shadow: none;
}

.discussion-comment-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
}

.discussion-author {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: 0.65rem;
}

.discussion-avatar {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 999px;
    overflow: hidden;
    color: var(--brand-dark);
    background: var(--soft-surface);
    border: 1px solid var(--border);
    font-size: 0.82rem;
    font-weight: 800;
}

.discussion-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.discussion-comment p {
    margin-bottom: 0;
    white-space: pre-line;
}

.discussion-deleted-message {
    color: var(--muted);
    font-style: italic;
}

.discussion-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.discussion-actions form {
    margin: 0;
}

.discussion-like-button {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.discussion-message-button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.discussion-message-button svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.discussion-action-icon {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.discussion-like-button.is-liked {
    color: var(--brand-dark);
    border-color: rgba(11, 110, 79, 0.32);
    background: rgba(11, 110, 79, 0.1);
}

.discussion-like-button .count-pill {
    padding: 0.16rem 0.48rem;
    font-size: 0.72rem;
}

.discussion-report-button {
    color: var(--muted);
    border-color: var(--border);
}

.discussion-report-button.is-reported {
    color: var(--brand-dark);
    background: rgba(11, 110, 79, 0.08);
    border-color: rgba(11, 110, 79, 0.22);
    opacity: 1;
}

.discussion-reply-form {
    display: grid;
    gap: 0.45rem;
    margin-top: 0.25rem;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--soft-surface);
}

.detail-history-panel .panel-header {
    margin-bottom: 0.25rem;
}

.detail-history-panel h2 {
    font-size: 1.05rem;
    margin-bottom: 0;
}

.detail-history-toggle-row {
    display: flex;
    justify-content: center;
}

.detail-history-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    font-weight: 800;
}

.detail-history-toggle[aria-expanded="true"] span {
    transform: rotate(180deg);
}

.detail-history-list {
    gap: 0.45rem;
    margin-top: 0.65rem;
}

.detail-history-card {
    border-radius: 14px;
    padding: 0.65rem 0.75rem;
}

.detail-history-card-header {
    align-items: center;
    gap: 0.75rem;
}

.detail-history-card h3 {
    font-size: 0.86rem;
    margin-bottom: 0.1rem;
}

.detail-history-card .meta-line,
.detail-history-card p {
    font-size: 0.82rem;
    line-height: 1.35;
}

.detail-history-card .meta-line {
    margin-bottom: 0;
}

.detail-history-card .status-badge,
.detail-history-panel .count-pill {
    padding: 0.22rem 0.52rem;
    font-size: 0.7rem;
}

.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    grid-auto-rows: 1fr;
    gap: 1rem;
}

.detail-photo-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    grid-auto-rows: auto;
    align-content: start;
}

.photo-card {
    overflow: hidden;
    border-radius: 22px;
    background: var(--panel-strong);
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    min-height: 320px;
}

.detail-photo-card {
    min-height: 0;
}

.photo-card > a {
    display: grid;
    place-items: center;
    height: 160px;
    padding: 0.75rem;
    background: var(--soft-surface);
    cursor: zoom-in;
}

.detail-photo-grid .photo-card > a {
    height: auto;
    aspect-ratio: 1 / 1;
    padding: 0;
    background: var(--soft-surface-strong);
    transition: transform 0.16s ease, background 0.16s ease;
}

.detail-photo-grid .photo-card > a:hover,
.detail-photo-grid .photo-card > a:focus {
    background: rgba(26, 147, 111, 0.08);
    transform: translateY(-1px);
}

.photo-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.detail-photo-grid .photo-card img {
    object-fit: cover;
}

.photo-meta {
    padding: 0.9rem 1rem 1rem;
    display: grid;
    gap: 0.45rem;
    color: var(--muted);
    flex: 1 1 auto;
    align-content: start;
}

.detail-photo-card .photo-meta {
    padding: 0.7rem 0.85rem 0.85rem;
    font-size: 0.88rem;
    line-height: 1.45;
}

.motif-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

.motif-card {
    display: grid;
    gap: 0.8rem;
    padding: 1rem;
    border: 1px dashed var(--border);
    border-radius: 18px;
    background: var(--soft-surface);
    perspective: 1400px;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    transform-origin: center;
}

@media (hover: hover) and (pointer: fine) {
    .motif-card:hover,
    .motif-card:focus-within {
        position: relative;
        z-index: 2;
        transform: scale(1.035);
        box-shadow: 0 18px 34px rgba(31, 41, 51, 0.12);
    }
}

.detail-gallery-panel .motif-card:has(.motif-template-custom) {
    border-color: var(--border);
    background: var(--soft-surface);
}

.detail-gallery-panel a.motif-coin-side {
    border-color: transparent;
    background: transparent;
    background-image: none;
    box-shadow: none;
}

.motif-coin-wrapper {
    width: min(100%, 210px);
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    perspective: 1200px;
}

.motif-coin {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.25s ease;
}

.motif-card:hover .motif-coin-wrapper .motif-coin,
.motif-card:focus-within .motif-coin-wrapper .motif-coin,
.motif-coin-wrapper:hover .motif-coin,
.motif-coin-wrapper:focus-within .motif-coin {
    animation: motif-coin-hover-spin 1.8s linear 1 both;
}

.motif-coin-side {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: var(--muted);
    text-decoration: none;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
}

.motif-coin-side:not(.motif-template-custom) {
    border: 6px solid transparent;
    background-image:
        linear-gradient(var(--panel-strong), var(--panel-strong)),
        linear-gradient(135deg, #b7791f, #f8d982 42%, #8a5a12);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    box-shadow: 0 20px 34px rgba(31, 41, 51, 0.2);
}

.motif-coin-front {
    transform: rotateY(0deg);
}

.motif-coin-back {
    transform: rotateY(180deg);
}

.motif-coin-side img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.motif-coin-side.motif-template-custom {
    background: transparent;
}

.motif-coin-side.motif-template-custom img {
    filter: drop-shadow(0 15px 18px rgba(31, 41, 51, 0.24));
}

.motif-coin-empty {
    padding: 1rem;
    text-align: center;
    border: 1px dashed var(--border);
    background: var(--soft-surface);
    font-size: 0.82rem;
    font-weight: 800;
}

@keyframes motif-coin-hover-spin {
    0% {
        transform: rotateY(0deg) rotateX(6deg) scale(1);
    }
    100% {
        transform: rotateY(360deg) rotateX(6deg) scale(1.02);
    }
}

@keyframes motif-coin-mobile-cycle {
    0%,
    60% {
        transform: rotateY(0deg) rotateX(6deg) scale(1);
    }
    70%,
    90% {
        transform: rotateY(180deg) rotateX(6deg) scale(1);
    }
    100% {
        transform: rotateY(360deg) rotateX(6deg) scale(1);
    }
}

@media (max-width: 767.98px) {
    .motif-coin-wrapper .motif-coin {
        animation: motif-coin-mobile-cycle 5s ease-in-out infinite;
    }
}

.motif-sides {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    transform-style: preserve-3d;
    transition: transform 1.1s ease;
}

.motif-card:hover .motif-sides,
.motif-card:focus-within .motif-sides {
    transform: rotateY(10deg);
    animation: motif-slow-rotate 6s ease-in-out infinite alternate;
}

.detail-gallery-panel .motif-card:hover .motif-sides,
.detail-gallery-panel .motif-card:focus-within .motif-sides {
    transform: rotateY(18deg);
}

@keyframes motif-slow-rotate {
    from {
        transform: rotateY(-8deg);
    }
    to {
        transform: rotateY(18deg);
    }
}

.motif-card:not(:has(.motif-side-wrap)) .motif-sides {
    display: block;
    position: relative;
    width: min(100%, 180px);
    aspect-ratio: 1 / 1;
    min-height: 0;
    margin: 0 auto;
    transform-origin: center;
    filter: drop-shadow(0 18px 18px rgba(31, 41, 51, 0.16));
}

.motif-card:not(:has(.motif-side-wrap)) .motif-sides:has(> .motif-template-vertical-oval) {
    width: min(72%, 140px);
    aspect-ratio: 2 / 3;
}

.motif-card:not(:has(.motif-side-wrap)) .motif-sides:has(> .motif-template-horizontal-oval) {
    width: min(100%, 230px);
    aspect-ratio: 3 / 2;
}

.motif-card:not(:has(.motif-side-wrap)) .motif-sides:has(> .motif-template-custom) {
    width: min(100%, 210px);
    aspect-ratio: 1 / 1;
}

.motif-card:not(:has(.motif-side-wrap)) .motif-sides > .motif-side {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    min-height: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.56),
        inset 0 -16px 26px rgba(31, 41, 51, 0.1),
        0 16px 34px rgba(31, 41, 51, 0.16);
}

.motif-card:not(:has(.motif-side-wrap)) .motif-sides > .motif-template-custom {
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.motif-card:not(:has(.motif-side-wrap)) .motif-sides > .motif-template-custom img {
    width: 100%;
    height: 100%;
    max-height: none;
    aspect-ratio: auto;
    object-fit: contain;
    filter:
        drop-shadow(0 15px 18px rgba(31, 41, 51, 0.24))
        drop-shadow(0 1px 0 rgba(255, 255, 255, 0.45));
}

.motif-card:not(:has(.motif-side-wrap)) .motif-sides > .motif-template-custom span {
    display: none;
}

.motif-card:not(:has(.motif-side-wrap)) .motif-sides > .motif-side:last-child {
    transform: rotateY(180deg);
}

.motif-card:not(:has(.motif-side-wrap)) .motif-sides > .motif-template-custom:first-child {
    transform: rotateY(0deg);
    opacity: 1;
}

.motif-card:not(:has(.motif-side-wrap)) .motif-sides > .motif-template-custom:last-child {
    transform: rotateY(180deg);
    opacity: 1;
}

.motif-card:not(:has(.motif-side-wrap)) .motif-sides > .motif-side::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    background:
        linear-gradient(115deg, rgba(255, 255, 255, 0.5), transparent 28%, transparent 68%, rgba(255, 255, 255, 0.22)),
        radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.44), transparent 24%);
    mix-blend-mode: screen;
    opacity: 0.72;
    pointer-events: none;
}

.motif-card:not(:has(.motif-side-wrap)) .motif-sides > .motif-template-custom::before,
.motif-card:not(:has(.motif-side-wrap)) .motif-sides > .motif-template-custom::after {
    content: none;
}

.motif-card:not(:has(.motif-side-wrap)) .motif-sides > .motif-side::after {
    content: "";
    position: absolute;
    inset: 4%;
    z-index: 3;
    border: 1px solid rgba(255, 255, 255, 0.38);
    border-radius: inherit;
    pointer-events: none;
}

.motif-card:not(:has(.motif-side-wrap)):hover .motif-sides,
.motif-card:not(:has(.motif-side-wrap)):focus-within .motif-sides {
    transform: none;
    animation: motif-coin-showcase 4.8s cubic-bezier(0.45, 0, 0.35, 1) infinite;
}

.motif-card:not(:has(.motif-side-wrap)):hover .motif-sides:has(> .motif-template-custom),
.motif-card:not(:has(.motif-side-wrap)):focus-within .motif-sides:has(> .motif-template-custom) {
    animation: none;
}

.motif-card:not(:has(.motif-side-wrap)):hover .motif-side:first-child,
.motif-card:not(:has(.motif-side-wrap)):focus-within .motif-side:first-child,
.motif-card:not(:has(.motif-side-wrap)):hover .motif-side:last-child,
.motif-card:not(:has(.motif-side-wrap)):focus-within .motif-side:last-child {
    transform: inherit;
}

.motif-card:not(:has(.motif-side-wrap)):hover .motif-sides > .motif-side:first-child,
.motif-card:not(:has(.motif-side-wrap)):focus-within .motif-sides > .motif-side:first-child {
    transform: rotateY(0deg);
}

.motif-card:not(:has(.motif-side-wrap)):hover .motif-sides > .motif-side:last-child,
.motif-card:not(:has(.motif-side-wrap)):focus-within .motif-sides > .motif-side:last-child {
    transform: rotateY(180deg);
}

.motif-card:not(:has(.motif-side-wrap)):hover .motif-sides > .motif-template-custom:first-child,
.motif-card:not(:has(.motif-side-wrap)):focus-within .motif-sides > .motif-template-custom:first-child {
    animation: motif-front-face-spin 4.8s linear infinite;
}

.motif-card:not(:has(.motif-side-wrap)):hover .motif-sides > .motif-template-custom:last-child,
.motif-card:not(:has(.motif-side-wrap)):focus-within .motif-sides > .motif-template-custom:last-child {
    animation: motif-back-face-spin 4.8s linear infinite;
}

@keyframes motif-coin-showcase {
    0% {
        transform: rotateY(0deg) rotateX(0deg) scale(1);
    }
    20% {
        transform: rotateY(82deg) rotateX(3deg) scale(1.03);
    }
    38% {
        transform: rotateY(178deg) rotateX(-2deg) scale(1.02);
    }
    56% {
        transform: rotateY(226deg) rotateX(2deg) scale(1);
    }
    78% {
        transform: rotateY(312deg) rotateX(-2deg) scale(1.03);
    }
    100% {
        transform: rotateY(360deg) rotateX(0deg) scale(1);
    }
}

@keyframes motif-front-face-spin {
    from {
        transform: rotateY(0deg);
    }
    to {
        transform: rotateY(360deg);
    }
}

@keyframes motif-back-face-spin {
    from {
        transform: rotateY(180deg);
    }
    to {
        transform: rotateY(540deg);
    }
}

.motif-side-wrap {
    min-width: 0;
}

.motif-side {
    --motif-x: 0px;
    --motif-y: 0px;
    --motif-scale: 1;
    position: relative;
    display: grid;
    gap: 0.45rem;
    align-content: start;
    min-height: 150px;
    padding: 0.5rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--soft-surface-strong);
    color: var(--ink);
    text-decoration: none;
    overflow: hidden;
    transition: transform 1.1s ease, box-shadow 1.1s ease;
}

.motif-card:hover .motif-side:first-child,
.motif-card:focus-within .motif-side:first-child {
    transform: rotateY(-10deg) translateX(-3px);
}

.motif-card:hover .motif-side:last-child,
.motif-card:focus-within .motif-side:last-child {
    transform: rotateY(10deg) translateX(3px);
}

.motif-side span {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.motif-side img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    transform: translate(var(--motif-x), var(--motif-y)) scale(var(--motif-scale));
    transform-origin: center;
    pointer-events: none;
    position: relative;
    z-index: 1;
}

.motif-template-round,
.motif-template-round img {
    border-radius: 999px;
}

.motif-template-square,
.motif-template-square img {
    border-radius: 12px;
}

.motif-template-vertical-oval {
    width: min(100%, 68%);
    aspect-ratio: 2 / 3;
    justify-self: center;
    align-self: center;
    border-radius: 50% / 58%;
}

.motif-template-horizontal-oval {
    width: 100%;
    aspect-ratio: 3 / 2;
    justify-self: center;
    align-self: center;
    border-radius: 58% / 50%;
}

.motif-template-vertical-oval img,
.motif-template-horizontal-oval img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.motif-template-vertical-oval img {
    aspect-ratio: 2 / 3;
    border-radius: 50% / 58%;
}

.motif-template-horizontal-oval img {
    aspect-ratio: 3 / 2;
    border-radius: 58% / 50%;
}

.motif-template-custom,
.motif-template-custom img {
    border-radius: 0;
}

.motif-template-custom img {
    aspect-ratio: auto;
    height: auto;
    max-height: 220px;
    object-fit: contain;
}

.motif-side-wrap .motif-template-custom {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.motif-side-wrap .motif-template-custom img {
    width: 100%;
    height: 100%;
    max-height: 220px;
    object-fit: contain;
    filter: drop-shadow(0 10px 14px rgba(31, 41, 51, 0.2));
}

.motif-side-empty {
    place-items: center;
    border-style: dashed;
    color: var(--muted);
}

.motif-standard-back {
    background:
        radial-gradient(circle at center, rgba(26, 147, 111, 0.16), transparent 58%),
        repeating-linear-gradient(135deg, var(--soft-surface-strong), var(--soft-surface-strong) 8px, rgba(31, 41, 51, 0.06) 8px, rgba(31, 41, 51, 0.06) 16px);
}

.motif-standard-back::after {
    content: "PCM";
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    border: 1px solid var(--border);
    border-radius: inherit;
    color: var(--muted);
    font-weight: 800;
    letter-spacing: 0.08em;
}

.motif-description {
    color: var(--muted);
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.5;
}

.motif-editor-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.motif-editor-steps span {
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.35rem 0.75rem;
    color: var(--muted);
    font-weight: 800;
    font-size: 0.85rem;
}

.motif-editor-steps span.active {
    color: var(--brand-dark);
    background: rgba(26, 147, 111, 0.12);
    border-color: rgba(26, 147, 111, 0.25);
}

.motif-editor-step {
    display: none;
}

.motif-editor-step.active {
    display: block;
}

.motif-template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.9rem;
}

.motif-template-option {
    display: grid;
    justify-items: center;
    gap: 0.65rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--soft-surface);
    color: var(--ink);
    font-weight: 800;
}

.motif-template-option.active {
    border-color: var(--brand);
    background: rgba(26, 147, 111, 0.12);
}

.motif-template-preview {
    width: 5rem;
    height: 5rem;
    border: 2px solid var(--brand);
    background: var(--soft-surface-strong);
}

.motif-template-preview.motif-template-vertical-oval {
    width: 3.4rem;
    height: 5.8rem;
}

.motif-template-preview.motif-template-horizontal-oval {
    width: 5.8rem;
    height: 3.4rem;
}

.motif-shape-controls {
    display: grid;
    gap: 0.35rem;
    margin-top: 1rem;
    padding: 0.85rem;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--soft-surface);
}

.motif-shape-controls .form-label {
    margin-bottom: 0;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 800;
}

.motif-shape-controls .form-range {
    margin-bottom: 0.25rem;
}

.motif-editor-stage {
    display: grid;
    place-items: center;
    min-height: 360px;
    border: 1px dashed var(--border);
    border-radius: 18px;
    background: var(--soft-surface);
}

.motif-side-preview {
    --motif-shape-width: 100%;
    --motif-shape-height: 100%;
    --motif-shape-left: 0%;
    --motif-shape-top: 0%;
    --motif-shape-right: 0%;
    --motif-shape-bottom: 0%;
    --motif-shape-radius: 50% / 50%;
    position: relative;
    display: block;
    width: min(320px, 100%);
    aspect-ratio: 1 / 1;
    min-height: 0;
    padding: 0;
    border-color: transparent;
    background: transparent;
    overflow: hidden;
    cursor: grab;
    touch-action: none;
    user-select: none;
    box-shadow: 0 18px 34px rgba(31, 41, 51, 0.18);
}

.motif-side-preview.motif-template-custom {
    width: min(360px, 100%);
    aspect-ratio: 1 / 1;
    border-radius: 18px;
}

.motif-side-preview.motif-template-vertical-oval {
    width: min(230px, 72%);
    aspect-ratio: 2 / 3;
    min-height: 0;
}

.motif-side-preview.motif-template-horizontal-oval {
    width: min(345px, 100%);
    aspect-ratio: 3 / 2;
    min-height: 0;
}

.motif-side-preview:active {
    cursor: grabbing;
}

.motif-side-preview::before {
    content: "";
    position: absolute;
    left: var(--motif-shape-left);
    top: var(--motif-shape-top);
    width: var(--motif-shape-width);
    height: var(--motif-shape-height);
    z-index: 2;
    border: 2px solid rgba(11, 110, 79, 0.78);
    border-radius: var(--motif-shape-radius);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.26), transparent 36%),
        rgba(26, 147, 111, 0.08);
    pointer-events: none;
}

.motif-side-preview span {
    position: absolute;
    top: 0.6rem;
    left: 50%;
    z-index: 3;
    transform: translateX(-50%);
    padding: 0.18rem 0.45rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.84);
    pointer-events: none;
}

.motif-side-preview img {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
    object-fit: contain;
    transform: translate(calc(-50% + var(--motif-x)), calc(-50% + var(--motif-y))) scale(var(--motif-scale));
}

.motif-shape-handle {
    position: absolute;
    z-index: 5;
    width: 1.05rem;
    height: 1.05rem;
    padding: 0;
    border: 2px solid #ffffff;
    border-radius: 999px;
    background: var(--brand);
    box-shadow: 0 2px 8px rgba(31, 41, 51, 0.28);
    cursor: grab;
    touch-action: none;
}

.motif-shape-handle:active {
    cursor: grabbing;
}

.motif-shape-handle-width {
    top: 50%;
    left: calc(var(--motif-shape-left) + var(--motif-shape-width));
    transform: translate(-50%, -50%);
    cursor: ew-resize;
}

.motif-shape-handle-height {
    left: 50%;
    top: calc(var(--motif-shape-top) + var(--motif-shape-height));
    transform: translate(-50%, -50%);
    cursor: ns-resize;
}

.motif-shape-handle-size {
    left: calc(var(--motif-shape-left) + var(--motif-shape-width));
    top: calc(var(--motif-shape-top) + var(--motif-shape-height));
    transform: translate(-50%, -50%);
    cursor: nwse-resize;
}

.motif-shape-handle-radius {
    left: calc(var(--motif-shape-left) + var(--motif-shape-width) - 0.35rem);
    top: calc(var(--motif-shape-top) + 0.35rem);
    transform: translate(-50%, -50%);
    width: 0.85rem;
    height: 0.85rem;
    background: var(--accent);
    cursor: nesw-resize;
}

.motif-image-zoom {
    touch-action: manipulation;
}

@media (max-width: 767.98px) {
    .motif-editor-stage {
        min-height: 300px;
    }

    .motif-shape-handle {
        width: 1.45rem;
        height: 1.45rem;
    }

    .motif-shape-handle-radius {
        width: 1.2rem;
        height: 1.2rem;
    }
}

.photo-upload-preview {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.icon-upload-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: fit-content;
}

.icon-upload-button svg {
    width: 1.15rem;
    height: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.edit-management-modal .modal-content {
    padding: 1.25rem;
    border-radius: 18px;
}

.edit-management-modal .modal-body {
    overflow: auto;
}

.edit-management-modal .photo-grid {
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
    grid-auto-rows: auto;
    gap: 0.75rem;
}

.edit-management-modal .photo-card {
    min-height: 0;
    border-radius: 14px;
}

.gallery-manager-intro {
    margin-bottom: 0.85rem;
}

.gallery-upload-dropzone {
    margin-bottom: 1rem;
}

.gallery-upload-label {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    width: 100%;
    padding: 1rem;
    border: 1px dashed rgba(11, 110, 79, 0.42);
    border-radius: 16px;
    background: rgba(11, 110, 79, 0.05);
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease;
}

.gallery-upload-label:hover,
.gallery-upload-label:focus-within {
    border-color: var(--brand);
    background: rgba(11, 110, 79, 0.09);
}

.gallery-upload-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 999px;
    background: var(--brand);
    color: #ffffff;
}

.gallery-upload-icon svg {
    width: 1.35rem;
    height: 1.35rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gallery-upload-copy {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.gallery-upload-copy span {
    color: var(--muted);
    font-size: 0.86rem;
}

.gallery-manager-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 0.9rem;
    max-height: min(58dvh, 620px);
    overflow: auto;
    padding: 0.1rem 0.15rem 0.25rem;
}

.gallery-manager-list {
    display: grid;
    gap: 0.75rem;
    max-height: min(58dvh, 620px);
    overflow: auto;
    padding: 0.1rem 0.15rem 0.25rem;
}

.gallery-manager-item {
    display: grid;
    grid-template-columns: 2.4rem 112px minmax(0, 1fr) auto;
    gap: 0.85rem;
    align-items: stretch;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--panel-strong);
}

.gallery-item-order {
    display: grid;
    grid-template-rows: 1fr auto 1fr;
    place-items: center;
    gap: 0.25rem;
}

.gallery-item-order span {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    background: rgba(11, 110, 79, 0.12);
    color: var(--brand-dark);
    font-size: 0.78rem;
    font-weight: 800;
}

.gallery-item-thumb {
    display: block;
    width: 112px;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
    background: var(--soft-surface-strong);
}

.gallery-item-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-item-body {
    min-width: 0;
}

.gallery-description-form {
    display: grid;
    gap: 0.45rem;
}

.gallery-description-form textarea {
    min-height: 4.2rem;
    resize: vertical;
}

.gallery-item-actions {
    display: flex;
    align-items: end;
}

.gallery-management-image {
    position: relative;
}

.edit-management-modal .photo-card > a,
.gallery-management-image > a {
    display: block;
    height: auto;
    aspect-ratio: 1 / 1;
    padding: 0;
    background: var(--soft-surface-strong);
}

.edit-management-modal .photo-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-order-button {
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--soft-surface);
    color: var(--ink);
}

.gallery-order-button svg {
    width: 1.05rem;
    height: 1.05rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.edit-management-modal .photo-meta {
    padding: 0.6rem;
    gap: 0.45rem;
    font-size: 0.82rem;
    line-height: 1.35;
}

.edit-management-modal .photo-meta .form-label {
    margin: 0;
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 800;
}

.edit-management-modal .photo-meta textarea {
    min-height: 4.75rem;
    font-size: 0.82rem;
}

.edit-management-modal .photo-sort-handle {
    padding: 0.45rem 0.6rem;
    font-size: 0.76rem;
}

.edit-management-modal .photo-sort-handle span {
    width: 1.55rem;
    height: 1.55rem;
}

.edit-management-modal .motif-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.75rem;
}

@media (max-width: 575.98px) {
    .gallery-manager-grid {
        grid-template-columns: 1fr;
        max-height: 56dvh;
    }

    .gallery-manager-list {
        max-height: 56dvh;
    }

    .gallery-manager-item {
        grid-template-columns: 2.4rem minmax(0, 1fr);
        gap: 0.7rem;
    }

    .gallery-item-thumb {
        width: 100%;
        grid-column: 2;
    }

    .gallery-item-order {
        grid-row: 1 / span 3;
    }

    .gallery-item-body,
    .gallery-item-actions {
        grid-column: 2;
    }

    .gallery-item-actions {
        justify-content: stretch;
    }

    .gallery-item-actions form,
    .gallery-item-actions button {
        width: 100%;
    }

    .gallery-upload-label {
        align-items: flex-start;
        padding: 0.9rem;
    }
}

.edit-management-modal .motif-card {
    gap: 0.55rem;
    padding: 0.75rem;
    border-radius: 14px;
}

@media (hover: hover) and (pointer: fine) {
    .edit-management-modal .motif-card:hover,
    .edit-management-modal .motif-card:focus-within {
        transform: none;
        box-shadow: none;
    }
}

.edit-management-modal .motif-card:hover .motif-sides,
.edit-management-modal .motif-card:focus-within .motif-sides,
.edit-management-modal .motif-card:hover .motif-side:first-child,
.edit-management-modal .motif-card:focus-within .motif-side:first-child,
.edit-management-modal .motif-card:hover .motif-side:last-child,
.edit-management-modal .motif-card:focus-within .motif-side:last-child {
    transform: none;
    animation: none;
}

.edit-management-modal .motif-sides {
    gap: 0.5rem;
}

.edit-management-modal .motif-side {
    min-height: 96px;
    padding: 0.35rem;
    border-radius: 12px;
}

.edit-management-modal .motif-side span {
    font-size: 0.66rem;
}

.edit-management-modal .motif-side-wrap .motif-template-custom img {
    max-height: 110px;
}

.edit-management-modal .motif-description {
    padding-top: 0.1rem;
    font-size: 0.8rem;
    line-height: 1.35;
}

#motifEditorModal .modal-dialog {
    max-width: min(840px, calc(100vw - 1.5rem));
}

#motifEditorModal .row.g-4 {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 1rem;
}

#motifEditorModal .motif-editor-stage {
    min-height: 220px;
}

#motifEditorModal .motif-side-preview {
    width: min(190px, 100%);
}

#motifEditorModal .motif-side-preview.motif-template-custom {
    width: min(220px, 100%);
}

#motifEditorModal .motif-side-preview.motif-template-vertical-oval {
    width: min(150px, 72%);
}

#motifEditorModal .motif-side-preview.motif-template-horizontal-oval {
    width: min(220px, 100%);
}

#motifEditorModal .form-text {
    font-size: 0.78rem;
    line-height: 1.35;
}

#motifEditorModal .motif-image-zoom {
    max-width: 18rem;
}

.photo-preview-card {
    overflow: hidden;
    border-radius: 18px;
    background: var(--soft-surface);
    border: 1px solid var(--border);
}

.photo-preview-card img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    padding: 0.65rem;
    background: var(--soft-surface-strong);
}

.photo-preview-meta {
    display: grid;
    gap: 0.2rem;
    padding: 0.75rem 0.85rem;
    color: var(--muted);
    font-size: 0.88rem;
}

.sortable-photo-card {
    cursor: grab;
}

.sortable-photo-card.dragging {
    opacity: 0.55;
}

.photo-sort-handle {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: center;
    padding: 0.65rem 0.85rem;
    color: var(--brand-dark);
    background: rgba(11, 110, 79, 0.08);
    border-bottom: 1px solid var(--border);
    font-size: 0.86rem;
}

.photo-sort-handle span {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: rgba(11, 110, 79, 0.14);
    font-weight: 800;
}

.photo-modal .modal-content {
    background: var(--panel-strong);
    border: 1px solid var(--border);
    border-radius: 18px;
    max-height: calc(100dvh - 2rem);
    overflow: hidden;
}

.photo-modal .modal-body {
    display: grid;
    justify-items: center;
    gap: 0.85rem;
    padding: 1rem;
    overflow: auto;
}

.photo-modal-dialog {
    width: min(1180px, calc(100vw - 1.5rem));
    max-width: min(1180px, calc(100vw - 1.5rem));
    margin-right: auto;
    margin-left: auto;
}

.photo-modal-stage {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 180px;
    max-height: calc(100dvh - 10rem);
    border-radius: 14px;
    background: var(--soft-surface);
    overflow: hidden;
}

.photo-modal img {
    display: block;
    max-width: 100%;
    max-height: calc(100dvh - 10rem);
    object-fit: contain;
}

.photo-modal-description {
    width: 100%;
    margin: 0;
    padding: 0 0.25rem;
}

.reverse-geocode-box {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    padding: 1rem 1.1rem;
    background: rgba(11, 110, 79, 0.06);
    border: 1px solid rgba(11, 110, 79, 0.12);
    border-radius: 18px;
}

.marker-icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 0.75rem;
}

.marker-icon-option {
    display: block;
    cursor: pointer;
}

.marker-icon-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.marker-icon-card {
    display: grid;
    justify-items: center;
    gap: 0.45rem;
    min-height: 96px;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--soft-surface);
    color: var(--ink);
    font-weight: 700;
}

.marker-icon-card img {
    width: 38px;
    height: 38px;
}

.marker-icon-input:checked + .marker-icon-card {
    border-color: var(--brand);
    box-shadow: 0 0 0 0.2rem rgba(26, 147, 111, 0.16);
    background: rgba(26, 147, 111, 0.12);
}

.marker-icon-input:focus-visible + .marker-icon-card {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.marker-icon-select {
    display: inline-block;
}

.marker-icon-select-button,
.marker-icon-select-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.marker-icon-select-button {
    width: auto;
    min-width: 0;
    padding-inline: 0.65rem;
}

.marker-icon-select-button img,
.marker-icon-select-option img {
    width: 28px;
    height: 28px;
}

.marker-icon-select-menu {
    min-width: auto;
    max-height: 320px;
    overflow-y: auto;
}

.marker-icon-select-option {
    width: auto;
    min-width: 0;
    padding-inline: 0.75rem;
}

.search-box {
    display: flex;
    gap: 0.75rem;
    align-items: end;
}

.search-action {
    min-width: 120px;
}

.search-results {
    display: grid;
    gap: 0.75rem;
    margin-top: 0.9rem;
}

.search-result-card {
    background: var(--soft-surface-strong);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 0.9rem 1rem;
}

.search-result-card button {
    margin-top: 0.7rem;
}

.duplicate-check-panel {
    background: rgba(221, 107, 32, 0.08);
    border: 1px solid rgba(221, 107, 32, 0.22);
    border-radius: 18px;
    padding: 1rem;
}

.duplicate-check-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.35rem;
}

.duplicate-result-list {
    display: grid;
    gap: 0.65rem;
}

.duplicate-result-card {
    display: grid;
    gap: 0.15rem;
    padding: 0.75rem 0.85rem;
    background: var(--soft-surface-strong);
    border: 1px solid var(--border);
    border-radius: 14px;
    color: var(--ink);
    text-decoration: none;
}

.duplicate-result-card span,
.duplicate-result-card small {
    color: var(--muted);
}

.location-detail-drawer {
    width: min(520px, 100vw);
    background: var(--panel-strong);
}

.location-detail-drawer .offcanvas-header {
    align-items: flex-start;
    border-bottom: 1px solid var(--border);
}

.detail-drawer-map {
    min-height: 240px;
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 1rem;
    background: var(--soft-surface);
}

.detail-drawer-heading {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.detail-drawer-description {
    line-height: 1.6;
}

.detail-drawer-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 1rem 0;
}

.detail-drawer-meta div {
    display: grid;
    gap: 0.15rem;
    padding: 0.8rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--soft-surface);
}

.detail-drawer-meta strong,
.detail-drawer-section h3 {
    font-size: 0.82rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.detail-drawer-section {
    display: grid;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.detail-drawer-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
    gap: 0.5rem;
}

.detail-drawer-photo {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    padding: 0.28rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--soft-surface-strong);
}

.detail-drawer-photo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.location-detail-drawer .motif-grid {
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 0.55rem;
}

.location-detail-drawer .motif-card {
    gap: 0.45rem;
    padding: 0.5rem;
    border-radius: 12px;
}

.location-detail-drawer .motif-coin-wrapper {
    width: min(100%, 82px);
}

.location-detail-drawer .motif-coin-side:not(.motif-template-custom) {
    border-width: 4px;
}

.location-detail-drawer .motif-coin-empty {
    padding: 0.5rem;
    font-size: 0.72rem;
}

.location-detail-drawer .motif-description {
    font-size: 0.78rem;
    line-height: 1.35;
}

.detail-drawer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.detail-drawer-history {
    display: grid;
    gap: 0.65rem;
}

.detail-drawer-history-item {
    padding: 0.8rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--soft-surface);
}

.detail-drawer-history-head {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 0.35rem;
}

@media (max-width: 1199.98px) {
    .filters-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .filters-bar.map-filter-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .filters-bar #filter-text {
        grid-column: auto;
    }
}

@media (max-width: 991.98px) {
    .hero-panel,
    .map-layout,
    .landing-hero-grid,
    .form-page-header,
    .admin-grid,
    .community-layout,
    .community-section-grid,
    .community-stats-layout,
    .message-layout,
    .profile-grid,
    .detail-hero,
    .detail-grid,
    .detail-content-grid {
        grid-template-columns: 1fr;
        display: grid;
    }

    .map-page-map-shell,
    .map-side-stack {
        height: auto;
        min-height: 0;
    }

    .map-page-layout {
        grid-auto-rows: auto;
        align-items: start;
    }

    .map-page-map-shell {
        overflow: hidden;
    }

    .map-side-stack {
        display: block;
    }

    .location-list-panel {
        max-height: 620px;
    }

    .message-layout {
        --message-panel-height: min(560px, 72vh);
    }

    .message-compose-grid,
    .message-compose-grid:has([data-message-recipient-free][hidden]) {
        grid-template-columns: 1fr;
    }

    .community-stat-grid {
        grid-template-columns: 1fr;
    }

    .community-search-row,
    .community-member-row {
        grid-template-columns: 1fr;
    }

    .landing-map-visual {
        min-height: 220px;
    }

    .map-control-panel .panel-header {
        align-items: stretch;
        flex-direction: column;
    }

    .map-control-panel .filter-mode-group {
        width: 100%;
        margin-left: 0;
    }

    .filters-bar {
        grid-template-columns: 1fr;
    }

    .filters-bar.map-filter-bar {
        grid-template-columns: 1fr;
    }

    #overview-map,
    #picker-map,
    .detail-map {
        min-height: 420px;
    }

    #overview-map.overview-map-large {
        flex: 0 0 auto;
        min-height: 420px;
        height: clamp(360px, 48dvh, 520px);
    }

    .map-page-map-shell:has(#location-filters.is-open) #overview-map.overview-map-large {
        min-height: 320px;
        height: clamp(320px, 38dvh, 440px);
    }

    .detail-map-wide {
        min-height: 460px;
    }

    .detail-action-block {
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.7rem;
    }

    .detail-action-block .visit-badge-wrap {
        flex: 1 0 100%;
    }

    .admin-card-header,
    .action-row,
    .reverse-geocode-box,
    .search-box {
        flex-direction: column;
        align-items: stretch;
    }

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

    .search-action {
        min-width: 0;
    }

    .profile-card:last-child {
        grid-column: auto;
    }
}

@media (max-width: 575.98px) {
    .account-collection-stats {
        grid-template-columns: 1fr;
    }

    .message-layout {
        --message-panel-height: min(500px, 68vh);
    }

    .cookie-banner {
        right: 0.75rem;
        bottom: 0.75rem;
        flex-direction: column;
        align-items: stretch;
        width: calc(100% - 1.5rem);
    }

    .site-footer-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .site-footer-actions {
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    .site-footer-links {
        flex-wrap: wrap;
    }

    .discussion-form-actions,
    .discussion-comment-head {
        align-items: stretch;
        flex-direction: column;
    }

    .discussion-form-actions .btn {
        width: 100%;
    }

    .message-bubble {
        width: 100%;
    }

    .photo-modal-dialog {
        width: calc(100vw - 0.75rem);
        max-width: calc(100vw - 0.75rem);
        margin-top: 0.375rem;
        margin-bottom: 0.375rem;
    }

    .photo-modal .modal-content {
        max-height: calc(100dvh - 0.75rem);
        border-radius: 14px;
    }

    .photo-modal .modal-body {
        padding: 0.65rem;
    }

    .photo-modal-stage,
    .photo-modal img {
        max-height: calc(100dvh - 8rem);
    }
}

.challenge-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.challenge-row-list {
    display: grid;
    gap: 0.85rem;
}

.challenge-row {
    background: var(--soft-surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.9rem;
}

.challenge-row-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--ink);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 0;
    text-align: left;
    width: 100%;
}

.challenge-row-toggle strong {
    display: block;
    font-size: 1.05rem;
}

.challenge-milestone-track {
    margin: 1.3rem 1.3rem 0.7rem;
    min-height: 3rem;
    position: relative;
}

.challenge-track-line {
    background: linear-gradient(90deg, var(--brand) var(--challenge-fill), rgba(91, 102, 112, 0.22) var(--challenge-fill));
    border-radius: 999px;
    height: 0.45rem;
    left: 0;
    position: absolute;
    right: 0;
    top: 1.1rem;
}

.challenge-track-step {
    align-items: center;
    background: var(--panel-strong);
    border: 2px solid rgba(91, 102, 112, 0.24);
    border-radius: 999px;
    color: var(--muted);
    display: inline-flex;
    height: 2.65rem;
    justify-content: center;
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    width: 2.65rem;
}

.challenge-track-step.is-earned {
    border-color: rgba(221, 107, 32, 0.75);
    color: var(--accent);
}

.challenge-track-step .trophy-badge-image {
    height: 2.1rem;
    width: 2.1rem;
}

.challenge-row-panel {
    border-top: 1px solid var(--border);
    margin-top: 0.8rem;
    padding-top: 0.9rem;
}

.challenge-row-panel > p {
    color: var(--muted);
    margin: 0 0 0.75rem;
}

.challenge-card {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.challenge-card-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.challenge-card-header h3,
.challenge-badge h4 {
    margin: 0;
}

.challenge-card-header p,
.challenge-badge p {
    color: var(--muted);
    margin: 0.25rem 0 0;
}

.challenge-badge-list {
    display: grid;
    gap: 0.7rem;
}

.challenge-badge {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.8rem;
}

.challenge-badge.is-earned {
    border-color: rgba(22, 163, 74, 0.5);
    box-shadow: inset 0 0 0 1px rgba(22, 163, 74, 0.08);
}

.challenge-badge-head,
.challenge-badge-meta {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
}

.challenge-verification {
    align-self: flex-start;
    background: var(--soft-surface);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.25rem 0.55rem;
    white-space: nowrap;
}

.challenge-progress {
    background: var(--soft-surface);
    border-radius: 999px;
    height: 0.45rem;
    margin: 0.75rem 0 0.55rem;
    overflow: hidden;
}

.challenge-progress span {
    background: var(--brand);
    display: block;
    height: 100%;
}

.challenge-badge-meta {
    color: var(--muted);
    font-size: 0.82rem;
}

.trophy-badge-list,
.profile-trophy-grid {
    display: grid;
    gap: 0.75rem;
}

.profile-trophy-grid {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.profile-challenges-card {
    grid-column: 1 / -1;
}

.trophy-badge {
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 8px;
    display: flex;
    gap: 0.8rem;
    padding: 0.85rem;
}

.trophy-badge-compact {
    padding: 0.7rem;
}

.trophy-badge-medal {
    align-items: center;
    background: linear-gradient(145deg, rgba(221, 107, 32, 0.18), rgba(11, 110, 79, 0.12));
    border-radius: 999px;
    color: var(--accent);
    display: flex;
    flex: 0 0 3.2rem;
    height: 3.2rem;
    justify-content: center;
    width: 3.2rem;
}

.trophy-badge-icon {
    display: block;
    fill: none;
    height: 2.1rem;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 3;
    width: 2.1rem;
}

.trophy-badge-image {
    border-radius: 999px;
    display: block;
    height: 3.2rem;
    object-fit: cover;
    width: 3.2rem;
}

.trophy-cup,
.trophy-base,
.trophy-stem,
.trophy-star {
    fill: currentColor;
    stroke: currentColor;
}

.trophy-handle {
    fill: none;
}

.trophy-badge-copy h4 {
    margin: 0;
}

.trophy-badge-copy p {
    color: var(--muted);
    margin: 0.2rem 0 0.4rem;
}

.trophy-badge-meta {
    color: var(--muted);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.78rem;
    gap: 0.45rem;
}

.trophy-badge.is-locked {
    opacity: 0.5;
}

.trophy-badge.is-locked .trophy-badge-medal {
    background: var(--soft-surface);
    color: var(--muted);
    filter: grayscale(1);
}

.trophy-badge.is-earned {
    border-color: rgba(221, 107, 32, 0.45);
    box-shadow: inset 0 0 0 1px rgba(221, 107, 32, 0.08);
}