/* ZugDB public redesign v2026.07.19
 * Shared by the public pages. The admin area deliberately keeps its legacy UI.
 */
:root {
    --zugdb-public-bg: #0b0e14;
    --zugdb-public-panel: #20242f;
    --zugdb-public-panel-dark: #10141c;
    --zugdb-public-border: #3a4150;
    --zugdb-public-text: #f7f8fb;
    --zugdb-public-muted: #939aaa;
    --zugdb-public-soft: #d8dce5;
    --zugdb-public-green: #12943b;
    --zugdb-public-green-light: #21b857;
    --zugdb-public-blue: #4f82e8;
    --zugdb-public-danger: #b4233b;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--zugdb-header-offset, 205px) + 18px);
}

body.zugdb-public-page {
    min-width: 0;
    overflow-x: hidden;
    font-family: "Exo 2", Arial, Helvetica, sans-serif;
    color: var(--zugdb-public-text);
    background:
        radial-gradient(circle at 2% 34%, rgba(20, 135, 157, 0.20), transparent 26%),
        radial-gradient(circle at 98% 48%, rgba(31, 65, 165, 0.24), transparent 30%),
        var(--zugdb-public-bg);
}

body.zugdb-public-page .app,
body.zugdb-public-page .app.sidebar-collapsed,
html.sidebar-collapsed-initial body.zugdb-public-page .app {
    display: block;
    width: 100%;
    min-height: 0;
    padding: 16px 24px 48px;
}

body.zugdb-public-page .main {
    width: 100%;
    max-width: 1680px;
    min-width: 0;
    margin: 0 auto;
    padding: 0;
}

body.zugdb-public-page .header,
body.zugdb-public-page .page-header,
body.zugdb-public-page .card,
body.zugdb-public-page .empty-card,
body.zugdb-public-page .detail-card,
body.zugdb-public-page .map-shell,
body.zugdb-public-page .profile-hero {
    border: 1px solid var(--zugdb-public-border);
    background: linear-gradient(145deg, rgba(35, 40, 52, 0.98), rgba(25, 29, 39, 0.98));
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.24);
}

body.zugdb-public-page .header,
body.zugdb-public-page .page-header {
    position: relative;
    overflow: hidden;
    margin: 0 0 18px;
    padding: 27px 30px;
    border-radius: 20px;
    isolation: isolate;
}

body.zugdb-public-page .header::before,
body.zugdb-public-page .page-header::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background:
        linear-gradient(110deg, rgba(18, 148, 59, 0.13), transparent 35%),
        radial-gradient(circle at 88% 16%, rgba(37, 99, 235, 0.22), transparent 30%);
    pointer-events: none;
}

body.zugdb-public-page .header h1,
body.zugdb-public-page .page-header h1,
body.zugdb-public-page .map-heading h1,
body.zugdb-public-page .card h2 {
    color: var(--zugdb-public-text);
    font-family: inherit;
    font-style: italic;
    font-weight: 800;
    letter-spacing: -0.035em;
}

body.zugdb-public-page .header h1,
body.zugdb-public-page .page-header h1 {
    margin: 0 0 8px;
    font-size: clamp(30px, 4vw, 44px);
    line-height: 1.05;
}

body.zugdb-public-page .header p,
body.zugdb-public-page .page-header p,
body.zugdb-public-page .header-subline,
body.zugdb-public-page .section-head-sub {
    color: var(--zugdb-public-soft);
}

body.zugdb-public-page .card,
body.zugdb-public-page .empty-card,
body.zugdb-public-page .detail-card {
    margin-bottom: 18px;
    padding: 22px;
    border-radius: 18px;
}

body.zugdb-public-page .sighting-card,
body.zugdb-public-page .preview-box,
body.zugdb-public-page .modal-panel,
body.zugdb-public-page .sighting-modal-panel,
body.zugdb-public-page .crop-modal-panel {
    border-color: #3b4454;
    background: linear-gradient(145deg, #171c27, #0e121a);
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.24);
}

body.zugdb-public-page .sighting-card:hover {
    border-color: #5b7fca;
    box-shadow: 0 18px 38px rgba(12, 26, 55, 0.34);
}

body.zugdb-public-page .filter-card,
body.zugdb-public-page .request-layout,
body.zugdb-public-page .settings-layout {
    min-width: 0;
}

body.zugdb-public-page input,
body.zugdb-public-page select,
body.zugdb-public-page textarea {
    border-color: #414a5b;
    border-radius: 10px;
    background: #0d1119;
    color: var(--zugdb-public-text);
    font-family: inherit;
}

body.zugdb-public-page input:hover,
body.zugdb-public-page select:hover,
body.zugdb-public-page textarea:hover {
    border-color: #566276;
}

body.zugdb-public-page input:focus,
body.zugdb-public-page select:focus,
body.zugdb-public-page textarea:focus {
    border-color: var(--zugdb-public-blue);
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.20);
}

body.zugdb-public-page label {
    color: var(--zugdb-public-soft);
    font-weight: 800;
}

body.zugdb-public-page .button,
body.zugdb-public-page button,
body.zugdb-public-page .toolbar-button {
    font-family: inherit;
    font-weight: 800;
}

body.zugdb-public-page .button-save,
body.zugdb-public-page .button-primary {
    border-color: var(--zugdb-public-green-light);
    background: linear-gradient(180deg, #16a34a, #0d8938);
    box-shadow: 0 10px 24px rgba(18, 148, 59, 0.20);
    color: #fff;
}

body.zugdb-public-page .button-save:hover,
body.zugdb-public-page .button-primary:hover {
    background: linear-gradient(180deg, #1bb653, #109641);
}

body.zugdb-public-page .button-secondary,
body.zugdb-public-page .toolbar-button {
    border-color: #414a5b;
    background: #303747;
    color: var(--zugdb-public-text);
}

body.zugdb-public-page .button-secondary:hover,
body.zugdb-public-page .toolbar-button:hover {
    border-color: #61708a;
    background: #3b4456;
}

body.zugdb-public-page .message {
    margin-bottom: 16px;
    padding: 14px 16px;
    border-radius: 13px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}

body.zugdb-public-page .message.success,
body.zugdb-public-page .success.message {
    border-color: #1faa51;
    background: rgba(14, 91, 43, 0.94);
}

body.zugdb-public-page .message.error,
body.zugdb-public-page .error.message {
    border-color: #be3144;
    background: rgba(112, 25, 39, 0.94);
}

body.zugdb-public-page .zugdb-page-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin-top: 16px;
}

body.zugdb-public-page .zugdb-page-tools .button {
    min-height: 40px;
    padding: 9px 14px;
    text-decoration: none;
}

.zugdb-draft-status,
.zugdb-dirty-status,
.zugdb-counter {
    color: var(--zugdb-public-muted);
    font-size: 12px;
    font-weight: 700;
}

.zugdb-dirty-status.is-dirty,
.zugdb-draft-status.is-saved {
    color: #73d695;
}

.zugdb-back-to-top {
    position: fixed;
    z-index: 1450;
    right: 20px;
    bottom: 20px;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 1px solid #5d6a80;
    border-radius: 14px;
    background: rgba(31, 36, 48, 0.95);
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.34);
    color: #fff;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
}

.zugdb-back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.zugdb-feedback-backdrop {
    position: fixed;
    z-index: 2800;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(3, 7, 14, 0.56);
    backdrop-filter: blur(7px);
    opacity: 0;
    transition: opacity .22s ease;
}

.zugdb-feedback-backdrop.is-visible { opacity: 1; }

.zugdb-feedback-panel {
    width: min(430px, 100%);
    padding: 25px 23px 22px;
    border: 1px solid #465164;
    border-radius: 20px;
    background: linear-gradient(160deg, #242a37, #11151e);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.46);
    text-align: center;
    transform: translateY(14px) scale(.97);
    transition: transform .26s cubic-bezier(.22, 1, .36, 1);
}

.zugdb-feedback-backdrop.is-visible .zugdb-feedback-panel {
    transform: translateY(0) scale(1);
}

.zugdb-feedback-icon {
    width: 66px;
    height: 66px;
    display: grid;
    place-items: center;
    margin: 0 auto 15px;
    border: 2px solid #35c76b;
    border-radius: 50%;
    background: rgba(18, 148, 59, .18);
    color: #72e39a;
    font-size: 36px;
    font-weight: 900;
    animation: zugdb-feedback-pop .48s cubic-bezier(.22, 1, .36, 1) both;
}

.zugdb-feedback-backdrop.is-error .zugdb-feedback-icon {
    border-color: #e25066;
    background: rgba(180, 35, 59, .18);
    color: #ff8b9c;
}

.zugdb-feedback-title {
    margin: 0 0 7px;
    font-size: 25px;
    font-style: italic;
    font-weight: 800;
}

.zugdb-feedback-text {
    color: var(--zugdb-public-soft);
    line-height: 1.5;
}

.zugdb-feedback-close {
    min-width: 150px;
    margin-top: 18px;
    padding: 10px 15px;
    border: 1px solid #536078;
    border-radius: 10px;
    background: #303747;
    color: #fff;
    cursor: pointer;
}

@keyframes zugdb-feedback-pop {
    from { opacity: 0; transform: scale(.58) rotate(-8deg); }
    to { opacity: 1; transform: scale(1) rotate(0); }
}

body.zugdb-public-page .profile-hero,
body.zugdb-public-page .map-shell {
    overflow: hidden;
    border-radius: 20px;
}

body.zugdb-public-page .map-toolbar,
body.zugdb-public-page .location-panel,
body.zugdb-public-page .preview-card {
    background-color: rgba(15, 19, 28, 0.92);
}

body.is-embedded.zugdb-public-page {
    padding-top: 0 !important;
    background: var(--zugdb-public-panel-dark);
}

body.is-embedded.zugdb-public-page .app,
body.is-embedded.zugdb-public-page .app.sidebar-collapsed {
    min-height: auto;
    padding: 0;
}

body.is-embedded.zugdb-public-page .main {
    max-width: none;
}

body.is-embedded.zugdb-public-page .header {
    display: none;
}

body.is-embedded.zugdb-public-page .card {
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

@media (max-width: 900px) {
    body.zugdb-public-page .app,
    body.zugdb-public-page .app.sidebar-collapsed,
    html.sidebar-collapsed-initial body.zugdb-public-page .app {
        padding: 12px 10px 34px;
    }

    body.zugdb-public-page .header,
    body.zugdb-public-page .page-header {
        margin-bottom: 12px;
        padding: 20px 17px;
        border-radius: 15px;
    }

    body.zugdb-public-page .header h1,
    body.zugdb-public-page .page-header h1 {
        font-size: 29px;
    }

    body.zugdb-public-page .card,
    body.zugdb-public-page .empty-card,
    body.zugdb-public-page .detail-card {
        margin-bottom: 12px;
        padding: 16px;
        border-radius: 15px;
    }

    body.zugdb-public-page .zugdb-page-tools,
    body.zugdb-public-page .header-actions,
    body.zugdb-public-page .button-row {
        width: 100%;
    }

    body.zugdb-public-page .zugdb-page-tools .button,
    body.zugdb-public-page .header-actions .button,
    body.zugdb-public-page .button-row .button {
        flex: 1 1 150px;
    }

    .zugdb-back-to-top {
        right: 12px;
        bottom: max(12px, env(safe-area-inset-bottom));
    }

    body.is-embedded.zugdb-public-page .app,
    body.is-embedded.zugdb-public-page .app.sidebar-collapsed {
        padding: 0;
    }
}

@media (max-width: 520px) {
    body.zugdb-public-page .app,
    body.zugdb-public-page .app.sidebar-collapsed,
    html.sidebar-collapsed-initial body.zugdb-public-page .app {
        padding-inline: 8px;
    }

    body.zugdb-public-page .header,
    body.zugdb-public-page .page-header,
    body.zugdb-public-page .card,
    body.zugdb-public-page .empty-card {
        padding-inline: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .zugdb-back-to-top,
    .zugdb-feedback-backdrop,
    .zugdb-feedback-panel,
    .zugdb-feedback-icon { transition: none; animation: none; }
}