/* Base layout tokens (visual glass lives in glass.css) */
:root {
    --ink: #141414;
    --ink-muted: #6b7280;
    --surface: #ebe8e4;
    --panel: rgba(255, 255, 255, 0.62);
    --panel-solid: #f4f2ef;
    --panel-border: rgba(20, 20, 20, 0.08);
    --panel-shadow: 0 12px 40px rgba(20, 20, 20, 0.14);
    --accent: #ff5a3d;
    --accent-hover: #e84a2f;
    --accent-soft: rgba(255, 90, 61, 0.14);
    --accent-ink: #e84a2f;
    --font-ui: "Satoshi", "Plus Jakarta Sans", system-ui, sans-serif;
    --font-brand: "Clash Display", "Satoshi", sans-serif;
    --danger: #c2410c;
    --radius-sm: 0.7rem;
    --radius-md: 1.05rem;
    --radius-lg: 1.4rem;
    --radius-xl: 1.75rem;
    --map-btn-size: 3rem;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --dur-fast: 150ms;
    --dur: 200ms;
}

html.dark,
.dark {
    --ink: #f5f5f4;
    --ink-muted: #a8a29e;
    --surface: #0c1014;
    --panel: rgba(22, 28, 34, 0.72);
    --panel-solid: #161c22;
    --panel-border: rgba(255, 255, 255, 0.12);
    --panel-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
    --accent: #ff7a5c;
    --accent-hover: #ff5a3d;
    --accent-soft: rgba(255, 122, 92, 0.18);
    --accent-ink: #ff7a5c;
}

html[data-palette="terre"] {
    --ink: #542916;
    --ink-muted: #8a6b4a;
    --surface: #f3ead8;
    --panel-solid: #fefaf0;
    --panel-border: rgba(84, 41, 22, 0.12);
    --accent: #a13a1e;
    --accent-hover: #862f18;
    --accent-soft: rgba(161, 58, 30, 0.16);
    --accent-ink: #a13a1e;
}
html.dark[data-palette="terre"],
html[data-palette="terre"].dark {
    --ink: #fefaf0;
    --ink-muted: #d4b896;
    --surface: #2a150c;
    --panel-solid: #3a1c0f;
    --panel-border: rgba(254, 250, 240, 0.14);
    --accent: #f1c166;
    --accent-hover: #b79858;
    --accent-soft: rgba(241, 193, 102, 0.2);
    --accent-ink: #f1c166;
}

html[data-palette="sparrow"] {
    --ink: #2b2c1c;
    --ink-muted: #6e6c4f;
    --surface: #e3d9cc;
    --panel-solid: #ede6dd;
    --panel-border: rgba(43, 44, 28, 0.12);
    --accent: #693d22;
    --accent-hover: #8f6228;
    --accent-soft: rgba(105, 61, 34, 0.16);
    --accent-ink: #693d22;
}
html.dark[data-palette="sparrow"],
html[data-palette="sparrow"].dark {
    --ink: #ede6dd;
    --ink-muted: #c9aa7d;
    --surface: #1a1b12;
    --panel-solid: #2b2c1c;
    --panel-border: rgba(237, 230, 221, 0.12);
    --accent: #c9aa7d;
    --accent-hover: #8f6228;
    --accent-soft: rgba(201, 170, 125, 0.22);
    --accent-ink: #c9aa7d;
}

.palette-picker {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
}
.palette-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.45rem;
    padding: 0.55rem;
    border-radius: 1rem;
    border: 1px solid rgba(20, 20, 20, 0.1);
    background: rgba(255, 255, 255, 0.45);
    color: inherit;
    cursor: pointer;
    text-align: left;
    transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.palette-card:hover { transform: translateY(-1px); }
.palette-card.is-active {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft);
}
.palette-card__swatches {
    display: flex;
    height: 1.65rem;
    border-radius: 0.55rem;
    overflow: hidden;
}
.palette-card__swatches i {
    flex: 1;
    display: block;
}
.palette-card__name {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}
html.dark .palette-card,
.dark .palette-card {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
}

html {
    height: 100%;
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    background: var(--surface, #ebe8e4);
}
body {
    overflow: hidden;
    overscroll-behavior: none;
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    width: 100%;
    max-width: 100%;
    background: var(--surface, #ebe8e4);
    color: var(--ink);
    font-family: var(--font-ui);
    font-weight: 500;
    letter-spacing: -0.01em;
    transition: color var(--dur) ease;
    /* Safe-area handled by chrome (bottom nav / panels), not body padding —
       padding here left a white strip under the mobile rail. */
    padding-bottom: 0;
    -webkit-font-smoothing: antialiased;
}
#map {
    background: var(--surface, #ebe8e4);
}

.brand-title {
    font-family: var(--font-brand);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.15;
}
.brand-sub {
    font-family: var(--font-ui);
    font-weight: 500;
    color: var(--ink-muted);
}

/* Map chrome structure (look from glass.css) */
.map-icon-btn {
    width: var(--map-btn-size);
    height: var(--map-btn-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) ease;
}
.map-icon-btn.hidden {
    display: none !important;
}
.app-rail__btn.hidden {
    display: none !important;
}
/*
 * Chrome visibility (canonical):
 * - Desktop ≥768: account actions in #app-rail; map top-right = events only.
 * - Mobile <768: bottom nav + map top-right = events + messages + notifications.
 * Never rely on Tailwind md:hidden alone for .map-icon-btn — display:inline-flex wins.
 */
@media (min-width: 768px) {
    #notif-wrap-mobile,
    #msg-wrap-mobile,
    #settings-btn-mobile,
    #profile-btn-mobile,
    #burger-btn,
    #mobile-bottom-nav {
        display: none !important;
    }
}
@media (max-width: 767px) {
    #app-rail {
        display: none !important;
    }
}
.map-icon-btn:hover { transform: translateY(-1px) scale(1.03); }
.map-icon-btn:active { transform: scale(0.96); }
.map-icon-btn--accent { color: var(--accent-ink); }
.map-icon-btn i { font-size: 1.05rem; pointer-events: none; }

.map-fab {
    width: 3.5rem;
    height: 3.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: transform var(--dur-fast) var(--ease-out);
}
.map-fab:hover { transform: translateY(-2px) scale(1.04); }
.map-fab:active { transform: scale(0.96); }

.ui-tab {
    flex: 1;
    font-weight: 700;
    border-bottom: 2px solid transparent;
    color: var(--ink-muted);
    transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.ui-tab:hover { color: var(--ink); }
.ui-tab.is-active {
    color: var(--accent-ink);
    border-bottom-color: var(--accent);
}
.ui-tab--main { padding: 0.75rem 0.25rem; font-size: 11px; }
.ui-tab--filter { padding: 0.65rem 0.25rem; font-size: 11px; }
@media (min-width: 768px) {
    .ui-tab--main, .ui-tab--filter { font-size: 12px; }
}

.sidebar-sound-row {
    padding: 0.7rem 0.75rem;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    cursor: pointer;
    transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.sidebar-sound-row__play {
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(20, 32, 28, 0.06);
    color: var(--ink-muted);
}
.sidebar-sound-row.is-active .sidebar-sound-row__play,
.sidebar-sound-row__play.is-playing {
    background: var(--accent);
    color: #fff;
}
.sidebar-sound-row__body {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}
.sidebar-sound-row__title {
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--ink, #141414);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.dark .sidebar-sound-row__title { color: #f8fafc; }
.sidebar-sound-row__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.35rem;
}
.sidebar-sound-row__chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dark .sidebar-sound-row__chip {
    background: #1e293b;
    color: #94a3b8;
}
.sidebar-sound-row__chip--eco {
    background: color-mix(in srgb, var(--accent, #ff5a3d) 12%, #fff);
    color: var(--accent-ink, #e84a2f);
}
.dark .sidebar-sound-row__chip--eco {
    background: color-mix(in srgb, var(--accent, #ff5a3d) 22%, #0f172a);
}
.sidebar-sound-row__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.35rem;
}
.sidebar-sound-row__tag {
    font-size: 10px;
    font-weight: 600;
    color: #64748b;
    background: rgba(148, 163, 184, 0.14);
    padding: 0.1rem 0.4rem;
    border-radius: 0.4rem;
    max-width: 7.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dark .sidebar-sound-row__tag {
    color: #94a3b8;
    background: rgba(148, 163, 184, 0.12);
}
.sidebar-sound-row__actions {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex-shrink: 0;
}
.sidebar-sound-row__action {
    width: 2rem;
    height: 2rem;
    border-radius: 0.65rem;
    border: 1px solid rgba(20, 20, 20, 0.08);
    background: rgba(20, 20, 20, 0.03);
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.sidebar-sound-row__action:hover {
    color: var(--accent-ink, #e84a2f);
    border-color: color-mix(in srgb, var(--accent, #ff5a3d) 35%, transparent);
    background: color-mix(in srgb, var(--accent, #ff5a3d) 10%, transparent);
}
.dark .sidebar-sound-row__action {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: #94a3b8;
}
.sidebar-sound-row__action:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

.glass-switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-md);
}
.glass-switch-row__label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ink);
}
.glass-switch-row__hint {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--ink-muted);
}
.glass-switch {
    position: relative;
    width: 3.1rem;
    height: 1.75rem;
    flex-shrink: 0;
    border-radius: 999px;
    border: 1px solid var(--panel-border);
    background: rgba(20, 32, 28, 0.1);
    cursor: pointer;
    transition: background var(--dur) var(--ease-out);
    padding: 0;
}
html.dark .glass-switch,
.dark .glass-switch { background: rgba(255, 255, 255, 0.1); }
.glass-switch[aria-checked="true"] {
    background: color-mix(in srgb, var(--accent) 80%, transparent);
}
.glass-switch__thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc(1.75rem - 6px);
    height: calc(1.75rem - 6px);
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(20, 32, 28, 0.2);
    transition: transform var(--dur) var(--ease-out);
}
.glass-switch[aria-checked="true"] .glass-switch__thumb {
    transform: translateX(1.3rem);
}
.glass-switch:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.glass-seg {
    display: flex;
    gap: 0.35rem;
    padding: 0.35rem;
    border-radius: var(--radius-md);
}
.glass-seg--wrap {
    flex-wrap: wrap;
}
.glass-seg--wrap .glass-seg__btn {
    flex: 1 1 calc(50% - 0.25rem);
    min-width: 5.5rem;
}
.glass-seg__btn {
    flex: 1;
    padding: 0.55rem 0.5rem;
    border-radius: calc(var(--radius-md) - 0.2rem);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--ink-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.glass-seg__btn:hover { color: var(--ink); }
.glass-seg__btn.is-active {
    background: rgba(255, 255, 255, 0.55);
    color: var(--ink);
    box-shadow: 0 1px 4px rgba(20, 32, 28, 0.08);
}
html.dark .glass-seg__btn.is-active,
.dark .glass-seg__btn.is-active {
    background: rgba(255, 255, 255, 0.12);
}
.glass-seg__btn.is-active--accent {
    background: var(--accent);
    color: #fff;
}

#player-card.player-shell {
    transition: transform 0.4s var(--ease-out), opacity var(--dur) ease;
}

@keyframes map-chrome-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
#burger-btn,
#map-top-right-controls > .map-icon-btn,
#fab-add > * {
    animation: map-chrome-in 0.35s var(--ease-out) both;
}
#fab-add > *:nth-child(2) { animation-delay: 0.06s; }

/* ???????: ?? ???????? ?? ????? ???????? (dvh + safe-area) */
.app-modal-overlay {
    padding-top: max(0.75rem, env(safe-area-inset-top, 0px));
    padding-right: max(0.75rem, env(safe-area-inset-right, 0px));
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
    padding-left: max(0.75rem, env(safe-area-inset-left, 0px));
    align-items: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
@media (min-width: 640px) {
    .app-modal-overlay { align-items: center; }
}
.app-modal-panel {
    max-height: min(92vh, calc(100dvh - 1.5rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
    margin-top: auto;
    margin-bottom: auto;
}
#player-card {
    max-height: min(85vh, calc(100dvh - 1rem - env(safe-area-inset-bottom, 0px))) !important;
}
/* ?? ???????? ??? ???????????? ?????? FAB (Guessr / ???????? ????) ? ??????? ?????? ?
   ?? ???????? ??? ????????, ????? ?? ???????????. */
@media (max-width: 767px) {
    body.player-analyzers-open #map-top-right-controls,
    body.player-analyzers-open #fab-add {
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
        transition: opacity 0.2s ease, visibility 0.2s ease;
    }
}
#map-top-right-controls,
#fab-add {
    transition: opacity 0.2s ease, visibility 0.2s ease;
}
.admin-subtabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    padding: 0.3rem;
    background: #f1f5f9;
    border-radius: 0.9rem;
    overflow-x: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.admin-subtabs::-webkit-scrollbar {
    display: none;
    height: 0;
    width: 0;
}
.dark .admin-subtabs { background: #0f172a; }
.admin-subtab-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    flex: 0 0 auto;
    min-width: 0;
    padding: 0.5rem 0.65rem;
    border-radius: 0.7rem;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    color: #64748b;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    white-space: nowrap;
    border: none;
    background: transparent;
    cursor: pointer;
}
.admin-subtab-btn.active {
    background: #fff;
    color: #0f172a;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}
.dark .admin-subtab-btn.active {
    background: #1e293b;
    color: #f8fafc;
}
.admin-subtab-btn .admin-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.1);
    color: #475569;
    font-size: 0.625rem;
    font-weight: 800;
    line-height: 1;
    flex-shrink: 0;
}
.dark .admin-subtab-btn .admin-filter-count {
    background: rgba(255, 255, 255, 0.12);
    color: #cbd5e1;
}
.admin-subtab-btn.active .admin-filter-count {
    background: var(--accent-soft, rgba(255, 90, 61, 0.16));
    color: var(--accent-ink, #e84a2f);
}
.admin-filter-count:empty,
.admin-filter-count[hidden] {
    display: none !important;
}
.app-rail__btn--admin.is-active {
    color: #dc2626;
    background: rgba(220, 38, 38, 0.1);
}
.dark .app-rail__btn--admin.is-active {
    color: #f87171;
    background: rgba(248, 113, 113, 0.12);
}
.admin-tool-btn {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.7rem 0.85rem;
    border-radius: 0.85rem;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #334155;
    font-size: 12px;
    font-weight: 700;
    text-align: left;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.admin-tool-btn i { color: #94a3b8; width: 1rem; text-align: center; }
.admin-tool-btn:hover { background: #f8fafc; border-color: #cbd5e1; }
.dark .admin-tool-btn {
    background: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}
.dark .admin-tool-btn:hover { background: #0f172a; }
.admin-console-output {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    line-height: 1.45;
    padding: 0.75rem;
    border-radius: 0.85rem;
    border: 1px solid #e2e8f0;
    background: #0b1220;
    color: #cbd5e1;
    overflow-y: auto;
    max-height: min(42vh, 360px);
}
.dark .admin-console-output { border-color: #334155; }
.admin-console-line { white-space: pre-wrap; word-break: break-word; margin-bottom: 0.2rem; }
.admin-console-line--cmd { color: #93c5fd; }
.admin-console-line--ok { color: #86efac; }
.admin-console-line--error { color: #fca5a5; }
.admin-console-compose { position: relative; }
.admin-console-suggest {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 4px);
    max-height: 220px;
    overflow-y: auto;
    z-index: 20;
    border-radius: 0.75rem;
    border: 1px solid #334155;
    background: #0f172a;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.admin-console-suggest__item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    width: 100%;
    text-align: left;
    padding: 0.45rem 0.65rem;
    border: 0;
    background: transparent;
    color: #cbd5e1;
    cursor: pointer;
}
.admin-console-suggest__item code {
    font-size: 11px;
    color: #93c5fd;
}
.admin-console-suggest__item span {
    font-size: 10px;
    color: #94a3b8;
}
.admin-console-suggest__item:hover,
.admin-console-suggest__item.is-active {
    background: rgba(59, 130, 246, 0.18);
}

/* Public profile — no decorative cover banner */
.pp-modal { max-height: min(92dvh, 760px); }
.pp-hero__cover {
    display: none;
}
.pp-hero__close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 10;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    background: rgba(15, 23, 42, 0.08);
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pp-hero__close:hover {
    background: rgba(15, 23, 42, 0.14);
    color: #0f172a;
}
.dark .pp-hero__close {
    background: rgba(255, 255, 255, 0.08);
    color: #94a3b8;
}
.dark .pp-hero__close:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #f8fafc;
}
.pp-hero__body {
    padding-top: 0.85rem !important;
}
.pp-avatar-wrap { margin-top: 0; }
.pp-avatar {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 9999px;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
    cursor: pointer;
    background: #f1f5f9;
}
.dark .pp-avatar { border-color: #0f172a; }
.pp-avatar--fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: 1.35rem;
    background: #f1f5f9;
}
.dark .pp-avatar--fallback { background: #1e293b; color: #94a3b8; }
.pp-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 10px;
    font-weight: 600;
    color: #64748b;
    background: #f1f5f9;
    padding: 0.2rem 0.55rem;
    border-radius: 9999px;
}
.dark .pp-meta-chip { background: #1e293b; color: #94a3b8; }
.pp-meta-chip--level {
    color: #b45309;
    background: #fff7ed;
}
.dark .pp-meta-chip--level { color: #fcd34d; background: rgba(180, 83, 9, 0.2); }
.pp-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    border-radius: 0.75rem;
    font-size: 11px;
    font-weight: 700;
    transition: background 0.15s ease, color 0.15s ease;
}
.pp-btn--ghost {
    background: #f1f5f9;
    color: #334155;
}
.pp-btn--ghost:hover { background: #e2e8f0; }
.dark .pp-btn--ghost { background: #1e293b; color: #e2e8f0; }
.dark .pp-btn--ghost:hover { background: #334155; }
.pp-btn--primary {
    background: var(--accent, #FF5A3D);
    color: #fff;
}
.pp-btn--primary:hover { filter: brightness(0.96); }
.pp-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    padding: 0.65rem;
    border-radius: 1rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}
.dark .pp-stats { background: #0f172a; border-color: #334155; }
.pp-stat { text-align: center; padding: 0.35rem 0.25rem; }
.pp-stat__value {
    display: block;
    font-size: 1.15rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
}
.dark .pp-stat__value { color: #f8fafc; }
.pp-stat__label {
    display: block;
    margin-top: 0.15rem;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
}
.pp-section__title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.55rem;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
}
.pp-section__title i { color: var(--accent, #FF5A3D); }
.details-gallery {
    position: relative;
    height: 11rem;
    flex-shrink: 0;
    background: #e2e8f0;
}
@media (min-width: 768px) {
    .details-gallery { height: 14rem; }
}
.dark .details-gallery { background: #334155; }
.details-gallery__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: zoom-in;
}
.details-gallery__thumbs {
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    padding-bottom: 0.1rem;
    scrollbar-width: none;
}
.details-gallery__thumbs::-webkit-scrollbar { display: none; }
.details-gallery__thumb {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.55rem;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,0.55);
    flex-shrink: 0;
    cursor: pointer;
    opacity: 0.75;
    transition: opacity 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.details-gallery__thumb.active {
    opacity: 1;
    border-color: #fff;
    transform: scale(1.05);
}
.details-gallery__counter {
    position: absolute;
    top: 0.75rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.45);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 0.2rem 0.65rem;
    border-radius: 9999px;
    backdrop-filter: blur(6px);
}
.session-route-stop {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    border-radius: 0.75rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    font-size: 12px;
}
.dark .session-route-stop {
    background: #1e293b;
    border-color: #334155;
}
.session-route-stop__num {
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 9999px;
    background: var(--accent);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
#lightbox-overlay {
    padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
}
#lightbox-img {
    max-height: min(85vh, calc(100dvh - 6rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
    max-width: min(100%, calc(100vw - 1rem));
    border-radius: 0.5rem;
}
#lightbox-dots {
    display: flex;
    gap: 0.35rem;
    justify-content: center;
    margin-top: 0.75rem;
}
.lightbox-dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 9999px;
    background: rgba(255,255,255,0.35);
}
.lightbox-dot.active { background: #fff; width: 1rem; }

/* ?????? ???? */
body.dark-mode { background-color: transparent; color: var(--ink); }
/* Surfaces styled by glass.css ? do not force opaque slate fills here */
body.dark-mode .text-slate-800 { color: #f1f5f9; }
body.dark-mode .text-slate-600 { color: #cbd5e1; }
body.dark-mode .modal-input,
.dark .modal-input {
    background-color: #0f172a;
    border-color: #334155;
    color: #f1f5f9;
    -webkit-text-fill-color: #f1f5f9;
}
body.dark-mode .modal-input::placeholder,
.dark .modal-input::placeholder {
    color: #94a3b8;
    opacity: 1;
}

/* ????????? ????????? */
.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 transparent;
}
.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
    margin: 4px 0;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #64748b;
    border: 2px solid transparent;
    background-clip: padding-box;
}
.dark .custom-scrollbar {
    scrollbar-color: #64748b transparent;
}
.dark .custom-scrollbar::-webkit-scrollbar-thumb {
    background: #64748b;
    border: 2px solid transparent;
    background-clip: padding-box;
}
.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
    border: 2px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
.dark ::-webkit-scrollbar-thumb { background: #475569; }

[class*="gototech"] { display: none !important; }

/* ???????: ??????????? ??? ????????? */
.custom-marker { border-radius: 50%; border: 3px solid white; box-shadow: 0 4px 10px rgba(0,0,0,0.3); transition: transform 0.2s; cursor: pointer; }
.dark .custom-marker { border-color: #1e293b; }
.custom-marker.selected { transform: scale(1.3); z-index: 1000 !important; border-color: #0f172a; box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.4); }
.dark .custom-marker.selected { border-color: #f8fafc; }

/* ?????? ????? ??? ????????? */
.marker-hover-card {
    position: fixed;
    z-index: 9996;
    width: 196px;
    pointer-events: none;
    opacity: 0;
    transform: translateY(6px) scale(0.98);
    transition: opacity 0.15s ease, transform 0.15s ease;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid #e2e8f0;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
}
.marker-hover-card.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.dark .marker-hover-card {
    background: rgba(30, 41, 59, 0.97);
    border-color: #334155;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}
.marker-hover-card__photo-wrap {
    height: 96px;
    background: #e2e8f0;
    overflow: hidden;
}
.marker-hover-card.no-photo .marker-hover-card__photo-wrap {
    display: none;
}
.dark .marker-hover-card__photo-wrap { background: #0f172a; }
.marker-hover-card__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.marker-hover-card__body { padding: 8px 10px 10px; }
.marker-hover-card__eco {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 2px;
}
.dark .marker-hover-card__eco { color: #94a3b8; }
.marker-hover-card__eco.is-geo { color: #0284c7; }
.marker-hover-card__eco.is-bio { color: #16a34a; }
.marker-hover-card__eco.is-anthro { color: #ea580c; }
.dark .marker-hover-card__eco.is-geo { color: #38bdf8; }
.dark .marker-hover-card__eco.is-bio { color: #4ade80; }
.dark .marker-hover-card__eco.is-anthro { color: #fb923c; }
.marker-hover-card__title {
    font-size: 12px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.dark .marker-hover-card__title { color: #f8fafc; }
.marker-hover-card__meta {
    margin-top: 4px;
    font-size: 10px;
    font-weight: 600;
    color: #64748b;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.dark .marker-hover-card__meta { color: #94a3b8; }
.marker-hover-card__meta span { display: inline-flex; align-items: center; gap: 3px; }
.marker-hover-card__desc {
    margin-top: 5px;
    font-size: 10px;
    line-height: 1.35;
    color: #475569;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.dark .marker-hover-card__desc { color: #cbd5e1; }
@media (hover: none) {
    .marker-hover-card { display: none !important; }
}

/* ????? ????? */
.marker-geo { background-color: #38bdf8; } 
.marker-bio { background-color: #4ade80; } 
.marker-anthro { background-color: #f97316; } 

/* ??? Map-first chrome: rail + floating dock + top toolbar ??? */
:root {
    --rail-w: 3.75rem;
    --dock-w-compact: 20rem;
    --dock-w-expanded: 27rem;
    --chrome-gap: 0.75rem;
    --chrome-pad: 1rem;
    --sat: env(safe-area-inset-top, 0px);
    --sar: env(safe-area-inset-right, 0px);
    --sab: env(safe-area-inset-bottom, 0px);
    --sal: env(safe-area-inset-left, 0px);
    --chrome-inset: var(--chrome-pad);
    --chrome-inset-top: calc(var(--chrome-pad) + var(--sat));
    --chrome-inset-right: calc(var(--chrome-pad) + var(--sar));
    --chrome-inset-bottom: calc(var(--chrome-pad) + var(--sab));
    --chrome-inset-left: calc(var(--chrome-pad) + var(--sal));
    --mobile-nav-h: 3.35rem;
    /* Mobile fullscreen surfaces end above the bottom rail */
    --mobile-fs-bottom: calc(var(--mobile-nav-h) + var(--sab));
}

@media (min-width: 768px) {
    :root {
        --chrome-pad: 1.25rem;
        --chrome-inset: 1.25rem;
        --chrome-gap: 0.85rem;
    }
}

html.is-standalone {
    height: 100%;
}
html.is-standalone body {
    height: 100%;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
    padding-bottom: 0;
}
@media (display-mode: standalone), (display-mode: fullscreen) {
    html {
        height: 100%;
    }
    body {
        height: 100%;
        min-height: 100dvh;
        min-height: -webkit-fill-available;
        padding-bottom: 0;
    }
}

#app-rail.app-rail {
    position: absolute;
    top: var(--chrome-inset-top);
    left: var(--chrome-inset-left);
    bottom: var(--chrome-inset-bottom);
    width: var(--rail-w);
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    padding: 0.65rem 0.4rem;
    border-radius: var(--radius-xl, 1.6rem);
    overflow: hidden;
    overscroll-behavior: none;
}
@media (min-width: 768px) {
    #app-rail.app-rail {
        display: flex !important;
    }
}
.app-rail__spacer {
    flex: 1 1 auto;
    min-height: 0.75rem;
    width: 1px;
}
.app-rail__btn--accent.is-active,
.app-rail__btn.app-rail__btn--accent:hover {
    color: var(--accent-ink, #e84a2f);
}
.app-rail__btn--danger {
    color: #b91c1c;
}
.app-rail__btn--danger:hover {
    background: rgba(185, 28, 28, 0.12);
    color: #991b1b;
}
.dark .app-rail__btn--danger { color: #f87171; }
.dark .app-rail__btn--danger:hover {
    background: rgba(248, 113, 113, 0.15);
    color: #fecaca;
}
.dock-back-btn {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 999px;
    border: 1px solid rgba(20, 20, 20, 0.08);
    background: rgba(20, 20, 20, 0.04);
    color: var(--ink-muted, #6b7280);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.dark .dock-back-btn {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
}
#details-modal-content.details-in-dock {
    width: 100% !important;
    max-width: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    border: none !important;
    transform: none !important;
    max-height: none !important;
}
#details-modal-content.details-in-dock .details-gallery {
    border-radius: 0;
}
body.dock-view-details #dock-mobile-tabs,
body.dock-view-analyzers #dock-mobile-tabs,
body.dock-view-settings #dock-mobile-tabs,
body.dock-view-cabinet #dock-mobile-tabs,
body.dock-view-messages #dock-mobile-tabs,
body.dock-view-expedition #dock-mobile-tabs {
    display: none !important;
}

/* Avoid a hard full-bleed hairline under dock chrome (reads as a screen-wide bar) */
body.dock-view-cabinet .dock-header,
body.dock-view-messages .dock-header,
body.dock-view-expedition .dock-header,
body.dock-view-settings .dock-header,
body.dock-view-details .dock-header,
body.dock-view-analyzers .dock-header {
    border-bottom-color: transparent !important;
}
#cabinet-modal-content.cabinet-in-dock > .border-b,
#messages-modal-content.messages-in-dock > .border-b,
#expedition-view-modal-content.expedition-in-dock > .border-b,
#settings-modal-content.settings-in-dock > .border-b,
#cabinet-modal-content.cabinet-in-dock .cabinet-modal-header {
    border-bottom-color: color-mix(in srgb, var(--panel-border, #e2e8f0) 70%, transparent);
}

.app-rail__brand {
    width: 2.55rem;
    height: 2.55rem;
    border-radius: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-ink, #e84a2f);
    font-size: 1.05rem;
    margin-bottom: 0.35rem;
    overflow: hidden;
    flex-shrink: 0;
    background: #000;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.app-rail__brand img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.dock-view-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--accent, #ff5a3d) 14%, transparent);
    color: var(--accent-ink, #e84a2f);
    font-size: 1rem;
}
.dock-view-icon.hidden { display: none !important; }
body.dock-view-settings .dock-brand-mark { display: none; }
body.dock-view-settings .dock-view-icon { display: inline-flex !important; }

.dock-brand-mark {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.8rem;
    object-fit: cover;
    margin-top: 0.2rem;
    background: #000;
    border: 1px solid rgba(15, 23, 42, 0.08);
}
html.dark .dock-brand-mark,
.dark .dock-brand-mark {
    border-color: rgba(255, 255, 255, 0.1);
}

.app-rail__btn {
    width: 2.55rem;
    height: 2.55rem;
    border-radius: 0.95rem;
    border: 1px solid transparent;
    background: transparent;
    color: var(--ink-muted, #6b7280);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color var(--dur, 200ms) var(--ease-out), background var(--dur, 200ms) var(--ease-out), border-color var(--dur, 200ms) var(--ease-out);
    cursor: pointer;
    overflow: visible;
    padding: 0;
    position: relative;
}
.profile-btn-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
#profile-btn.has-avatar,
#profile-btn-mobile.has-avatar {
    border-color: rgba(20, 20, 20, 0.08);
    overflow: hidden;
}
#profile-btn.has-avatar .profile-btn-icon,
#profile-btn-mobile.has-avatar .profile-btn-icon {
    display: none;
}
#notif-badge,
#msg-badge,
#notif-badge-mobile,
#msg-badge-mobile {
    min-width: 1.2rem !important;
    height: 1.2rem !important;
    padding: 0 0.3rem !important;
    font-size: 0.625rem !important;
    line-height: 1.2rem !important;
    top: -0.2rem !important;
    right: -0.2rem !important;
    box-sizing: border-box;
    z-index: 2;
}
.app-rail__btn:hover { color: var(--ink, #141414); background: rgba(20, 20, 20, 0.05); }
.app-rail__btn.is-active {
    color: #fff;
    background: var(--cta, #141414);
    border-color: transparent;
}
html.dark .app-rail__btn.is-active,
.dark .app-rail__btn.is-active {
    background: var(--accent, var(--accent-ink));
    color: #fff;
}

#map-top-toolbar.map-top-toolbar {
    position: absolute;
    top: var(--chrome-inset-top);
    left: calc(var(--chrome-inset-left) + var(--rail-w) + var(--chrome-gap) + var(--dock-w-expanded) + var(--chrome-gap));
    right: auto;
    max-width: min(36rem, calc(100vw - var(--chrome-inset-left) - var(--chrome-inset-right) - var(--rail-w) - var(--chrome-gap) - 12rem));
    min-height: 2.75rem;
    display: none;
    align-items: center;
    gap: 0.55rem;
    padding: 0.3rem;
    border-radius: 999px;
    z-index: 50;
    width: fit-content;
}
body.dock-is-hidden #map-top-toolbar.map-top-toolbar {
    left: calc(var(--chrome-inset-left) + var(--rail-w) + var(--chrome-gap));
}
@media (min-width: 768px) {
    #map-top-toolbar.map-top-toolbar { display: flex; }
}
@media (max-width: 767px) {
    #map-top-toolbar.map-top-toolbar {
        display: flex;
        top: var(--chrome-inset-top);
        left: max(0.75rem, var(--sal));
        right: auto;
        max-width: calc(100vw - 5.75rem - var(--sal) - var(--sar));
        padding: 0.25rem;
        border-radius: 999px;
        flex-wrap: nowrap;
    }
    #map-top-toolbar #active-tags-container {
        display: none;
    }
    #map-top-toolbar.is-search-open,
    #map-top-toolbar:has(.map-search-cluster.is-open),
    #map-top-toolbar:has(.map-search-cluster:focus-within) {
        left: max(0.75rem, env(safe-area-inset-left, 0px));
        right: max(0.75rem, env(safe-area-inset-right, 0px));
        max-width: none;
        width: auto;
        z-index: 70;
    }
    body.search-is-open #map-top-right-controls,
    body.search-is-open #burger-btn {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
    #map-top-right-controls {
        top: var(--chrome-inset-top);
        right: var(--chrome-inset-right);
        gap: 0.45rem;
    }
    #map-top-right-controls .map-icon-btn {
        width: 2.75rem;
        height: 2.75rem;
        border-radius: 0.95rem !important;
    }
    #burger-btn {
        top: var(--chrome-inset-top);
        left: var(--chrome-inset-left);
        width: 2.75rem;
        height: 2.75rem;
    }
    #sidebar {
        top: 0;
        left: 0;
        right: 0;
        bottom: var(--mobile-fs-bottom);
        width: auto;
        border-radius: 0;
        max-height: none;
        padding-top: var(--sat);
        padding-bottom: 0;
        z-index: 80;
    }
    .sidebar-hidden {
        transform: translateY(calc(100% + 2rem)) !important;
    }
    /* Catalog switcher: Библиотека / Экспедиции (Help → settings) */
    #dock-mobile-tabs #tab-help {
        display: none !important;
    }
    /* One close affordance: bottom nav «Карта». Keep back only for nested views via body class. */
    #dock-mobile-close {
        display: none !important;
    }
    body:not(.dock-view-details):not(.dock-view-analyzers):not(.dock-view-settings):not(.dock-view-messages):not(.dock-view-expedition):not(.dock-view-admin) #dock-back-btn {
        display: none !important;
    }
    body.dock-view-cabinet.cab-mobile-home #dock-back-btn {
        display: none !important;
    }
    #dock-title {
        font-size: 1.15rem;
    }
    /* FAB stays top-right — away from bottom rail */
    #fab-add {
        top: calc(var(--sat) + 4.35rem);
        bottom: auto;
        right: max(0.75rem, env(safe-area-inset-right, 0px));
        flex-direction: column;
        gap: 0.65rem;
    }
    #burger-btn { display: none !important; }
    /* Messages stay in map chrome when logged in; profile/settings live in bottom nav */
    #settings-btn-mobile,
    #profile-btn-mobile {
        display: none !important;
    }
    #events-fab {
        display: inline-flex !important;
    }
    #map-top-toolbar.map-top-toolbar {
        left: max(0.75rem, var(--sal));
        max-width: calc(100vw - 5.75rem - var(--sal) - var(--sar));
        z-index: 70;
    }
    #map-top-right-controls {
        z-index: 70;
    }
    #player-anchor.player-anchor {
        padding-bottom: calc(var(--mobile-fs-bottom) + 0.5rem);
    }
    /* Keep sidebar above map chrome, below bottom nav */
    #sidebar {
        z-index: 80 !important;
    }
}

/* Search: default = loupe only; hover/focus/open = full clickable field */
.map-search-cluster {
    position: relative;
    display: flex;
    align-items: center;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    border-radius: 999px;
    transition: width 200ms var(--ease-out, ease);
    overflow: visible;
}
.map-search-cluster:hover,
.map-search-cluster:focus-within,
.map-search-cluster.is-open {
    width: min(22rem, 70vw);
}
@media (max-width: 767px) {
    .map-search-cluster:hover,
    .map-search-cluster:focus-within,
    .map-search-cluster.is-open {
        width: min(100%, calc(100vw - 8.5rem));
    }
    /* Touch: no sticky hover — only .is-open / focus-within expand */
    @media (hover: none) {
        .map-search-cluster:hover:not(.is-open):not(:focus-within) {
            width: 2.5rem;
        }
    }
}

.search-toggle-btn {
    position: absolute;
    left: 0;
    top: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: var(--ink-muted, #6b7280);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
}
.search-toggle-btn:hover { color: var(--accent-ink, #e84a2f); }
.map-search-cluster:hover .search-toggle-btn,
.map-search-cluster:focus-within .search-toggle-btn,
.map-search-cluster.is-open .search-toggle-btn {
    pointer-events: none;
    color: var(--ink-muted, #6b7280);
}

.search-cluster-input {
    width: 100%;
    height: 2.5rem;
    margin: 0;
    padding: 0 0.85rem 0 2.5rem;
    border: none;
    border-radius: 999px;
    background: transparent;
    outline: none;
    opacity: 0;
    pointer-events: none;
    cursor: text;
    color: inherit;
}
.map-search-cluster:hover .search-cluster-input,
.map-search-cluster:focus-within .search-cluster-input,
.map-search-cluster.is-open .search-cluster-input {
    opacity: 1;
    pointer-events: auto;
    padding-right: 2.35rem;
}

.search-clear-btn {
    position: absolute;
    right: 0.35rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 1.75rem;
    height: 1.75rem;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--ink-muted, #6b7280);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
}
.map-search-cluster:hover .search-clear-btn:not(.hidden),
.map-search-cluster:focus-within .search-clear-btn:not(.hidden),
.map-search-cluster.is-open .search-clear-btn:not(.hidden) {
    opacity: 1;
    pointer-events: auto;
}
.search-clear-btn:hover { color: var(--accent-ink, #e84a2f); background: rgba(15, 23, 42, 0.06); }

/* Hide native clear on type=search leftovers */
.search-cluster-input::-webkit-search-decoration,
.search-cluster-input::-webkit-search-cancel-button,
.search-cluster-input::-webkit-search-results-button,
.search-cluster-input::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

.tag-chips-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    min-height: 0.25rem;
}
.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.35rem 0.2rem 0.55rem;
    border-radius: 999px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1d4ed8;
    font-size: 0.7rem;
    font-weight: 700;
}
.dark .tag-chip {
    background: rgba(37, 99, 235, 0.2);
    border-color: rgba(59, 130, 246, 0.35);
    color: #93c5fd;
}
.tag-chip__remove {
    width: 1.15rem;
    height: 1.15rem;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.tag-chip__remove:hover { background: rgba(15, 23, 42, 0.08); }

.search-suggestion--empty {
    cursor: default;
    opacity: 0.85;
    pointer-events: none;
}

.active-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 100%;
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: rgba(255, 255, 255, 0.82);
    color: #334155;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1.2;
}
.dark .active-filter-pill {
    background: rgba(30, 41, 59, 0.9);
    border-color: rgba(148, 163, 184, 0.25);
    color: #e2e8f0;
}
.active-filter-clear {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: #94a3b8;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
}
.active-filter-clear:hover { color: #64748b; }
.library-active-filters {
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    padding-bottom: 0.5rem;
}

#map-top-toolbar.toolbar-search-hidden #map-search-cluster {
    display: none;
}
#map-top-toolbar.toolbar-search-hidden {
    max-width: fit-content;
}
#map-top-toolbar .map-top-toolbar__tags {
    max-width: 12rem;
}
@media (min-width: 768px) {
    #map-top-toolbar:has(.map-search-cluster:hover),
    #map-top-toolbar:has(.map-search-cluster:focus-within),
    #map-top-toolbar:has(.map-search-cluster.is-open) {
        max-width: min(36rem, calc(100vw - 14rem));
    }
}

.notif-panel,
#notif-panel.notif-panel {
    position: fixed;
    left: calc(var(--chrome-inset) + var(--rail-w) + 0.55rem);
    bottom: var(--chrome-inset);
    width: min(calc(100vw - 5rem), 22rem);
    max-height: min(70vh, 28rem);
    min-height: 12rem;
    border-radius: var(--radius-lg, 1.15rem);
    z-index: 230;
    background: var(--panel-solid, #fff);
}
#notif-panel.notif-panel:not(.hidden) {
    display: flex !important;
}

.search-suggestions {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 0.4rem);
    max-height: min(50vh, 20rem);
    overflow-y: auto;
    border-radius: 1rem;
    border: 1px solid rgba(20, 20, 20, 0.1);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 12px 40px rgba(20, 20, 20, 0.14);
    z-index: 80;
    padding: 0.35rem;
}
html.dark .search-suggestions,
.dark .search-suggestions { background: rgba(22, 28, 34, 0.96); border-color: rgba(255,255,255,0.12); }
.search-suggestion {
    width: 100%;
    text-align: left;
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.55rem 0.65rem;
    border-radius: 0.75rem;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
}
.search-suggestion:hover,
.search-suggestion.is-active { background: rgba(255, 90, 61, 0.14); }
.search-suggestion__icon { width: 1.5rem; text-align: center; color: #e84a2f; margin-top: 0.1rem; }
.search-suggestion__label { font-size: 0.8125rem; font-weight: 700; line-height: 1.25; }
.search-suggestion__meta { font-size: 0.6875rem; color: #6b7280; margin-top: 0.1rem; }

.dock-hide-btn,
.dock-expand-btn {
    height: 2rem;
    min-width: 2rem;
    padding: 0 0.65rem;
    border-radius: 999px;
    border: 1px solid rgba(20, 20, 20, 0.08);
    background: rgba(20, 20, 20, 0.04);
    color: var(--ink-muted, #6b7280);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    cursor: pointer;
    transition: color 150ms ease, background 150ms ease;
}
.dock-hide-btn__label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
}
.dock-hide-btn:hover,
.dock-expand-btn:hover {
    color: var(--accent-ink, #e84a2f);
    background: var(--accent-soft, rgba(255, 90, 61, 0.14));
}
.dark .dock-hide-btn,
.dark .dock-expand-btn {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
}
@media (max-width: 767px) {
    .dock-hide-btn__label { display: none; }
    .dock-hide-btn { padding: 0; width: 2rem; }
}

.dock-filters-open-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ink-muted, #6b7280);
    padding: 0.55rem 0.75rem;
    border-radius: 999px;
    border: 1px solid rgba(20, 20, 20, 0.08);
    background: rgba(20, 20, 20, 0.03);
    cursor: pointer;
}
.dock-filters-open-btn__lead {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}
.dock-filters-open-btn__chev {
    font-size: 0.7rem;
    opacity: 0.7;
    transition: transform 0.2s ease;
}
.dock-filters-open-btn.is-open .dock-filters-open-btn__chev {
    transform: rotate(180deg);
}
.dock-filters-open-btn:hover { color: var(--accent-ink); }
.dark .dock-filters-open-btn {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
}
.library-filters-count {
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--accent, #ff5a3d);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    line-height: 1.15rem;
    text-align: center;
}
#dock-filters.is-collapsed .dock-filter-tabs,
#dock-filters.is-collapsed #panel-ucs,
#dock-filters.is-collapsed #panel-tags,
#dock-filters.is-collapsed #panel-meta {
    display: none !important;
}
#panel-ucs.is-empty-filters,
#panel-meta.is-empty-filters {
    display: none !important;
}

/* Mobile bottom navigation */
.mobile-bottom-nav {
    display: none;
}
@media (max-width: 767px) {
    .mobile-bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 220;
        display: flex;
        align-items: flex-start;
        justify-content: space-around;
        gap: 0.1rem;
        height: calc(var(--mobile-nav-h) + var(--sab));
        min-height: calc(var(--mobile-nav-h) + var(--sab));
        padding: 0.25rem 0.2rem 0;
        padding-bottom: var(--sab);
        box-sizing: border-box;
        background: var(--panel-solid, #fff);
        border-top: 1px solid var(--glass-rim-outer, rgba(15, 23, 42, 0.08));
        box-shadow: 0 -6px 20px rgba(15, 23, 42, 0.07);
        pointer-events: auto;
    }
    html.dark .mobile-bottom-nav,
    .dark .mobile-bottom-nav {
        background: var(--panel-solid, #0f172a);
        border-top-color: rgba(255, 255, 255, 0.08);
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35);
    }
    .mobile-nav-btn {
        position: relative;
        flex: 1 1 0;
        min-width: 0;
        height: var(--mobile-nav-h);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.15rem;
        padding: 0.2rem 0.15rem;
        border: none;
        border-radius: 0.85rem;
        background: transparent;
        color: #64748b;
        font-size: 0.6rem;
        font-weight: 700;
        letter-spacing: 0.01em;
        line-height: 1.05;
        cursor: pointer;
        transition: color 0.18s ease, background 0.18s ease, transform 0.18s ease;
        -webkit-tap-highlight-color: transparent;
    }
    .mobile-nav-btn i {
        font-size: 1.05rem;
        line-height: 1;
    }
    .mobile-nav-btn span:not(.mobile-nav-badge) {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .mobile-nav-btn.is-active {
        color: var(--accent-ink, #e84a2f);
        background: color-mix(in srgb, var(--accent, #ff5a3d) 14%, transparent);
    }
    .mobile-nav-btn--map {
        position: relative;
    }
    .mobile-nav-btn--map i {
        font-size: 1.2rem;
    }
    .mobile-nav-btn--map.is-active {
        color: #fff;
        background: var(--accent, #ff5a3d);
        box-shadow: 0 4px 14px color-mix(in srgb, var(--accent, #ff5a3d) 45%, transparent);
    }
    .mobile-nav-btn:active {
        transform: scale(0.96);
    }
    .mobile-nav-badge {
        position: absolute;
        top: 0.2rem;
        right: calc(50% - 1.2rem);
        min-width: 0.95rem;
        height: 0.95rem;
        padding: 0 0.22rem;
        border-radius: 999px;
        background: #ef4444;
        color: #fff;
        font-size: 9px;
        font-weight: 800;
        line-height: 0.95rem;
        text-align: center;
    }
    body.dock-view-cabinet.cab-mobile-home #dock-mobile-close,
    body.dock-view-cabinet.cab-mobile-home .dock-header #dock-mobile-close {
        display: none !important;
    }
    body.dock-view-cabinet .cabinet-modal-header {
        padding-top: 0.65rem;
        padding-bottom: 0.65rem;
    }
    body.dock-view-cabinet #cabinet-member-badge {
        margin-top: 0.4rem;
    }
    body.dock-view-cabinet .cabinet-public-profile-btn {
        margin-top: 0.45rem;
    }
    body.dock-view-cabinet #cabinet-mobile-menu {
        margin-top: 0.25rem;
        padding-bottom: 0.75rem;
    }
    body.dock-view-cabinet #dock-cabinet,
    body.dock-view-cabinet #dock-cabinet-host,
    body.dock-view-cabinet #cabinet-modal-content.cabinet-in-dock {
        min-height: 0;
        height: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-nav-btn { transition: none; }
}

/* Dock: always expanded width; hide via .sidebar-hidden */
#sidebar {
    position: absolute;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, width 0.35s var(--ease-out, ease), left 0.35s var(--ease-out, ease);
}
@media (min-width: 768px) {
    #sidebar {
        top: var(--chrome-inset-top);
        bottom: var(--chrome-inset-bottom);
        left: calc(var(--chrome-inset-left) + var(--rail-w) + var(--chrome-gap));
        width: var(--dock-w-expanded);
        max-height: none;
    }
    .sidebar-hidden {
        transform: translateX(calc(-100% - 2rem)) !important;
    }
}
@media (max-width: 767px) {
    /*
     * Mobile fullscreen rule (canonical):
     * primary surfaces (dock, sheet, app-modal) fill the viewport
     * except the bottom rail (--mobile-fs-bottom). No inset half-sheets.
     */
    #sidebar {
        top: 0;
        left: 0;
        right: 0;
        bottom: var(--mobile-fs-bottom);
        width: auto;
        border-radius: 0;
        max-height: none;
        padding-top: var(--sat);
        padding-bottom: 0;
        z-index: 80;
    }
    .sidebar-hidden {
        transform: translateY(calc(100% + 2rem)) !important;
    }

    #events-sheet,
    .app-modal-overlay {
        align-items: stretch !important;
        justify-content: stretch !important;
        padding: 0 !important;
        padding-top: var(--sat) !important;
        top: 0 !important;
        right: 0 !important;
        left: 0 !important;
        bottom: var(--mobile-fs-bottom) !important;
        height: auto !important;
    }
    #events-sheet {
        background: transparent !important;
        z-index: 200 !important;
    }
    #events-sheet .events-sheet-panel,
    .app-modal-overlay > .app-modal-panel,
    #auth-modal > #auth-modal-content,
    #auth-modal > .app-modal-panel {
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        max-height: none !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
    #auth-modal.app-modal-overlay {
        z-index: 210 !important;
    }
    /* Many modals use a content div without app-modal-panel on the same node */
    .app-modal-overlay > [id$="-modal-content"],
    .app-modal-overlay > [id$="-content"]:not(#ui-modal-content) {
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        max-height: none !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
    #ui-modal-overlay.app-modal-overlay {
        align-items: center !important;
        justify-content: center !important;
        padding: 1rem !important;
        padding-top: max(1rem, var(--sat)) !important;
        padding-bottom: max(1rem, 0.75rem) !important;
    }
    #ui-modal-overlay > #ui-modal-content {
        width: 100% !important;
        max-width: 24rem !important;
        height: auto !important;
        max-height: calc(100% - 0.5rem) !important;
        border-radius: 1.5rem !important;
        margin: 0 auto !important;
    }

    /* Notifications: fixed sheet under top chrome (panel is a body-level node) */
    #notif-panel.notif-panel,
    .notif-panel {
        position: fixed !important;
        top: calc(var(--chrome-inset-top) + 3.35rem) !important;
        left: max(0.75rem, var(--sal)) !important;
        right: max(0.75rem, var(--sar)) !important;
        bottom: auto !important;
        width: auto !important;
        max-width: none !important;
        max-height: calc(100dvh - var(--chrome-inset-top) - 3.35rem - var(--mobile-fs-bottom) - 0.75rem) !important;
        z-index: 230 !important;
    }
}

.sidebar-hidden {
    opacity: 0 !important;
    pointer-events: none;
}
#sidebar-backdrop.visible {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Player sits beside dock when visible */
#player-anchor.player-anchor {
    padding-left: 0;
}
@media (min-width: 768px) {
    #player-anchor.player-anchor {
        justify-content: flex-start;
        padding-left: calc(var(--chrome-inset-left) + var(--rail-w) + var(--chrome-gap) + var(--dock-w-expanded) + var(--chrome-gap));
        padding-right: calc(5.5rem + var(--sar));
        padding-bottom: var(--sab);
    }
    body.dock-is-hidden #player-anchor.player-anchor {
        padding-left: calc(var(--chrome-inset-left) + var(--rail-w) + var(--chrome-gap));
    }
}

#settings-modal-content.settings-in-dock,
#cabinet-modal-content.cabinet-in-dock,
#messages-modal-content.messages-in-dock,
#expedition-view-modal-content.expedition-in-dock {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    max-height: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
    transform: none !important;
    background: transparent !important;
}
#settings-modal-content.settings-in-dock .settings-modal-header {
    display: none !important;
}
#cabinet-modal-content.cabinet-in-dock .cabinet-modal-close {
    display: none !important;
}
#settings-modal-content.settings-in-dock > div:first-child button[onclick*="closeSettingsModal"],
#cabinet-modal-content.cabinet-in-dock > div:first-child button[onclick*="closeCabinet"],
#messages-modal-content.messages-in-dock .messages-modal-close {
    display: none;
}
#messages-modal-content.messages-in-dock .messages-modal-header {
    display: none;
}
#expedition-view-modal-content.expedition-in-dock .expedition-view-header {
    display: none;
}

/* ???????? ???????? ?????? */
.skeleton-line {
    height: 14px;
    border-radius: 8px;
    background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.2s ease-in-out infinite;
}
.dark .skeleton-line {
    background: linear-gradient(90deg, #334155 25%, #475569 50%, #334155 75%);
    background-size: 200% 100%;
}
@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Админ / регион: карточки статистики */
#admin-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 640px) {
    #admin-stats-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
.stat-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 10px 8px;
    min-width: 0;
    overflow: hidden;
}
.dark .stat-card {
    background: #1e293b;
    border-color: #334155;
}
.stat-card .stat-value {
    font-size: clamp(0.75rem, 2.8vw, 1.15rem);
    font-weight: 800;
    line-height: 1.2;
    color: #1e293b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.dark .stat-card .stat-value { color: #f1f5f9; }
.stat-card .stat-label {
    font-size: 0.65rem;
    font-weight: 700;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94a3b8;
    white-space: normal;
}
#admin-stats-grid .stat-value {
    font-size: clamp(0.7rem, 2.4vw, 1rem);
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
}

/* Вкладки кабинета: перенос строк вместо скрытого горизонтального скролла */
.cabinet-tabs {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex-wrap: wrap;
    row-gap: 0;
    overflow-x: visible;
}
.cabinet-tabs::-webkit-scrollbar { display: none; height: 0; width: 0; }
#cabinet-modal-content .custom-scrollbar,
#dock-cabinet-host.custom-scrollbar,
#cabinet-modal-content .overflow-y-auto {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
#cabinet-modal-content .custom-scrollbar::-webkit-scrollbar,
#dock-cabinet-host.custom-scrollbar::-webkit-scrollbar,
#cabinet-modal-content .overflow-y-auto::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}
.cab-tab {
    flex: 0 0 auto;
    padding: 0.55rem 0.7rem;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    color: #64748b;
    border-bottom: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
    background: transparent;
}
.dark .cab-tab { color: #94a3b8; }
.cab-tab:hover { color: #1e293b; }
.dark .cab-tab:hover { color: #e2e8f0; }
.cab-tab.active {
    color: var(--accent-ink);
    border-bottom-color: var(--accent);
}
.dark .cab-tab.active { color: var(--accent-ink); border-bottom-color: var(--accent); }
.cab-tab.cab-tab-admin { color: #dc2626; }
.dark .cab-tab.cab-tab-admin { color: #f87171; }
.cab-tab.cab-tab-admin.active {
    color: #dc2626;
    border-bottom-color: #dc2626;
}
.dark .cab-tab.cab-tab-admin.active {
    color: #f87171;
    border-bottom-color: #f87171;
}

/* Field progress: quests & achievements */
.quest-hero {
    padding: 1.1rem 1.15rem;
    border-radius: 1.25rem;
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--accent) 12%, white), #fff 55%),
        #fff;
    border: 1px solid color-mix(in srgb, var(--accent) 22%, #e2e8f0);
}
.dark .quest-hero {
    background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 18%, #0f172a), #1e293b);
    border-color: color-mix(in srgb, var(--accent) 28%, #334155);
}
.quest-hero__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}
.quest-hero__kicker {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 0.2rem;
}
.quest-hero__title {
    font-family: 'Clash Display', 'Satoshi', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: #0f172a;
    text-wrap: balance;
}
.dark .quest-hero__title { color: #f8fafc; }
.quest-hero__xp {
    font-size: 0.75rem;
    font-weight: 700;
    color: #b45309;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 999px;
    padding: 0.35rem 0.7rem;
    white-space: nowrap;
}
.dark .quest-hero__xp {
    color: #fcd34d;
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.35);
}
.quest-xp-bar {
    margin-top: 0.85rem;
    height: 0.55rem;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
}
.dark .quest-xp-bar { background: #334155; }
.quest-xp-bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent), #f59e0b);
    transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.quest-hero__meta {
    margin-top: 0.45rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: #64748b;
}
.dark .quest-hero__meta { color: #94a3b8; }
.quest-hero__blurb {
    margin-top: 0.65rem;
    font-size: 0.8rem;
    line-height: 1.45;
    color: #475569;
}
.dark .quest-hero__blurb { color: #cbd5e1; }

.quest-card {
    display: flex;
    gap: 0.85rem;
    padding: 0.95rem 1rem;
    border-radius: 1.1rem;
    background: #fff;
    border: 1px solid #e2e8f0;
}
.dark .quest-card {
    background: #1e293b;
    border-color: #334155;
}
.quest-card.is-done {
    background: color-mix(in srgb, #22c55e 8%, white);
    border-color: color-mix(in srgb, #22c55e 28%, #e2e8f0);
}
.dark .quest-card.is-done {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.28);
}
.quest-card__icon {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.85rem;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: #fff7ed;
    color: #c2410c;
}
.dark .quest-card__icon {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
}
.quest-card.is-done .quest-card__icon {
    background: #dcfce7;
    color: #15803d;
}
.dark .quest-card.is-done .quest-card__icon {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
}
.quest-card__body { min-width: 0; flex: 1; }
.quest-card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}
.quest-card__head h5 {
    font-size: 0.875rem;
    font-weight: 700;
    color: #0f172a;
}
.dark .quest-card__head h5 { color: #f8fafc; }
.quest-card__xp {
    font-size: 0.7rem;
    font-weight: 800;
    color: #b45309;
    white-space: nowrap;
}
.dark .quest-card__xp { color: #fbbf24; }
.quest-card__body > p {
    margin-top: 0.2rem;
    font-size: 0.75rem;
    line-height: 1.4;
    color: #64748b;
}
.dark .quest-card__body > p { color: #94a3b8; }
.quest-card__bar {
    margin-top: 0.55rem;
    height: 0.35rem;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
}
.dark .quest-card__bar { background: #334155; }
.quest-card__bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--accent);
    transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.quest-card__foot {
    margin-top: 0.4rem;
    display: flex;
    justify-content: space-between;
    font-size: 0.65rem;
    font-weight: 700;
    color: #94a3b8;
}
.quest-card__status { color: #64748b; }
.quest-card.is-done .quest-card__status { color: #16a34a; }
.dark .quest-card.is-done .quest-card__status { color: #4ade80; }

.ach-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: 0.65rem;
}
.ach-tile {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.85rem 0.75rem;
    border-radius: 1rem;
    border: 1px solid #e2e8f0;
    background: #fff;
    min-height: 6.5rem;
}
.dark .ach-tile {
    background: #1e293b;
    border-color: #334155;
}
.ach-tile i {
    font-size: 1.1rem;
    margin-bottom: 0.15rem;
    color: #94a3b8;
}
.ach-tile strong {
    font-size: 0.78rem;
    font-weight: 700;
    color: #334155;
}
.dark .ach-tile strong { color: #cbd5e1; }
.ach-tile span {
    font-size: 0.65rem;
    line-height: 1.35;
    color: #94a3b8;
}
.ach-tile.is-off {
    opacity: 0.48;
    filter: grayscale(0.35);
}
.ach-tile.is-on {
    border-color: color-mix(in srgb, var(--accent) 35%, #e2e8f0);
    background: color-mix(in srgb, var(--accent) 8%, white);
}
.dark .ach-tile.is-on {
    background: color-mix(in srgb, var(--accent) 14%, #1e293b);
    border-color: color-mix(in srgb, var(--accent) 35%, #334155);
}
.ach-tile.is-on i { color: var(--accent); }
.ach-tile.is-on strong { color: #0f172a; }
.dark .ach-tile.is-on strong { color: #f8fafc; }

.pp-ach-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}
.ach-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0.28rem 0.6rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    border: 1px solid transparent;
}
.ach-chip-field { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.dark .ach-chip-field { background: rgba(194, 65, 12, 0.22); color: #fdba74; border-color: rgba(194, 65, 12, 0.4); }
.ach-chip-eco { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.dark .ach-chip-eco { background: rgba(4, 120, 87, 0.22); color: #6ee7b7; border-color: rgba(4, 120, 87, 0.4); }
.ach-chip-walk { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.dark .ach-chip-walk { background: rgba(29, 78, 216, 0.22); color: #93c5fd; border-color: rgba(29, 78, 216, 0.4); }
.ach-chip-exp { background: #f5f3ff; color: #6d28d9; border-color: #ddd6fe; }
.dark .ach-chip-exp { background: rgba(109, 40, 217, 0.22); color: #c4b5fd; border-color: rgba(109, 40, 217, 0.4); }
.ach-chip-gear { background: #f1f5f9; color: #334155; border-color: #cbd5e1; }
.dark .ach-chip-gear { background: rgba(51, 65, 85, 0.4); color: #e2e8f0; border-color: #475569; }
.ach-chip-ear { background: #fdf2f8; color: #be185d; border-color: #fbcfe8; }
.dark .ach-chip-ear { background: rgba(190, 24, 93, 0.22); color: #f9a8d4; border-color: rgba(190, 24, 93, 0.4); }
.ach-chip-spatial { background: #eef2ff; color: #4338ca; border-color: #c7d2fe; }
.dark .ach-chip-spatial { background: rgba(67, 56, 202, 0.22); color: #a5b4fc; border-color: rgba(67, 56, 202, 0.4); }
.ach-chip-level { background: #fef3c7; color: #b45309; border-color: #fde68a; }
.dark .ach-chip-level { background: rgba(180, 83, 9, 0.25); color: #fcd34d; border-color: rgba(180, 83, 9, 0.4); }

@media (prefers-reduced-motion: reduce) {
    .quest-xp-bar > span,
    .quest-card__bar > span { transition: none; }
}

/* FAB: ?? ???????? ? ??? ???????? (?????? ? HTML). ?? ?? ? ?????? ?????? ?????? ????,
   ??? ??????? ??? ???????? ??????/????????????. */
@media (min-width: 768px) {
    #fab-add {
        top: auto !important;
        right: 2rem !important;
        bottom: calc(2rem + env(safe-area-inset-bottom, 0)) !important;
        transition: none;
    }
    .player-visible #fab-add {
        bottom: calc(2rem + env(safe-area-inset-bottom, 0)) !important;
    }
}

/* ???????? ?????? */
#player-card { transition: transform 0.55s var(--ease-out), opacity 0.35s ease; will-change: transform; }
/* ?????? ?????? ?? ???????? ??? ???????? ???????????? */

/* ??????????? Web Audio: ?????? ? ??????? ??????? ??????? ???? ?????????? */
:root {
    --analyzer-screen-bg: #f8fafc;
    --analyzer-screen-border: #e2e8f0;
    --analyzer-fade: rgba(248, 250, 252, 0.42);
    --analyzer-fade-ambi: rgba(255, 255, 255, 0.22);
    --analyzer-grid: rgba(100, 116, 139, 0.4);
    --analyzer-grid-soft: rgba(100, 116, 139, 0.22);
    --analyzer-label: rgba(51, 65, 85, 0.92);
    --analyzer-stroke: #e84a2f;
    --analyzer-stroke-glow: rgba(232, 74, 47, 0.4);
    --analyzer-ambi-stroke: var(--accent-ink);
    --analyzer-ambi-glow: rgba(255, 122, 92, 0.4);
    --analyzer-loudness-cover: #f8fafc;
    --analyzer-loudness-peak: #0f172a;
    --analyzer-axis: rgba(51, 65, 85, 0.9);
    --analyzer-axis-shadow: 0 0 3px rgba(255, 255, 255, 0.95);
}
html.dark,
.dark {
    --analyzer-screen-bg: #0f172a;
    --analyzer-screen-border: #1e293b;
    --analyzer-fade: rgba(15, 23, 42, 0.22);
    --analyzer-fade-ambi: rgba(15, 23, 42, 0.14);
    --analyzer-grid: rgba(148, 163, 184, 0.28);
    --analyzer-grid-soft: rgba(148, 163, 184, 0.16);
    --analyzer-label: rgba(203, 213, 225, 0.85);
    --analyzer-stroke: var(--accent-ink);
    --analyzer-stroke-glow: rgba(255, 122, 92, 0.55);
    --analyzer-ambi-stroke: #ffab91;
    --analyzer-ambi-glow: rgba(255, 171, 145, 0.55);
    --analyzer-loudness-cover: #0f172a;
    --analyzer-loudness-peak: #f8fafc;
    --analyzer-axis: rgba(226, 232, 240, 0.9);
    --analyzer-axis-shadow: 0 0 3px rgba(0, 0, 0, 0.95);
}

.analyzer-panel {
    border-radius: 1rem;
    border-width: 2px;
    padding: 0.75rem 0.85rem;
    background: linear-gradient(to top right, #f1f5f9, #ffffff);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: background 0.3s ease, border-color 0.3s ease;
}
.dark .analyzer-panel {
    background: linear-gradient(to top right, #1e293b, #334155);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35);
}
.analyzer-panel-sky { border-color: #bae6fd; }
.dark .analyzer-panel-sky { border-color: rgba(7, 89, 133, 0.5); }
.analyzer-panel-fuchsia { border-color: #f5d0fe; }
.dark .analyzer-panel-fuchsia { border-color: rgba(134, 25, 143, 0.5); }
.analyzer-panel-emerald { border-color: color-mix(in srgb, var(--accent) 35%, white); }
.dark .analyzer-panel-emerald { border-color: rgba(232, 74, 47, 0.45); }

.goniometer-canvas-wrap,
.spectrum-canvas-wrap {
    width: 100%;
    height: 130px;
    border-radius: 0.65rem;
    overflow: hidden;
    background: var(--analyzer-screen-bg);
    border: 1px solid var(--analyzer-screen-border);
    position: relative;
}
.goniometer-canvas-wrap canvas,
.spectrum-canvas-wrap canvas {
    display: block;
    width: 100%;
    height: 100%;
}
.spectrum-freq-axis {
    position: absolute;
    left: 5px; top: 5px; bottom: 5px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
    z-index: 2;
}
.spectrum-freq-axis span {
    font-size: 8px;
    font-weight: 700;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--analyzer-axis);
    text-shadow: var(--analyzer-axis-shadow);
}
.loudness-meter-v {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 14px;
    padding: 10px 8px 6px;
    border-radius: 0.75rem;
    background: var(--analyzer-screen-bg);
    border: 1px solid var(--analyzer-screen-border);
    min-height: 150px;
}
.loudness-channel-v {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.loudness-bar-track-v {
    position: relative;
    width: 22px;
    height: 120px;
    border-radius: 6px;
    overflow: hidden;
    background: linear-gradient(to top,
        #94a3b8 0%, #64748b 45%,
        #eab308 70%, #f97316 85%,
        #ef4444 95%, #ef4444 100%);
}
.loudness-cover-v {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 100%;
    background: var(--analyzer-loudness-cover);
    transition: height 60ms linear;
}
.loudness-peak-v {
    position: absolute;
    left: 0; right: 0;
    top: 0;
    height: 2px;
    background: var(--analyzer-loudness-peak);
    box-shadow: 0 0 4px color-mix(in srgb, var(--analyzer-loudness-peak) 55%, transparent);
    transition: top 60ms linear;
    z-index: 2;
}
.loudness-ch-label {
    font-size: 9px;
    font-weight: 800;
    color: #64748b;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.dark .loudness-ch-label { color: #94a3b8; }
.loudness-db-label-v {
    font-size: 9px;
    font-weight: 700;
    color: var(--accent);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    min-width: 34px;
    text-align: center;
}
.dark .loudness-db-label-v { color: var(--accent-ink); }
#btn-analyzer-toggle.active {
    background: var(--accent-soft);
    color: #e84a2f;
}
.dark #btn-analyzer-toggle.active {
    background: #3d221c;
    color: var(--accent-ink);
}

/* --- ????????? (React + Motion, ??? ????????, ??. src/widgets/analytics-widget.js) --- */
.analytics-widget { display: flex; flex-direction: column; gap: 0.85rem; }
.analytics-cards-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
.analytics-stat-card {
    position: relative;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    padding: 0.7rem 0.6rem;
    text-align: center;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.analytics-stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08); }
.dark .analytics-stat-card { background: #0f172a; border-color: #1e293b; }
.dark .analytics-stat-card:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35); }
.analytics-stat-icon { font-size: 0.8rem; margin-bottom: 0.25rem; opacity: 0.85; }
.analytics-stat-value { font-size: 1.3rem; font-weight: 800; line-height: 1.1; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #1e293b; }
.dark .analytics-stat-value,
.dark .analytics-stat-value[class*="text-"] { color: #f1f5f9 !important; }
.dark .analytics-legend-value { color: #e2e8f0; }
.analytics-stat-label { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #94a3b8; margin-top: 0.15rem; }

.analytics-charts-row { display: flex; flex-direction: column; gap: 0.6rem; }
.analytics-chart-card {
    flex: 1;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    padding: 0.75rem;
}
.dark .analytics-chart-card { background: #0f172a; border-color: #1e293b; }
.analytics-chart-title { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #94a3b8; margin-bottom: 0.5rem; }
.analytics-empty { font-size: 0.75rem; color: #94a3b8; text-align: center; padding: 1rem 0; }

.analytics-donut-wrap { position: relative; width: 128px; height: 128px; margin: 0 auto; }
.analytics-donut-track { color: #e2e8f0; }
.dark .analytics-donut-track { color: #1e293b; }
.analytics-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.analytics-donut-total { font-size: 1.35rem; font-weight: 800; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #1e293b; }
.dark .analytics-donut-total { color: #f1f5f9; }
.analytics-donut-total-label { font-size: 0.55rem; font-weight: 700; color: #94a3b8; text-transform: uppercase; }

.analytics-legend { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.65rem; }
.analytics-legend-item { display: flex; align-items: center; gap: 0.4rem; font-size: 0.68rem; font-weight: 600; color: #475569; }
.dark .analytics-legend-item { color: #cbd5e1; }
.analytics-legend-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.analytics-legend-value { margin-left: auto; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700; }

.analytics-bars { display: flex; flex-direction: column; gap: 0.55rem; }
.analytics-bar-row { display: flex; flex-direction: column; gap: 0.2rem; }
.analytics-bar-label { font-size: 0.68rem; font-weight: 700; color: #475569; }
.dark .analytics-bar-label { color: #cbd5e1; }
.analytics-bar-track { width: 100%; height: 11px; border-radius: 6px; background: #f1f5f9; overflow: hidden; }
.dark .analytics-bar-track { background: #1e293b; }
.analytics-bar-fill {
    height: 100%;
    border-radius: 6px;
    background: linear-gradient(90deg, #6366f1, #38bdf8);
    display: flex; align-items: center; justify-content: flex-end;
    padding-right: 6px;
    min-width: 6%;
}
.analytics-bar-value { font-size: 0.6rem; font-weight: 800; color: #fff; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.drag-handle { width: 36px; height: 4px; background-color: #e2e8f0; border-radius: 2px; }
.tag-pill { padding: 2px 8px; border-radius: 9999px; font-size: 10px; font-weight: 600; border-width: 1px; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; transition: transform 0.1s, opacity 0.2s; }
.tag-pill:hover { transform: scale(1.05); }
.tag-pill:active { transform: scale(0.95); }
.modal-input {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 14px;
    line-height: 1.4;
    background: #fff;
    outline: none;
    transition: border-color 0.2s;
}

/* Recorder / mic combobox: catalog pick + free text */
.gear-combo__control {
    position: relative;
}
.gear-combo__input {
    padding-right: 2.5rem !important;
}
.gear-combo__toggle {
    position: absolute;
    right: 0.35rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.85rem;
    height: 1.85rem;
    border: 0;
    border-radius: 0.55rem;
    background: transparent;
    color: #94a3b8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 150ms ease, background 150ms ease, transform 150ms ease;
}
.gear-combo__toggle:hover {
    color: #e84a2f;
    background: rgba(255, 90, 61, 0.1);
}
.gear-combo.is-open .gear-combo__toggle {
    color: #e84a2f;
    transform: translateY(-50%) rotate(180deg);
}
.dark .gear-combo__toggle { color: #64748b; }
.dark .gear-combo__toggle:hover,
.dark .gear-combo.is-open .gear-combo__toggle { color: #fb923c; }
.gear-combo__list {
    margin: 0;
    padding: 0.35rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 0.85rem;
    border: 1px solid rgba(20, 20, 20, 0.1);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.16);
    -webkit-overflow-scrolling: touch;
}
html.dark .gear-combo__list,
.dark .gear-combo__list {
    background: rgba(15, 23, 42, 0.98);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
}
.gear-combo__option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    width: 100%;
    text-align: left;
    padding: 0.5rem 0.65rem;
    border: 0;
    border-radius: 0.65rem;
    background: transparent;
    color: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
}
.gear-combo__option:hover,
.gear-combo__option.is-active {
    background: rgba(255, 90, 61, 0.14);
}
.gear-combo__option--custom {
    margin-bottom: 0.2rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 0.65rem 0.65rem 0 0;
    padding-bottom: 0.55rem;
}
.gear-combo__option-kicker {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #e84a2f;
}
.gear-combo__option-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: inherit;
}
.gear-combo__empty {
    padding: 0.65rem 0.7rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: #64748b;
}
@media (prefers-reduced-motion: reduce) {
    .gear-combo__toggle,
    .gear-combo.is-open .gear-combo__toggle {
        transition: none;
    }
}
textarea.modal-input {
    min-height: 88px;
    padding-top: 12px;
    padding-bottom: 12px;
}
.modal-label { display: block; font-size: 12px; font-weight: 600; color: #475569; margin-bottom: 4px; }

.app-modal-panel button,
.app-modal-panel input,
.app-modal-panel select,
.app-modal-panel textarea {
    max-width: 100%;
}

.admin-actions-btn,
.pp-follow-stat,
.profile-link-chip,
.feed-admin-create,
.sidebar-expedition-add,
.sidebar-expedition-reset {
    overflow-wrap: anywhere;
}

/* Тёмная/моно тема для API 2.1 (DOM-pane). НЕ применять к yandex3 — CSS filter убивает WebGL-холст. */
#map:not(.is-yandex3) [class*="-ground-pane"], #map:not(.is-yandex3) [class*="-copyrights-pane"] { transition: filter 0.5s ease; }
.dark #map:not(.map-monochrome):not(.is-yandex3) [class*="-ground-pane"], .dark #map:not(.map-monochrome):not(.is-yandex3) [class*="-copyrights-pane"] { filter: invert(90%) hue-rotate(180deg) brightness(0.8) contrast(1.1); }
#map.map-monochrome:not(.is-yandex3) [class*="-ground-pane"], #map.map-monochrome:not(.is-yandex3) [class*="-copyrights-pane"],
#location-picker-map.map-monochrome [class*="-ground-pane"], #location-picker-map.map-monochrome [class*="-copyrights-pane"] { filter: grayscale(100%) contrast(1.1) brightness(1.05); }
.dark #map.map-monochrome:not(.is-yandex3) [class*="-ground-pane"], .dark #map.map-monochrome:not(.is-yandex3) [class*="-copyrights-pane"],
.dark #location-picker-map.map-monochrome [class*="-ground-pane"], .dark #location-picker-map.map-monochrome [class*="-copyrights-pane"] { filter: grayscale(100%) invert(90%) brightness(0.8) contrast(1.2); }
.dark #location-picker-map:not(.map-monochrome) [class*="-ground-pane"], .dark #location-picker-map:not(.map-monochrome) [class*="-copyrights-pane"] { filter: invert(90%) hue-rotate(180deg) brightness(0.8) contrast(1.1); }

/* Yandex Maps API 3 quiet engine — full-bleed WebGL, no CSS filters */
#map.is-yandex3 {
    width: 100%;
    height: 100%;
    min-height: 100%;
    filter: none !important;
}
#map.is-yandex3 > * {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
}
#map.is-yandex3 canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}
#map.is-yandex3,
#map.is-yandex3 * {
    filter: none !important;
}

/* MapLibre GL (OpenFreeMap) main map */
#map.is-mapbox,
#map.is-mapbox .mapboxgl-map {
    width: 100%;
    height: 100%;
}
#map.is-mapbox .mapboxgl-canvas {
    outline: none;
}
#map.is-mapbox .mapboxgl-ctrl-bottom-right {
    bottom: 5.5rem;
    right: 0.75rem;
}
#map.is-mapbox .mapboxgl-ctrl-attrib {
    font-size: 10px;
    opacity: 0.85;
}

#map.is-dgis,
#map.is-googleearth {
    width: 100%;
    height: 100%;
}
#map.is-googleearth gmp-map-3d,
#map.is-googleearth > * {
    width: 100% !important;
    height: 100% !important;
    display: block;
}
#map.is-map-provider-placeholder {
    position: relative;
}
.map-provider-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.5rem;
    background: linear-gradient(160deg, #eef2f7, #dbe4ee);
    color: #334155;
    z-index: 2;
}
.dark .map-provider-placeholder {
    background: linear-gradient(160deg, #0f172a, #1e293b);
    color: #e2e8f0;
}

.meta-group { display: flex; flex-direction: column; gap: 4px; }
.meta-label { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #94a3b8; display: flex; align-items: center; }
.meta-label i { margin-right: 6px; font-size: 0.75rem; opacity: 0.8; }
.meta-value { font-size: 0.85rem; font-weight: 500; color: #334155; word-wrap: break-word; overflow-wrap: break-word; word-break: break-word; hyphens: auto; }
.dark .meta-value { color: #cbd5e1; }
.meta-value--action {
    color: #2563eb;
    text-decoration: underline;
    text-decoration-color: rgba(37, 99, 235, 0.35);
    text-underline-offset: 2px;
}
.dark .meta-value--action { color: #60a5fa; text-decoration-color: rgba(96, 165, 250, 0.4); }
.meta-value--action:hover { text-decoration-color: currentColor; }
.details-keyword-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    cursor: pointer;
}
.dark .details-keyword-chip {
    background: rgba(37, 99, 235, 0.2);
    color: #93c5fd;
    border-color: rgba(59, 130, 246, 0.35);
}
.details-keyword-chip:hover { filter: brightness(0.97); }

/* ????? ??? ???????? */
.image-preview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.image-thumb { width: 100%; aspect-ratio: 1; border-radius: 8px; object-fit: cover; border: 1px solid #e2e8f0; }
.dark .image-thumb { border-color: #334155; }

/* ?????? ???????? (Soundwalker) */
.walker-marker {
    width: 24px; height: 24px; border-radius: 50%; border: 2px solid white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; color: white; font-size: 12px;
    transition: transform 0.1s linear; 
}
.walker-marker.walker-geo { background-color: #38bdf8; }
.walker-marker.walker-bio { background-color: #4ade80; }
.walker-marker.walker-anthro { background-color: #f97316; }
.dark .walker-marker { border-color: #0f172a; }

/* Ambisonic Sphere Pad */
#ambi-sphere-pad {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    touch-action: none; 
}

/* --- ????????? ??????? ?????????? + ????????? ?????? ?????????? --- */

/* ?????? ?????????: ???? ? ?? ?? ?????? ???????????? ? ? ????????? ???????? (???? ?????),
   ? ? ?????? ???????, ? ? ????? ????????? (????? ???????? ??? ????????????? ???? ???????). */
.pub-status-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}
.pub-status-published { background: #dcfce7; color: #15803d; }
.dark .pub-status-published { background: rgba(21, 128, 61, 0.25); color: #4ade80; }
.pub-status-pending { background: #fef3c7; color: #b45309; }
.dark .pub-status-pending { background: rgba(180, 83, 9, 0.25); color: #fbbf24; }
.pub-status-rejected { background: #fee2e2; color: #b91c1c; }
.dark .pub-status-rejected { background: rgba(185, 28, 28, 0.25); color: #f87171; }
.pub-status-draft { background: #e2e8f0; color: #475569; }
.dark .pub-status-draft { background: rgba(71, 85, 105, 0.35); color: #cbd5e1; }

/* ???? ???-????? (???????????? ??????????) */
.gear-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 600;
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}
.dark .gear-chip { background: #1e293b; color: #cbd5e1; border-color: #334155; }
.gear-chip i { opacity: 0.7; font-size: 10px; }

/* ???? ??????? ??????? ? ?????? ??? ?? ????? ????????? ?????? */
.badge-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 9999px;
    font-size: 10px;
    font-weight: 700;
    border-width: 1px;
    white-space: nowrap;
}
.badge-chip-verified { background: var(--accent-soft); color: #e84a2f; border-color: color-mix(in srgb, var(--accent) 35%, white); }
.dark .badge-chip-verified { background: rgba(232, 74, 47, 0.25); color: var(--accent-ink); border-color: rgba(232, 74, 47, 0.4); }
.badge-chip-geo { background: #e0f2fe; color: #0369a1; border-color: #bae6fd; }
.dark .badge-chip-geo { background: rgba(3, 105, 161, 0.25); color: #38bdf8; border-color: rgba(3, 105, 161, 0.4); }
.badge-chip-bio { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }
.dark .badge-chip-bio { background: rgba(21, 128, 61, 0.25); color: #4ade80; border-color: rgba(21, 128, 61, 0.4); }
.badge-chip-anthro { background: #ffedd5; color: #c2410c; border-color: #fed7aa; }
.dark .badge-chip-anthro { background: rgba(194, 65, 12, 0.25); color: #fb923c; border-color: rgba(194, 65, 12, 0.4); }

/* ?????? ?? ??????? ???????????????? ??????? ? ????????? ??????? */
.profile-link-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 600;
    background: #fff;
    color: var(--accent);
    border: 1px solid #e2e8f0;
    transition: background-color 0.15s ease, transform 0.15s ease;
}
.profile-link-chip:hover { background: var(--accent-soft); transform: translateY(-1px); }
.dark .profile-link-chip { background: #1e293b; color: var(--accent-ink); border-color: #334155; }
.dark .profile-link-chip:hover { background: #0f172a; }

/* ???????-??????? ????????? (??? / ??? / ??? / ?????) */
.pp-filter-btn {
    flex-shrink: 0;
    padding: 6px 14px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 700;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #64748b;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.dark .pp-filter-btn { background: #1e293b; color: #94a3b8; border-color: #334155; }
.pp-filter-btn:hover { background: #f1f5f9; }
.dark .pp-filter-btn:hover { background: #0f172a; }
.pp-filter-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.dark .pp-filter-btn.active { background: var(--accent); border-color: var(--accent); }

/* ????? ???????? ????????? */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.65rem;
}
.portfolio-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    padding: 0.75rem 0.85rem;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.portfolio-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08); }
.dark .portfolio-card { background: #1e293b; border-color: #334155; }
.dark .portfolio-card:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35); }
.portfolio-card-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 0.4rem; flex-wrap: wrap; }
.portfolio-card-eco { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 2px 7px; border-radius: 9999px; }
.portfolio-card-eco.eco-geophony { background: #e0f2fe; color: #0369a1; }
.dark .portfolio-card-eco.eco-geophony { background: rgba(3, 105, 161, 0.25); color: #38bdf8; }
.portfolio-card-eco.eco-biophony { background: #dcfce7; color: #15803d; }
.dark .portfolio-card-eco.eco-biophony { background: rgba(21, 128, 61, 0.25); color: #4ade80; }
.portfolio-card-eco.eco-anthrophony { background: #ffedd5; color: #c2410c; }
.dark .portfolio-card-eco.eco-anthrophony { background: rgba(194, 65, 12, 0.25); color: #fb923c; }
.portfolio-card-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.3;
    margin-bottom: 0.3rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.dark .portfolio-card-title { color: #f1f5f9; }
.portfolio-card-meta { font-size: 0.65rem; font-weight: 600; color: #94a3b8; }
.portfolio-card-body { display: flex; align-items: center; gap: 0.55rem; }
.portfolio-card-thumb {
    width: 34px;
    height: 34px;
    border-radius: 9999px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid #e2e8f0;
    background: #f1f5f9;
}
.dark .portfolio-card-thumb { border-color: #334155; background: #0f172a; }
.portfolio-card-thumb--empty { border-radius: 9999px; }

/* ?????? ???????????? ????? ? ??????????? ymaps.Map ?????? ??????? */
.profile-mini-map-wrap {
    width: 100%;
    height: 220px;
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}
.dark .profile-mini-map-wrap { border-color: #334155; }
.profile-mini-map-wrap #profile-mini-map { width: 100%; height: 100%; }

.admin-entity-row {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.75rem 0.85rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
}
.dark .admin-entity-row { background: #1e293b; border-color: #334155; }
.admin-entity-row.is-muted { opacity: 0.72; }
.admin-entity-main { min-width: 0; }
.admin-entity-num {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 0.15rem;
}
.dark .admin-entity-num { color: #94a3b8; }
.admin-entity-title {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
    word-break: break-word;
}
.dark .admin-entity-title { color: #f8fafc; }
.admin-entity-meta {
    margin-top: 0.15rem;
    font-size: 11px;
    color: #64748b;
    word-break: break-word;
}
.dark .admin-entity-meta { color: #94a3b8; }
.admin-actions-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.7rem;
    border-radius: 0.7rem;
    font-size: 11px;
    font-weight: 700;
    background: #f1f5f9;
    color: #334155;
    white-space: nowrap;
}
.dark .admin-actions-btn { background: #0f172a; color: #e2e8f0; }
.action-sheet-item--success { color: #059669 !important; }
.dark .action-sheet-item--success { color: #34d399 !important; }
.action-sheet-item--success:hover { background: #ecfdf5 !important; }
.dark .action-sheet-item--success:hover { background: rgba(6, 95, 70, 0.25) !important; }
.action-sheet-item--warning { color: #d97706 !important; }
.dark .action-sheet-item--warning { color: #fbbf24 !important; }
.action-sheet-item--warning:hover { background: #fffbeb !important; }
.dark .action-sheet-item--warning:hover { background: rgba(120, 53, 15, 0.25) !important; }
.action-sheet-item--primary { color: var(--accent) !important; }
.dark .action-sheet-item--primary { color: var(--accent-ink) !important; }
.action-sheet-item--primary:hover { background: var(--accent-soft) !important; }
.dark .action-sheet-item--primary:hover { background: rgba(30, 58, 138, 0.3) !important; }
.action-sheet-item--danger { color: #dc2626 !important; }
.dark .action-sheet-item--danger { color: #f87171 !important; }
.action-sheet-item--danger:hover { background: #fef2f2 !important; }
.dark .action-sheet-item--danger:hover { background: rgba(127, 29, 29, 0.3) !important; }

.swipe-reply-hint {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
    z-index: 1;
}
.swipe-reply-row {
    position: relative;
    transition: transform 0.15s ease;
    touch-action: pan-y;
}
.swipe-reply-row.is-swiping .swipe-reply-hint { opacity: 1; }
.msg-bubble.swipe-reply-row { transition: transform 0.15s ease; }

.pp-follow-stats {
    display: flex;
    gap: 0.75rem;
    margin-top: 0;
    flex-wrap: wrap;
}
.pp-follow-stat {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
}
.pp-follow-stat strong { color: #0f172a; }
.dark .pp-follow-stat strong { color: #f8fafc; }

.analytics-line-chart {
    width: 100%;
    height: 140px;
    overflow: visible;
}
.analytics-line-chart path.line {
    fill: none;
    stroke: var(--accent);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.analytics-line-chart path.area {
    fill: rgba(37, 99, 235, 0.12);
    stroke: none;
}
.dark .analytics-line-chart path.area { fill: rgba(96, 165, 250, 0.15); }
.dark .analytics-line-chart path.line { stroke: var(--accent-ink); }
.picker-route-points {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    max-height: 5.5rem;
    overflow-y: auto;
}
.picker-route-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    background: rgba(15, 23, 42, 0.7);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}
.picker-route-chip button {
    color: #fca5a5;
}

/* ?????? ????????????? ? ?????-?????? (?????????? ??????? ???????) */
.admin-user-row {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    padding: 0.65rem 0.85rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.dark .admin-user-row { background: #1e293b; border-color: #334155; }
.admin-user-row-name { font-size: 0.8rem; font-weight: 700; color: #1e293b; }
.dark .admin-user-row-name { color: #f1f5f9; }
.admin-user-row-badges { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.badge-toggle-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: 9999px;
    font-size: 10px;
    font-weight: 700;
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.15s ease;
}
.dark .badge-toggle-chip { background: #0f172a; color: #94a3b8; border-color: #334155; }
.badge-toggle-chip:hover { background: #e2e8f0; }
.dark .badge-toggle-chip:hover { background: #1e293b; }
.badge-toggle-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.dark .badge-toggle-chip.active { background: #3b82f6; border-color: #3b82f6; }

/* --- ??????????/??????: ??????????? ?????? ????? ???????? ??????????? (???????) --- */
.session-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 1.25rem;
    padding: 0.9rem 1rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.dark .session-card { background: #1e293b; border-color: #334155; }
.session-sound-list {
    margin-top: 0.6rem;
    padding-top: 0.5rem;
    border-top: 1px dashed #e2e8f0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    max-height: 180px;
    overflow-y: auto;
}
.dark .session-sound-list { border-color: #334155; }
.session-sound-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.3rem;
    border-radius: 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: background 0.15s ease;
}
.session-sound-row:hover { background: #f1f5f9; }
.dark .session-sound-row { color: #cbd5e1; }
.dark .session-sound-row:hover { background: #0f172a; }

/* --- ??????? ?????????: ????????????? "??? ?????? / ?? ?????????" ? ?????-?????? --- */
.admin-filter-btn {
    flex: 1;
    padding: 0.55rem 0.75rem;
    border-radius: 0.75rem;
    font-size: 0.72rem;
    font-weight: 700;
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid transparent;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}
.dark .admin-filter-btn { background: #0f172a; color: #94a3b8; }
.admin-filter-btn.active { background: #fee2e2; color: #b91c1c; border-color: #fca5a5; }
.dark .admin-filter-btn.active { background: rgba(185, 28, 28, 0.25); color: #f87171; border-color: rgba(248, 113, 113, 0.4); }
.admin-filter-count {
    background: rgba(0, 0, 0, 0.12);
    border-radius: 9999px;
    padding: 0 6px;
    font-size: 0.65rem;
    font-weight: 800;
}
.admin-filter-count:empty,
.admin-filter-count[hidden] { display: none !important; }
.admin-filter-btn.active .admin-filter-count { background: rgba(185, 28, 28, 0.18); }

/* --- ??????????/???????/?????? ? ???????? ??????? ????? --- */
.details-stat-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 10px; border-radius: 9999px;
    font-size: 11px; font-weight: 700;
    background: #f1f5f9; color: #64748b;
}
.dark .details-stat-chip { background: #1e293b; color: #94a3b8; }
.details-reaction-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 10px; border-radius: 9999px;
    font-size: 11px; font-weight: 700;
    background: #f1f5f9; color: #64748b;
    border: 1px solid transparent;
    transition: all 0.15s ease;
}
.dark .details-reaction-btn { background: #1e293b; color: #94a3b8; }
.details-reaction-btn:hover { background: #e2e8f0; }
.dark .details-reaction-btn:hover { background: #334155; }
.details-reaction-btn.active { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, white); }
.dark .details-reaction-btn.active { background: rgba(255, 90, 61, 0.25); color: var(--accent-ink); border-color: rgba(255, 122, 92, 0.35); }
.details-report-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px; border-radius: 9999px;
    font-size: 11px; font-weight: 700;
    background: #fef2f2; color: #dc2626;
    border: 1px solid transparent;
    transition: all 0.15s ease;
}
.dark .details-report-btn { background: rgba(220, 38, 38, 0.15); color: #f87171; }
.details-report-btn:hover { background: #fee2e2; }
.dark .details-report-btn:hover { background: rgba(220, 38, 38, 0.28); }

/* --- ???????????: ???? ?? ?????? -> ???????, ???? "...", ???????, ?????? --- */
.comment-author-link {
    font-weight: 700; color: var(--accent); cursor: pointer;
}
.dark .comment-author-link { color: var(--accent-ink); }
.comment-author-link:hover { text-decoration: underline; }
.comment-menu-btn {
    width: 22px; height: 22px; border-radius: 9999px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #94a3b8; font-size: 11px;
    transition: background-color 0.15s ease;
}
.comment-menu-btn:hover { background: #e2e8f0; color: #475569; }
.dark .comment-menu-btn:hover { background: #334155; color: #cbd5e1; }
.comment-reaction-btn {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 700; color: #94a3b8;
    padding: 2px 4px; border-radius: 8px;
    transition: color 0.15s ease;
}
.comment-reaction-btn:hover { color: #ef4444; }
.comment-reaction-btn.active { color: #ef4444; }
.comment-replies {
    margin-top: 0.5rem; margin-left: 0.9rem;
    padding-left: 0.75rem;
    border-left: 2px solid #e2e8f0;
    display: flex; flex-direction: column; gap: 0.5rem;
}
.dark .comment-replies { border-color: #334155; }

.comment-author-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}
.comment-avatar {
    width: 22px;
    height: 22px;
    border-radius: 9999px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid #e2e8f0;
    background: #e2e8f0;
}
.dark .comment-avatar { border-color: #334155; background: #0f172a; }
.comment-avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: #94a3b8;
}

/* --- ??????????? --- */
.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.65rem 0.75rem;
    border-radius: 0.85rem;
    transition: background-color 0.15s ease;
}
.notif-item:hover { background: #f1f5f9; }
.dark .notif-item:hover { background: #1e293b; }
.notif-item.unread { background: var(--accent-soft); }
.dark .notif-item.unread { background: rgba(37, 99, 235, 0.15); }
.notif-item-icon {
    width: 1.1rem;
    text-align: center;
    margin-top: 2px;
    color: #64748b;
    flex-shrink: 0;
}

/* --- ?????? ???????? ???????????? --- */
.activity-row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.55rem 0.7rem;
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
    background: #fff;
    margin-bottom: 0.4rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.dark .activity-row { background: #1e293b; border-color: #334155; }
.activity-row:hover { background: #f8fafc; }
.dark .activity-row:hover { background: #0f172a; }

.admin-user-row.blocked { opacity: 0.72; border-color: #fecaca; }
.dark .admin-user-row.blocked { border-color: rgba(220, 38, 38, 0.35); }

.pp-expedition-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.85rem;
    padding: 0.6rem 0.75rem;
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.dark .pp-expedition-card { background: #1e293b; border-color: #334155; }
.pp-expedition-card:hover { border-color: var(--accent); transform: translateY(-1px); }

/* —— Feed (dock) —— */
#sidebar-feed.feed-pane {
    padding: 0 !important;
    gap: 0 !important;
}
.feed-shell {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 100%;
}
.feed-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem 0.45rem;
    background: var(--panel-solid, #f4f2ef);
}
.feed-toolbar {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--panel-solid, #f4f2ef);
}
.feed-head__title {
    margin: 0;
    font-family: var(--font-brand, inherit);
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--ink, #141414);
    line-height: 1.15;
}
.feed-head__sub {
    margin: 0.2rem 0 0;
    font-size: 0.75rem;
    color: var(--ink-muted, #6b7280);
    line-height: 1.35;
}
.feed-head__create {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 999px;
    border: none;
    background: var(--cta, #141414);
    color: var(--cta-ink, #fff);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 150ms var(--ease-out, ease), background 150ms ease;
}
.feed-head__create:hover { background: var(--accent, #ff5a3d); transform: scale(1.04); }
.feed-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.15rem 1rem 0.95rem;
    overflow: visible;
}
.feed-filter {
    flex: 0 0 auto;
    border: 1px solid var(--glass-rim-outer, rgba(20,20,20,0.08));
    background: color-mix(in srgb, var(--panel-solid, #fff) 70%, #fff);
    color: var(--ink-muted, #6b7280);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.2;
    padding: 0.45rem 0.8rem;
    border-radius: var(--radius-pill, 999px);
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
html.dark .feed-filter,
.dark .feed-filter {
    background: color-mix(in srgb, var(--panel-solid, #161c22) 85%, #0b1014);
}
.feed-filter.is-active {
    background: var(--accent-soft, rgba(255,90,61,0.14));
    color: var(--accent-ink, #e84a2f);
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
.feed-filter:hover:not(.is-active) {
    color: var(--ink);
    border-color: color-mix(in srgb, var(--ink) 18%, transparent);
}
.feed-stream {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.15rem 0.85rem 1.25rem;
}
.feed-post {
    border: 1px solid var(--glass-rim-outer, rgba(20,20,20,0.08));
    border-radius: var(--radius-md, 1.15rem);
    background: color-mix(in srgb, var(--panel-solid, #fff) 55%, #fff);
    overflow: hidden;
    transition: border-color 160ms var(--ease-out, ease), box-shadow 160ms var(--ease-out, ease);
}
html.dark .feed-post,
.dark .feed-post {
    background: color-mix(in srgb, var(--panel-solid, #161c22) 80%, #0b1014);
}
.feed-post:hover {
    border-color: color-mix(in srgb, var(--ink) 14%, var(--glass-rim-outer));
    box-shadow: 0 8px 24px rgba(20, 20, 20, 0.06);
}
.feed-post.is-pinned {
    border-color: var(--glass-rim-outer, rgba(20,20,20,0.08));
    box-shadow: inset 3px 0 0 var(--accent, #ff5a3d);
}
.feed-post__cover {
    display: block;
    width: 100%;
    border: none;
    padding: 0;
    margin: 0;
    background: #e8e4df;
    cursor: pointer;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}
html.dark .feed-post__cover,
.dark .feed-post__cover { background: #0b1014; }
.feed-post__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 320ms var(--ease-out, ease);
}
.feed-post__cover:hover img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
    .feed-post__cover img,
    .feed-head__create { transition: none; }
    .feed-post__cover:hover img { transform: none; }
}
.feed-post__body { padding: 0.75rem 0.85rem 0.7rem; }
.feed-post__media {
    margin: 0.55rem 0 0.4rem;
    border-radius: 0.85rem;
    overflow: hidden;
    background: color-mix(in srgb, var(--ink) 6%, transparent);
    aspect-ratio: 4 / 3;
}
.feed-post__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.feed-post__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
}
.feed-post__meta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    min-width: 0;
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--ink-muted, #6b7280);
}
.feed-post__dot { opacity: 0.5; }
.feed-post__time { font-weight: 600; }
.feed-pin {
    color: var(--accent-ink, #e84a2f);
    font-size: 0.65rem;
}
.feed-type {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.625rem;
}
.feed-type--article { color: var(--accent-ink, #e84a2f); }
.feed-type--notice { color: var(--ink-muted, #6b7280); }
.feed-post__by { margin-bottom: 0.55rem; }
.feed-author-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}
.feed-avatar {
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--glass-rim-outer);
}
.feed-avatar--fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft);
    color: var(--accent-ink);
    font-size: 0.625rem;
    font-weight: 800;
}
.feed-author-link {
    border: none;
    background: transparent;
    padding: 0;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ink);
    cursor: pointer;
    text-align: left;
}
.feed-author-link:hover { color: var(--accent-ink); }
.feed-author-link.is-static { cursor: default; }
.feed-post__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--ink);
    text-wrap: pretty;
}
.feed-post__title-btn {
    display: block;
    width: 100%;
    border: none;
    background: transparent;
    padding: 0;
    text-align: left;
    cursor: pointer;
    color: inherit;
}
.feed-post__teaser {
    margin: 0.4rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--ink-muted);
    text-wrap: pretty;
}
.feed-post__text {
    margin: 0.45rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: color-mix(in srgb, var(--ink) 82%, var(--ink-muted));
    white-space: pre-wrap;
}
.feed-post__read {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.55rem;
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--accent-ink);
}
.feed-empty {
    text-align: center;
    padding: 2.25rem 1rem;
    color: var(--ink-muted);
}
.feed-empty i {
    font-size: 1.5rem;
    margin-bottom: 0.55rem;
    opacity: 0.65;
    display: block;
}
.feed-empty p { margin: 0; font-size: 0.875rem; font-weight: 700; color: var(--ink); }
.feed-empty__hint {
    margin-top: 0.35rem !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    color: var(--ink-muted) !important;
}
.feed-admin-create {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 0.85rem;
    padding: 0.55rem 0.95rem;
    border-radius: var(--radius-pill);
    border: none;
    background: var(--accent);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
}
.feed-admin-create:hover { background: var(--accent-hover, #e84a2f); }
.feed-section-label {
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-muted);
    padding: 0 1rem 0.45rem;
}
.feed-recent {
    padding: 0.35rem 0 1.1rem;
    border-top: 1px solid var(--glass-rim-outer);
}
.feed-recent__rail {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding: 0 0.85rem;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
}
.feed-recent__item {
    flex: 0 0 9.5rem;
    scroll-snap-align: start;
    text-align: left;
    border: 1px solid var(--glass-rim-outer);
    border-radius: 0.9rem;
    background: transparent;
    padding: 0.65rem 0.7rem;
    cursor: pointer;
    transition: border-color 150ms ease, background 150ms ease;
}
.feed-recent__item:hover {
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
    background: var(--accent-soft);
}
.feed-recent__eco {
    display: block;
    font-size: 0.5625rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--accent-ink);
    margin-bottom: 0.25rem;
}
.feed-recent__title {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.feed-recent__meta {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.625rem;
    color: var(--ink-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.exp-participant-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    background: var(--accent-soft);
    color: #e84a2f;
    font-size: 11px;
    font-weight: 700;
    border: 1px solid color-mix(in srgb, var(--accent) 35%, white);
    transition: background 0.15s ease;
}
.exp-participant-chip:hover { background: var(--accent-soft); }
.dark .exp-participant-chip {
    background: #1e3a8a44;
    color: #93c5fd;
    border-color: #1e40af88;
}
.exp-participant-chip--guest {
    background: #f1f5f9;
    color: #64748b;
    border-color: #e2e8f0;
    cursor: default;
}
.dark .exp-participant-chip--guest {
    background: #1e293b;
    color: #94a3b8;
    border-color: #334155;
}
.feed-editor-toolbar {
    display: flex;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
}
.feed-editor-toolbar button {
    width: 2rem;
    height: 2rem;
    border-radius: 0.6rem;
    background: #f1f5f9;
    color: #475569;
    font-size: 12px;
}
.dark .feed-editor-toolbar button { background: #1e293b; color: #cbd5e1; }
.feed-editor-toolbar button:hover { background: #e2e8f0; }
.dark .feed-editor-toolbar button:hover { background: #334155; }
.feed-editor {
    min-height: 160px;
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 0.75rem 0.9rem;
    background: #f8fafc;
    color: #334155;
    font-size: 14px;
    line-height: 1.5;
}
.dark .feed-editor {
    border-color: #334155;
    background: #0f172a;
    color: #e2e8f0;
}
.feed-editor:empty:before {
    content: attr(data-placeholder);
    color: #94a3b8;
}
.feed-inline-img,
.feed-article-body img {
    display: block;
    max-width: 100%;
    border-radius: 0.75rem;
    margin: 0.75rem 0;
}
.feed-article-body {
    font-size: 14px;
    line-height: 1.6;
    color: #334155;
}
.dark .feed-article-body { color: #cbd5e1; }
.feed-article-body p { margin-bottom: 0.65rem; }
.feed-article-body ul { list-style: disc; padding-left: 1.2rem; margin-bottom: 0.65rem; }

.feed-notice-img {
    display: block;
    max-width: 100%;
    max-height: 180px;
    width: auto;
    height: auto;
    margin: 0.5rem auto 0.35rem;
    border-radius: 0.75rem;
    object-fit: contain;
    background: #f1f5f9;
}
.dark .feed-notice-img { background: #0f172a; }
/* In-feed media uses .feed-post__media; keep .feed-notice-img for editor preview only */
.feed-notice-preview-img {
    display: block;
    max-width: 100%;
    max-height: 180px;
    margin: 0 auto;
}
.image-crop-stage {
    position: relative;
    width: 100%;
    height: 280px;
    overflow: hidden;
    border-radius: 1rem;
    background: #0f172a;
    touch-action: none;
    user-select: none;
}
.image-crop-stage img {
    position: absolute;
    left: 50%;
    top: 50%;
    max-width: none;
    height: 100%;
    width: auto;
    transform-origin: center center;
    cursor: grab;
}
.image-crop-frame {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(78%, 240px);
    height: min(78%, 240px);
    transform: translate(-50%, -50%);
    border: 2px solid #fff;
    box-shadow: 0 0 0 9999px rgba(0,0,0,0.45);
    border-radius: 0.5rem;
    pointer-events: none;
}
.msg-support-row {
    border: 1px solid color-mix(in srgb, var(--accent) 35%, white);
    border-radius: 0.9rem;
    background: var(--accent-soft);
}
.dark .msg-support-row {
    border-color: #1e3a8a;
    background: #1e3a8a33;
}

/* legacy feed-card title helpers removed — use .feed-post__title */

/* Feed social + comments (parity with marker comments) */
.feed-social {
    margin-top: 0.7rem;
    padding-top: 0.55rem;
    border-top: 1px solid var(--glass-rim-outer, rgba(20,20,20,0.06));
}
.feed-social__stats {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    flex-wrap: wrap;
}
.feed-social__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border: none;
    background: transparent;
    color: var(--ink-muted, #6b7280);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.35rem 0.5rem;
    border-radius: 0.65rem;
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
}
.feed-social__btn:hover {
    background: var(--accent-soft);
    color: var(--ink);
}
.feed-social__btn.is-active { color: #e11d48; }
.feed-social__btn.is-open { color: var(--accent-ink); background: var(--accent-soft); }
.feed-social__btn--muted { cursor: default; opacity: 0.85; }
.feed-social__btn--muted:hover { background: transparent; color: var(--ink-muted); }
.feed-comments { margin-top: 0.55rem; }
.feed-comments__list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-bottom: 0.55rem;
    max-height: 16rem;
    overflow-y: auto;
}
.feed-comment {
    padding: 0.65rem 0.7rem;
    border-radius: 0.9rem;
    border: 1px solid var(--glass-rim-outer);
    background: color-mix(in srgb, var(--panel-solid) 70%, transparent);
}
.feed-comment__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}
.feed-comment__tools {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}
.feed-comment__date {
    font-size: 0.625rem;
    color: var(--ink-muted);
}
.feed-comment__text {
    margin: 0 0 0.35rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: color-mix(in srgb, var(--ink) 88%, var(--ink-muted));
    white-space: pre-wrap;
}
.feed-comments__compose {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}
.feed-comments__compose .modal-input {
    flex: 1;
    min-width: 0;
}
.feed-comments__send {
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 999px;
    border: none;
    background: var(--accent);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}
.feed-comments__send:hover { background: var(--accent-hover); }

/* Events panel */
:root { --events-w: 19rem; }
.events-panel {
    position: absolute;
    top: var(--chrome-inset-top);
    right: var(--chrome-inset-right);
    bottom: var(--chrome-inset-bottom);
    width: var(--events-w);
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-xl, 1.6rem);
    background: var(--panel-solid, #fff);
    border: 1px solid var(--glass-rim-outer, rgba(20,20,20,0.1));
    box-shadow: var(--glass-elev, 0 12px 40px rgba(20,20,20,0.12));
    overflow: hidden;
    color: var(--ink, #0f172a);
}
.events-panel.hidden { display: none !important; }
.dark .events-panel { background: var(--panel-solid, #0f172a); }
.events-panel__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.9rem 1rem 0.65rem;
    border-bottom: 1px solid rgba(20,20,20,0.06);
    flex-shrink: 0;
}
.dark .events-panel__head { border-color: rgba(255,255,255,0.08); }
.events-panel__title {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0;
}
.events-panel__sub {
    font-size: 11px;
    color: #64748b;
    margin: 0.1rem 0 0;
}
.events-panel__close {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    border: none;
    background: rgba(20,20,20,0.05);
    color: #64748b;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.dark .events-panel__close { background: rgba(255,255,255,0.08); }
.events-panel__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0.75rem;
}
.events-badge {
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: #f59e0b;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.events-tabs {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 0.65rem;
    background: rgba(20,20,20,0.04);
    padding: 0.2rem;
    border-radius: 999px;
}
.dark .events-tabs { background: rgba(255,255,255,0.06); }
.events-tab {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #64748b;
    padding: 0.4rem 0.25rem;
    border-radius: 999px;
    cursor: pointer;
}
.events-tab.is-active {
    background: #fff;
    color: #0f172a;
    box-shadow: 0 1px 4px rgba(15,23,42,0.08);
}
.dark .events-tab.is-active { background: #1e293b; color: #f8fafc; }
.events-create-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-bottom: 0.65rem;
    padding: 0.6rem;
    border-radius: 0.85rem;
    border: 1px solid color-mix(in srgb, var(--accent, #ff5a3d) 45%, #f59e0b);
    background: color-mix(in srgb, var(--accent, #ff5a3d) 12%, #fff);
    color: var(--accent-ink, #e84a2f);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}
.dark .events-create-btn {
    background: color-mix(in srgb, var(--accent, #ff5a3d) 18%, #0f172a);
    color: #fdba74;
    border-color: #b45309;
}
.events-list { display: flex; flex-direction: column; gap: 0.55rem; }
.event-card {
    position: relative;
    text-align: left;
    width: 100%;
    border: 1px solid #e2e8f0;
    background: #fff;
    border-radius: 1rem;
    padding: 0.75rem 0.85rem;
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.dark .event-card { background: #0f172a; border-color: #334155; }
.event-card:hover { border-color: #f59e0b; transform: translateY(-1px); }
.event-card__pin {
    position: absolute;
    top: 0.5rem;
    right: 0.55rem;
    color: #d97706;
    font-size: 10px;
}
.event-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    margin-bottom: 0.35rem;
}
.event-card__type {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
}
.event-pill {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    background: #e2e8f0;
    color: #475569;
}
.event-pill--live { background: #dcfce7; color: #15803d; }
.event-pill--scheduled { background: #dbeafe; color: #1d4ed8; }
.event-pill--ended, .event-pill--archived { background: #f1f5f9; color: #64748b; }
.event-pill--judging { background: #fef3c7; color: #b45309; }
.event-pill--draft { background: #f1f5f9; color: #94a3b8; }
.event-card__title {
    font-size: 13px;
    font-weight: 800;
    line-height: 1.3;
    margin: 0;
    color: #0f172a;
}
.dark .event-card__title { color: #f8fafc; }
.event-card__theme {
    font-size: 11px;
    color: #64748b;
    margin: 0.15rem 0 0;
}
.event-card__meta {
    font-size: 10px;
    color: #94a3b8;
    margin: 0.35rem 0 0;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.events-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: #94a3b8;
}
.events-empty i { font-size: 1.5rem; margin-bottom: 0.5rem; opacity: 0.7; }
.events-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    margin-bottom: 0.65rem;
    padding: 0;
}
.event-detail__cover {
    border-radius: 0.85rem;
    overflow: hidden;
    margin-bottom: 0.75rem;
    max-height: 8rem;
}
.event-detail__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.event-detail__title {
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0;
}
.event-detail__desc {
    font-size: 12px;
    line-height: 1.45;
    color: #475569;
    margin: 0.65rem 0 0;
    white-space: pre-wrap;
}
.dark .event-detail__desc { color: #cbd5e1; }
.event-detail__block { margin-top: 0.85rem; }
.event-detail__block h5 {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #94a3b8;
    margin: 0 0 0.35rem;
}
.event-detail__list {
    margin: 0;
    padding-left: 1rem;
    font-size: 11px;
    color: #475569;
    line-height: 1.45;
}
.dark .event-detail__list { color: #cbd5e1; }
.event-rsvp { margin-top: 0.85rem; }
.event-rsvp__row { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.event-rsvp-btn {
    flex: 1;
    min-width: 4.5rem;
    border: none;
    border-radius: 0.75rem;
    padding: 0.5rem 0.65rem;
    font-size: 11px;
    font-weight: 800;
    background: #f59e0b;
    color: #fff;
    cursor: pointer;
}
.event-rsvp-btn--ghost {
    background: #f1f5f9;
    color: #475569;
}
.dark .event-rsvp-btn--ghost { background: #1e293b; color: #cbd5e1; }
.event-rsvp-btn.is-active { box-shadow: 0 0 0 2px #0f172a33; }
.event-admin-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.85rem;
    padding-top: 0.65rem;
    border-top: 1px solid #f1f5f9;
}
.dark .event-admin-bar { border-color: #1e293b; }
.event-admin-bar button {
    border: 1px solid #e2e8f0;
    background: #fff;
    border-radius: 0.55rem;
    padding: 0.35rem 0.5rem;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    color: #475569;
}
.dark .event-admin-bar button { background: #0f172a; border-color: #334155; color: #cbd5e1; }
.event-editor-prize {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding-bottom: 0.5rem;
    margin-bottom: 0.35rem;
    border-bottom: 1px solid #f1f5f9;
}
.dark .event-editor-prize { border-color: #1e293b; }
.event-editor-row {
    display: grid;
    grid-template-columns: 4.5rem 1fr 1fr auto;
    gap: 0.35rem;
    align-items: center;
}
.event-editor-row--rewards {
    grid-template-columns: 5.5rem 1fr;
}
.event-editor-row button {
    border: none;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    padding: 0.35rem;
}
.event-prize-reward {
    color: #d97706;
    font-weight: 600;
    font-size: 0.7rem;
}
.dark .event-prize-reward { color: #fbbf24; }
.event-part-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid #f1f5f9;
}
.dark .event-part-row { border-color: #1e293b; }

@media (min-width: 768px) {
    body.events-panel-open #map-top-right-controls {
        right: calc(var(--chrome-inset) + var(--events-w) + 0.75rem);
    }
    body.events-panel-open #player-anchor.player-anchor {
        padding-right: calc(var(--chrome-inset) + var(--events-w) + 0.75rem);
    }
}
@media (max-width: 767px) {
    .events-panel { display: none !important; }
}

.msg-bubble {
    max-width: min(85%, 17.5rem);
    width: fit-content;
    padding: 0.55rem 0.75rem;
    border-radius: 1rem;
    background: #f1f5f9;
    color: #1e293b;
    align-self: flex-start;
    position: relative;
    cursor: pointer;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    box-sizing: border-box;
}
.dark .msg-bubble { background: #1e293b; color: #e2e8f0; }
.msg-bubble > p:not(.msg-bubble-foot) {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    word-break: normal;
    max-width: 100%;
}
#messages-thread-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.messages-compose-input,
#messages-compose-input.messages-compose-input {
    resize: none;
    min-height: 2.5rem;
    max-height: 7.5rem;
    overflow-y: auto;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    word-break: normal;
    line-height: 1.35;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
}
.msg-bubble.mine {
    background: var(--accent);
    color: #fff;
    align-self: flex-end;
    margin-left: auto;
}
.msg-bubble.deleted { opacity: 0.65; font-style: italic; }
.msg-bubble-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 4px;
    font-size: 9px;
    opacity: 0.7;
}
.msg-ticks {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    line-height: 1;
    opacity: 0.85;
}
.msg-ticks.is-delivered { color: rgba(255, 255, 255, 0.85); }
.msg-ticks.is-read { color: #93c5fd; }
.msg-ticks--list { font-size: 10px; opacity: 1; }
.msg-ticks--list.is-delivered { color: #94a3b8; }
.msg-ticks--list.is-read { color: var(--accent); }
.dark .msg-ticks--list.is-read { color: var(--accent-ink); }
.msg-bubble-reply {
    font-size: 10px;
    opacity: 0.75;
    border-left: 2px solid currentColor;
    padding-left: 6px;
    margin-bottom: 4px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.msg-bubble-img {
    display: block;
    max-width: 220px;
    max-height: 180px;
    border-radius: 10px;
    margin-bottom: 4px;
    object-fit: cover;
    cursor: zoom-in;
}
.msg-reactions {
    display: flex; flex-wrap: wrap; gap: 3px;
    margin-top: 4px;
}
.msg-reaction-chip {
    font-size: 11px;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.08);
}
.msg-bubble.mine .msg-reaction-chip { background: rgba(255,255,255,0.2); }
.dark .msg-reaction-chip { background: rgba(255,255,255,0.1); }
.msg-online-dot {
    position: absolute; bottom: 0; right: 0;
    width: 10px; height: 10px; border-radius: 999px;
    background: #94a3b8;
    border: 2px solid #fff;
}
.dark .msg-online-dot { border-color: #1e293b; }
.msg-online-dot.on { background: #22c55e; }
#messages-emoji-picker button {
    width: 2rem; height: 2rem; border-radius: 0.5rem;
    font-size: 1.15rem; line-height: 1;
    transition: background 0.15s;
}
#messages-emoji-picker button:hover { background: #f1f5f9; }
.dark #messages-emoji-picker button:hover { background: #334155; }
.sidebar-sound-thumb {
    width: 3.25rem; height: 3.25rem; border-radius: 0.8rem;
    object-fit: cover; flex-shrink: 0;
    border: 1px solid var(--panel-border);
    background: #e2e8f0;
}
.dark .sidebar-sound-thumb { border-color: #334155; }
.sidebar-sound-thumb--empty,
.portfolio-card-thumb--empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    color: #94a3b8;
    font-size: 0.75rem;
}
.dark .sidebar-sound-thumb--empty,
.dark .portfolio-card-thumb--empty {
    background: #0f172a;
    color: #64748b;
}
.sidebar-expedition-thumb {
    width: 2.5rem; height: 2.5rem; border-radius: 0.75rem;
    object-fit: cover; flex-shrink: 0;
    border: 1px solid #e2e8f0;
    background: #e2e8f0;
}
.dark .sidebar-expedition-thumb { border-color: #334155; background: #0f172a; }
.sidebar-expedition-thumb-fallback {
    display: flex; align-items: center; justify-content: center;
    color: #94a3b8; font-size: 0.85rem;
}
#onboarding-highlight, #onboarding-card {
    transition: left 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                top 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                width 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                height 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.35s ease,
                transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
/* --- ??????? "??????????" ? ????? ?????? ?????? --- */
.sidebar-expedition-reset {
    display: flex; align-items: center; gap: 6px;
    width: 100%;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 11px; font-weight: 700;
    background: #f1f5f9; color: #64748b;
    transition: all 0.15s ease;
    margin-bottom: 2px;
}
.dark .sidebar-expedition-reset { background: #1e293b; color: #94a3b8; }
.sidebar-expedition-reset.active { background: #e2e8f0; color: #334155; }
.dark .sidebar-expedition-reset.active { background: #334155; color: #e2e8f0; }
.sidebar-expedition-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 0.6rem 0.75rem;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.dark .sidebar-expedition-card { background: #1e293b; border-color: #334155; }
.sidebar-expedition-card:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08); }
.sidebar-expedition-card.active { border-color: var(--accent); background: var(--accent-soft); }
.dark .sidebar-expedition-card.active { border-color: #3b82f6; background: rgba(37, 99, 235, 0.15); }
.sidebar-expedition-count {
    font-size: 10px; font-weight: 700;
    padding: 1px 7px; border-radius: 9999px;
    background: #f1f5f9; color: #64748b;
    flex-shrink: 0;
}
.dark .sidebar-expedition-count { background: #0f172a; color: #94a3b8; }
.sidebar-expedition-add {
    display: flex; align-items: center; justify-content: center;
    width: 100%;
    padding: 8px 12px;
    border-radius: 12px;
    border: 1.5px dashed #cbd5e1;
    font-size: 11px; font-weight: 700;
    color: #64748b;
    transition: all 0.15s ease;
    margin-top: 2px;
}
.dark .sidebar-expedition-add { border-color: #334155; color: #94a3b8; }
.sidebar-expedition-add:hover { border-color: var(--accent); color: var(--accent); }

/* --- ?????? ? ?????-?????? --- */
.admin-report-row {
    background: #fff;
    border: 1px solid #fee2e2;
    border-radius: 1rem;
    padding: 0.7rem 0.85rem;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.6rem;
}
.dark .admin-report-row { background: #1e293b; border-color: rgba(220, 38, 38, 0.3); }
.admin-report-row.resolved { border-color: #e2e8f0; opacity: 0.6; }
.dark .admin-report-row.resolved { border-color: #334155; }

/* Typing indicator */
.msg-typing-dots {
    display: inline-block;
    width: 1.4rem;
    height: 0.55rem;
    margin-right: 0.25rem;
    background: radial-gradient(circle closest-side, currentColor 90%, transparent) 0% 50%,
        radial-gradient(circle closest-side, currentColor 90%, transparent) 50% 50%,
        radial-gradient(circle closest-side, currentColor 90%, transparent) 100% 50%;
    background-size: 0.28rem 0.28rem;
    background-repeat: no-repeat;
    animation: msg-typing-pulse 1s ease-in-out infinite;
    opacity: 0.7;
    vertical-align: middle;
}
@keyframes msg-typing-pulse {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .msg-typing-dots { animation: none; opacity: 0.7; }
}

.cabinet-member-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    color: #1c1917;
    background: linear-gradient(135deg, #f6e27a 0%, #e8b923 55%, #d4a017 100%);
    box-shadow: 0 2px 8px rgba(212, 160, 23, 0.35);
}
.cabinet-member-badge i {
    font-size: 0.7rem;
}

.cabinet-mobile-menu {
    padding: 0.15rem;
    border-radius: 1.15rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}
.dark .cabinet-mobile-menu {
    background: #1e293b;
    border-color: #334155;
}
.cabinet-mobile-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 0.9rem;
    border: none;
    background: transparent;
    text-align: left;
    border-radius: 0.85rem;
    color: #0f172a;
    cursor: pointer;
}
.dark .cabinet-mobile-row { color: #f1f5f9; }
.cabinet-mobile-row:hover { background: #f8fafc; }
.dark .cabinet-mobile-row:hover { background: #0f172a; }
.cabinet-mobile-row__icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: #f1f5f9;
    color: #475569;
    flex-shrink: 0;
}
.dark .cabinet-mobile-row__icon {
    background: #0f172a;
    color: #94a3b8;
}
.cabinet-mobile-row__label {
    flex: 1;
    font-size: 0.9rem;
    font-weight: 700;
}
.cabinet-mobile-row__chev {
    color: #cbd5e1;
    font-size: 0.75rem;
}
.cabinet-mobile-row--danger { color: #dc2626; }
.cabinet-mobile-row--danger .cabinet-mobile-row__icon {
    background: #fef2f2;
    color: #dc2626;
}

@media (max-width: 767px) {
    body.dock-view-cabinet .dock-header #dock-subtitle { display: none; }
    body.dock-view-cabinet #cabinet-modal-content.cabinet-in-dock .cabinet-modal-header {
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
        gap: 0.75rem;
    }
    body.dock-view-cabinet #cabinet-avatar,
    body.dock-view-cabinet #cabinet-avatar-fallback {
        width: 3.25rem;
        height: 3.25rem;
        font-size: 1.15rem;
    }
    body.dock-view-cabinet #cabinet-user-name {
        font-size: 1.05rem;
        text-align: left;
    }
    body.dock-view-cabinet #cabinet-user-role { display: none; }
    body.dock-view-cabinet #cabinet-tabs {
        display: none;
    }
    body.dock-view-cabinet #cabinet-logout-footer {
        display: none !important;
    }
    body.dock-view-cabinet .dock-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
    }
    body.dock-view-cabinet .dock-header > .flex {
        width: 100%;
        flex: 1 1 auto;
        min-width: 0;
        align-items: center;
    }
    body.dock-view-cabinet .dock-header .dock-back-btn { display: none; }
    body.dock-view-cabinet:not(.cab-mobile-home) .dock-header .dock-back-btn {
        display: inline-flex !important;
    }
    body.dock-view-cabinet.cab-mobile-home #dock-mobile-logout { display: inline-flex !important; }
    body.dock-view-cabinet:not(.cab-mobile-home) #dock-mobile-logout { display: none !important; }
    body.dock-view-cabinet.cab-mobile-home #dock-mobile-close,
    body.dock-view-cabinet.cab-mobile-home .dock-header #dock-mobile-close {
        display: none !important;
    }
    body.dock-view-cabinet .dock-header-actions {
        margin-left: auto;
        justify-content: flex-end;
        align-items: center;
        flex-shrink: 0;
        gap: 0.25rem;
    }
    body.dock-view-cabinet.cab-mobile-home #dock-mobile-logout {
        order: 1;
    }
    body.dock-view-cabinet:not(.cab-mobile-home) #dock-mobile-close {
        display: none !important;
    }
    .dock-mobile-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .dock-mobile-tabs::-webkit-scrollbar { display: none; }
    #tab-help {
        display: none !important;
    }
    body.dock-view-messages.messages-kb-open #messages-compose-bar,
    body.messages-kb-open #messages-compose-bar {
        padding-bottom: max(0.75rem, calc(var(--kb-inset, 0px) + env(safe-area-inset-bottom, 0px)));
    }
    body.dock-view-cabinet #cab-panel-sounds .grid.grid-cols-2 {
        display: none;
    }
    body.dock-view-cabinet #cab-panel-sounds h4[data-lang="your_recordings"],
    body.dock-view-cabinet #cabinet-sounds-list {
        display: none;
    }
    body.dock-view-cabinet:not(.cab-mobile-home) #cabinet-mobile-menu {
        display: none;
    }
    body.dock-view-cabinet.cab-mobile-sounds #cabinet-mobile-menu {
        display: none;
    }
    body.dock-view-cabinet.cab-mobile-sounds #cab-panel-sounds .grid.grid-cols-2 {
        display: grid;
    }
    body.dock-view-cabinet.cab-mobile-sounds #cab-panel-sounds h4[data-lang="your_recordings"],
    body.dock-view-cabinet.cab-mobile-sounds #cabinet-sounds-list {
        display: block;
    }
}

@media (min-width: 768px) {
    .cabinet-mobile-menu { display: none !important; }
}

/* Publish / community rules modal + reject suggestion chips */
.publish-rule-section__title {
    font-size: 0.95rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.01em;
}
.dark .publish-rule-section__title { color: #f8fafc; }
.publish-rule-section__intro {
    margin-top: 0.35rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #64748b;
}
.dark .publish-rule-section__intro { color: #94a3b8; }
.publish-rule-section__items {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.publish-rule-item {
    padding: 0.75rem 0.85rem;
    border-radius: 0.9rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}
.dark .publish-rule-item {
    background: rgba(15, 23, 42, 0.55);
    border-color: #334155;
}
.publish-rule-item__title {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.35;
}
.dark .publish-rule-item__title { color: #e2e8f0; }
.publish-rule-item__code {
    display: inline-block;
    margin-right: 0.25rem;
    padding: 0.05rem 0.4rem;
    border-radius: 0.35rem;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    vertical-align: 0.05em;
    color: #2563eb;
    background: #eff6ff;
}
.dark .publish-rule-item__code {
    color: #93c5fd;
    background: rgba(37, 99, 235, 0.2);
}
.publish-rule-item__body {
    margin-top: 0.35rem;
    font-size: 0.78rem;
    line-height: 1.5;
    color: #475569;
}
.dark .publish-rule-item__body { color: #94a3b8; }

.ui-suggest-chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: #334155;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.dark .ui-suggest-chip {
    border-color: #475569;
    background: #0f172a;
    color: #cbd5e1;
}
.ui-suggest-chip:hover {
    border-color: #93c5fd;
    background: #eff6ff;
    color: #1d4ed8;
}
.dark .ui-suggest-chip:hover {
    border-color: #3b82f6;
    background: rgba(37, 99, 235, 0.25);
    color: #bfdbfe;
}
.ui-suggest-chip.is-active {
    border-color: #2563eb;
    background: #dbeafe;
    color: #1e40af;
}
.dark .ui-suggest-chip.is-active {
    border-color: #60a5fa;
    background: rgba(37, 99, 235, 0.35);
    color: #eff6ff;
}