:root {
    color: #17213a;
    background: #f7faff;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-synthesis: none;
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
    margin: 0;
}

body {
    background: #f7faff;
}

a {
    color: #257daf;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 3px solid #163f65;
    outline-offset: 3px;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1,
h2,
h3 {
    color: #111b34;
    letter-spacing: -.04em;
}

h1 {
    border: 0;
    outline: 0;
    box-shadow: none;
    background: transparent;
}

button,
input,
textarea {
    font: inherit;
}

.button {
    display: inline-flex;
    min-height: 2.9rem;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .65rem 1.25rem;
    border: 1px solid transparent;
    border-radius: .85rem;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
}

.button:hover {
    transform: translateY(-1px);
}

.button:disabled {
    cursor: wait;
    opacity: .65;
    transform: none;
}

.button-primary {
    color: white !important;
    background: #25749f;
    border-color: #25749f;
}

.button-primary:hover {
    background: #1c6189;
    border-color: #1c6189;
}

.button-secondary {
    color: #17213a;
    background: white;
    border-color: #d5e1ed;
}

.button-secondary:hover {
    border-color: #8dbfe0;
    background: #f5fbff;
}

.button-small {
    min-height: 2.5rem;
    padding: .45rem 1rem;
}

.hero {
    max-width: 61rem;
    margin: 0 auto;
    padding: 8rem 1.5rem 3.25rem;
    text-align: center;
}

.eyebrow {
    margin-bottom: .85rem;
    color: #579dcc;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .13em;
}

.hero h1 {
    max-width: 48rem;
    margin: 0 auto 1.25rem;
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    line-height: 1.02;
}

.hero-copy {
    max-width: 48rem;
    margin: 0 auto;
    color: #5c718f;
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    line-height: 1.6;
}

.hero-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 2rem;
}

.promise {
    max-width: 52rem;
    margin: 0 auto 4rem;
    padding: 1.45rem;
    border: 1px solid #aee9de;
    border-radius: 1.25rem;
    background: linear-gradient(110deg, #edfff8, #effaff);
    text-align: center;
}

.promise h2 {
    margin-bottom: .35rem;
    color: #007b68;
    font-size: 1.35rem;
}

.promise p {
    margin: 0;
    color: #426d77;
    font-weight: 700;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    max-width: 70rem;
    margin: 0 auto 6rem;
    padding: 0 1.5rem;
}

.feature-grid article,
.account-card,
.collection-form,
.collection-list {
    border: 1px solid #dbe5ef;
    border-radius: 1.25rem;
    background: white;
    box-shadow: 0 12px 32px rgba(40, 85, 130, .06);
}

.feature-grid article {
    padding: 2rem;
}

.feature-grid article > span {
    display: grid;
    width: 2.65rem;
    height: 2.65rem;
    place-items: center;
    margin-bottom: 1rem;
    border-radius: .8rem;
    color: #398ec4;
    background: #e6f5ff;
    font-size: 1.4rem;
}

.feature-grid h2 {
    margin-bottom: .65rem;
    font-size: 1.3rem;
}

.feature-grid p {
    margin-bottom: 0;
    color: #60718d;
    line-height: 1.55;
}

.account-page {
    display: grid;
    min-height: calc(100vh - 10.5rem);
    place-items: center;
    padding: 4rem 1.5rem;
}

.account-card {
    width: min(100%, 31rem);
    padding: 2.5rem;
}

.account-card h1 {
    margin-bottom: .75rem;
    font-size: 2rem;
}

.account-intro {
    margin-bottom: 1.8rem;
    color: #60718d;
    line-height: 1.55;
}

.social-sign-in {
    width: 100%;
    gap: .7rem;
}

.social-sign-in > span {
    display: inline-grid;
    width: 1.4rem;
    height: 1.4rem;
    place-items: center;
    border-radius: 50%;
    color: white;
    background: #4285f4;
    font-size: .82rem;
    font-weight: 900;
}

.account-divider {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1.25rem 0 -.1rem;
    color: #71829a;
    font-size: .82rem;
    text-align: center;
}

.account-divider::before,
.account-divider::after {
    height: 1px;
    flex: 1;
    background: #dbe5ef;
    content: "";
}

label {
    display: block;
    margin: 1.1rem 0 .4rem;
    color: #293855;
    font-size: .9rem;
    font-weight: 800;
}

label span,
.field-hint {
    color: #6d7e98;
    font-weight: 500;
}

.field-hint {
    margin: .45rem 0 0;
    font-size: .8rem;
    line-height: 1.4;
}

.form-control {
    width: 100%;
    min-height: 2.85rem;
    padding: .7rem .8rem;
    border: 1px solid #c8d8e7;
    border-radius: .7rem;
    color: #17213a;
    background: white;
}

textarea.form-control {
    min-height: 6rem;
    resize: vertical;
}

.form-submit {
    width: 100%;
    margin-top: 1.6rem;
}

.validation-message,
.validation-summary-errors,
.form-error {
    color: #a7263d;
}

.validation-summary-errors ul {
    margin: .75rem 0;
    padding-left: 1.2rem;
}

.form-error {
    margin: 1rem 0;
    padding: .8rem 1rem;
    border: 1px solid #f0bbc4;
    border-radius: .7rem;
    background: #fff5f6;
    font-weight: 700;
}

.form-success {
    margin: 1rem 0;
    padding: .8rem 1rem;
    border: 1px solid #a9dfc8;
    border-radius: .7rem;
    color: #087553;
    background: #effcf5;
    font-weight: 700;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-top: 1rem;
    font-weight: 700;
}

.checkbox-label input {
    width: 1rem;
    height: 1rem;
}

.recovery-codes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .45rem;
    margin: 1rem 0;
    padding: 1rem;
    list-style: none;
    border: 1px dashed #9fc6e5;
    border-radius: .7rem;
    color: #17213a;
    background: #f8fbfe;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 700;
}

.account-switch {
    margin: 1.35rem 0 0;
    color: #60718d;
    text-align: center;
}

.collection-page,
.auth-required {
    max-width: 72rem;
    margin: 0 auto;
    padding: 4.5rem 1.5rem 5rem;
}

.dashboard-page {
    min-height: calc(100vh - 10.5rem);
    padding: 4.5rem 1.5rem 6rem;
    text-align: center;
}

.dashboard-title {
    margin-bottom: .7rem;
    color: #111b34;
    font-size: clamp(1.6rem, 3vw, 2rem);
    font-weight: 900;
    letter-spacing: -.04em;
}

.dashboard-summary {
    min-height: 1.5rem;
    margin-bottom: 3rem;
    color: #60718d;
    font-weight: 700;
}

.dashboard-summary small {
    display: block;
    margin-top: .3rem;
    color: #8291a5;
    font-size: .78rem;
    font-weight: 600;
}

.collection-category-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 34rem));
    justify-content: center;
    gap: 2.35rem;
}

.collection-category-card {
    min-height: 22rem;
    padding: 3rem 2.5rem 2.3rem;
    border: 1px solid #dbe5ef;
    border-radius: 1.7rem;
    color: inherit;
    background: white;
    box-shadow: 0 16px 38px rgba(39, 80, 120, .07);
    text-decoration: none;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.collection-category-card:hover,
.collection-category-card:focus-visible {
    border-color: #8fc4e5;
    box-shadow: 0 20px 44px rgba(39, 80, 120, .13);
    transform: translateY(-3px);
}

.category-icon {
    display: inline-grid;
    width: 6rem;
    height: 6rem;
    place-items: center;
    margin-bottom: 1.05rem;
    color: #67adda;
}

.category-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
    stroke: currentColor;
    stroke-linejoin: round;
}

.category-icon-coins svg {
    fill: none;
    stroke-width: 6;
}

.category-icon-star svg {
    stroke-width: 4;
}

.collection-category-card h1 {
    margin-bottom: .95rem;
    font-size: clamp(1.8rem, 3vw, 2.25rem);
}

.category-description {
    max-width: 23rem;
    min-height: 3.1rem;
    margin: 0 auto 1.15rem;
    color: #60718d;
    line-height: 1.5;
}

.category-status {
    margin-bottom: .65rem;
    color: #526c8d;
    font-size: .9rem;
    font-weight: 800;
}

.category-progress {
    display: block;
    overflow: hidden;
    width: 100%;
    height: .65rem;
    border-radius: 999px;
    background: #e8edf2;
}

.category-progress span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: #67adda;
}

.countries-page {
    max-width: 91rem;
    margin: 0 auto;
    padding: 3.1rem 1.5rem 5rem;
}

.countries-heading {
    display: grid;
    grid-template-columns: minmax(9rem, 1fr) auto minmax(9rem, 1fr);
    align-items: center;
    margin: 0 auto 3rem;
    max-width: 80rem;
}

.catalogue-heading-copy {
    max-width: 48rem;
    text-align: center;
}

.catalogue-heading-copy .eyebrow {
    margin-bottom: .55rem;
}

.countries-heading h1 {
    margin-bottom: .45rem;
    font-size: clamp(2rem, 4vw, 2.55rem);
}

.countries-heading p:not(.eyebrow) {
    margin-bottom: 0;
    color: #60718d;
}

.back-link {
    display: inline-flex;
    flex: 0 0 auto;
    gap: .35rem;
    align-items: center;
    margin: 0;
    color: #526c8d;
    font-weight: 800;
    text-decoration: none;
}

.catalogue-back-link {
    justify-self: start;
    padding: .55rem .8rem;
    border: 1px solid #d9e5f2;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 .35rem 1rem rgba(54, 91, 137, .07);
}

.catalogue-heading-balance {
    min-height: 1px;
}

.back-link:hover,
.back-link:focus-visible {
    color: #257daf;
}

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

.country-card {
    display: flex;
    min-height: 20.5rem;
    align-items: center;
    flex-direction: column;
    padding: 1.55rem 1.1rem 1.25rem;
    border: 1px solid #dbe5ef;
    border-radius: 1.35rem;
    color: inherit;
    background: white;
    box-shadow: 0 13px 32px rgba(39, 80, 120, .06);
    text-decoration: none;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.country-card:hover,
.country-card:focus-visible {
    border-color: #8fc4e5;
    box-shadow: 0 20px 42px rgba(39, 80, 120, .12);
    transform: translateY(-3px);
}

.country-flag {
    position: relative;
    display: block;
    overflow: hidden;
    width: min(100%, 10.75rem);
    aspect-ratio: 3 / 2;
    margin-bottom: 1.25rem;
    border: 1px solid rgba(23, 33, 58, .16);
    border-radius: .45rem;
    background: #eef3f8;
    box-shadow: 0 5px 16px rgba(23, 33, 58, .24);
}

@media (max-width: 1100px) and (min-width: 761px) {
    .countries-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.15rem;
    }

    .country-card {
        min-height: 17rem;
        padding: 1.2rem 1rem 1rem;
    }

    .country-flag {
        width: min(100%, 9rem);
        margin-bottom: 1rem;
    }
}

.country-card h2 {
    margin-bottom: auto;
    font-size: 1.12rem;
    text-align: center;
}

.country-stat {
    margin: 1.25rem 0 .6rem;
    color: #60718d;
    font-size: .84rem;
    font-weight: 800;
    text-align: center;
}

.country-progress {
    display: block;
    width: 100%;
    height: .35rem;
    border-radius: 999px;
    background: #e8edf2;
}

.country-progress span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: #67adda;
}

.flag-ad { background: linear-gradient(90deg, #171796 0 33.33%, #ffd927 33.33% 66.66%, #ce1126 66.66%); }
.flag-at { background: linear-gradient(#ed2939 0 33.33%, #fff 33.33% 66.66%, #ed2939 66.66%); }
.flag-be { background: linear-gradient(90deg, #171717 0 33.33%, #fdda24 33.33% 66.66%, #ef3340 66.66%); }
.flag-bg { background: linear-gradient(#fff 0 33.33%, #00966e 33.33% 66.66%, #d62612 66.66%); }
.flag-hr { background: linear-gradient(#ff1b28 0 33.33%, #fff 33.33% 66.66%, #171796 66.66%); }
.flag-cy { background: #fff; }
.flag-cy::after { position: absolute; top: 38%; left: 36%; width: 30%; height: 22%; border-radius: 50% 45% 45% 35%; background: #d57800; content: ""; }
.flag-ee { background: linear-gradient(#4891d9 0 33.33%, #171717 33.33% 66.66%, #fff 66.66%); }
.flag-fi { background: linear-gradient(#fff 0 38%, #003580 38% 58%, #fff 58%); }
.flag-fi::after { position: absolute; inset: 0 auto 0 29%; width: 18%; background: #003580; content: ""; }
.flag-fr { background: linear-gradient(90deg, #002654 0 33.33%, #fff 33.33% 66.66%, #ed2939 66.66%); }
.flag-de { background: linear-gradient(#171717 0 33.33%, #dd0000 33.33% 66.66%, #ffce00 66.66%); }
.flag-gr { background: repeating-linear-gradient(#0d5eaf 0 11.11%, #fff 11.11% 22.22%); }
.flag-ie { background: linear-gradient(90deg, #169b62 0 33.33%, #fff 33.33% 66.66%, #ff883e 66.66%); }
.flag-it { background: linear-gradient(90deg, #009246 0 33.33%, #fff 33.33% 66.66%, #ce2b37 66.66%); }
.flag-lv { background: linear-gradient(#9e3039 0 40%, #fff 40% 60%, #9e3039 60%); }
.flag-lt { background: linear-gradient(#fdb913 0 33.33%, #006a44 33.33% 66.66%, #c1272d 66.66%); }
.flag-lu { background: linear-gradient(#ef3340 0 33.33%, #fff 33.33% 66.66%, #6ad1e3 66.66%); }
.flag-mt { background: linear-gradient(90deg, #fff 0 50%, #cf142b 50%); }
.flag-mc { background: linear-gradient(#ce1126 0 50%, #fff 50%); }
.flag-nl { background: linear-gradient(#ae1c28 0 33.33%, #fff 33.33% 66.66%, #21468b 66.66%); }
.flag-pt { background: linear-gradient(90deg, #046a38 0 40%, #da291c 40%); }
.flag-sm { background: linear-gradient(#fff 0 50%, #75aadb 50%); }
.flag-sk { background: linear-gradient(#fff 0 33.33%, #0b4ea2 33.33% 66.66%, #ee1c25 66.66%); }
.flag-si { background: linear-gradient(#fff 0 33.33%, #005da4 33.33% 66.66%, #ed1c24 66.66%); }
.flag-es { background: linear-gradient(#aa151b 0 25%, #f1bf00 25% 75%, #aa151b 75%); }
.flag-va { background: linear-gradient(90deg, #ffe000 0 50%, #fff 50%); }
.flag-default { background: linear-gradient(135deg, #e3f2fb, #b7dff5); }

/* Local full flag images retain official coats of arms and emblems. */
.flag-ad { background: url('/flags/ad.png') center / cover no-repeat; }
.flag-at { background: url('/flags/at.png') center / cover no-repeat; }
.flag-be { background: url('/flags/be.png') center / cover no-repeat; }
.flag-bg { background: url('/flags/bg.png') center / cover no-repeat; }
.flag-hr { background: url('/flags/hr.png') center / cover no-repeat; }
.flag-cy { background: url('/flags/cy.png') center / cover no-repeat; }
.flag-ee { background: url('/flags/ee.png') center / cover no-repeat; }
.flag-fi { background: url('/flags/fi.png') center / cover no-repeat; }
.flag-fr { background: url('/flags/fr.png') center / cover no-repeat; }
.flag-de { background: url('/flags/de.png') center / cover no-repeat; }
.flag-gr { background: url('/flags/gr.png') center / cover no-repeat; }
.flag-ie { background: url('/flags/ie.png') center / cover no-repeat; }
.flag-it { background: url('/flags/it.png') center / cover no-repeat; }
.flag-lv { background: url('/flags/lv.png') center / cover no-repeat; }
.flag-lt { background: url('/flags/lt.png') center / cover no-repeat; }
.flag-lu { background: url('/flags/lu.png') center / cover no-repeat; }
.flag-mt { background: url('/flags/mt.png') center / cover no-repeat; }
.flag-mc { background: url('/flags/mc.png') center / cover no-repeat; }
.flag-nl { background: url('/flags/nl.png') center / cover no-repeat; }
.flag-pt { background: url('/flags/pt.png') center / cover no-repeat; }
.flag-sm { background: url('/flags/sm.png') center / cover no-repeat; }
.flag-sk { background: url('/flags/sk.png') center / cover no-repeat; }
.flag-si { background: url('/flags/si.png') center / cover no-repeat; }
.flag-es { background: url('/flags/es.png') center / cover no-repeat; }
.flag-va { background: url('/flags/va.png') center / cover no-repeat; }
.flag-cy::after,
.flag-fi::after { content: none; }

.catalogue-loading,
.catalogue-error,
.catalogue-empty-state {
    max-width: 42rem;
    margin: 2rem auto;
    padding: 1.2rem 1.35rem;
    border: 1px solid #d8e6f2;
    border-radius: .9rem;
    color: #526c8d;
    background: #fff;
    font-weight: 700;
    text-align: center;
}

.catalogue-error {
    border-color: #f3b9c2;
    color: #a8253c;
    background: #fff7f8;
}

.catalogue-page {
    max-width: 91rem;
    margin: 0 auto;
    padding: 3.1rem 1.5rem 5rem;
}

.catalogue-heading {
    display: grid;
    grid-template-columns: minmax(9rem, 1fr) auto minmax(9rem, 1fr);
    align-items: center;
    max-width: 80rem;
    margin: 0 auto 2rem;
}

.catalogue-heading h1 {
    margin-bottom: .45rem;
    font-size: clamp(2rem, 4vw, 2.55rem);
}

.catalogue-heading p:not(.eyebrow) {
    margin-bottom: 0;
    color: #60718d;
}

.catalogue-filters {
    display: flex;
    align-items: end;
    flex-wrap: wrap;
    gap: 1rem;
    max-width: 80rem;
    margin: 0 auto;
    padding: 1.1rem 1.25rem;
    border: 1px solid #dbe5ef;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 8px 22px rgba(39, 80, 120, .04);
}

.catalogue-filters label:not(.missing-filter) {
    display: grid;
    gap: .35rem;
    min-width: 10.5rem;
    color: #526c8d;
    font-size: .84rem;
    font-weight: 800;
}

.catalogue-filters select {
    min-height: 2.5rem;
    padding: .4rem .65rem;
    border: 1px solid #cbdceb;
    border-radius: .6rem;
    color: #14213b;
    background: #fff;
    font: inherit;
}

.missing-filter {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-height: 2.5rem;
    color: #263b59;
    font-size: .9rem;
    font-weight: 800;
}

.missing-filter input {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: #3b9bd3;
}

.quick-add-switch {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    min-height: 2.8rem;
    padding: .35rem .7rem;
    border: 1px solid #cbdceb;
    border-radius: .75rem;
    color: #263b59;
    background: #f8fbfe;
    cursor: pointer;
}

.quick-add-floating {
    --quick-add-screen-bottom: 1.25rem;
    --floating-footer-offset: 0px;
    position: fixed;
    z-index: 30;
    left: 50%;
    bottom: calc(max(var(--quick-add-screen-bottom), env(safe-area-inset-bottom)) + var(--floating-footer-offset));
    width: max-content;
    max-width: min(26rem, calc(100vw - 2.5rem));
    min-height: 4rem;
    padding: .7rem 1.1rem;
    border-color: #a9cbe2;
    border-radius: 1rem;
    box-shadow: 0 .85rem 2rem rgba(20, 57, 93, .2);
    transform: translateX(-50%);
}

.quick-add-floating .quick-add-track {
    width: 3.3rem;
    height: 1.85rem;
    padding: .17rem;
}

.quick-add-floating .quick-add-track span {
    width: 1.5rem;
    height: 1.5rem;
}

.quick-add-floating input:checked + .quick-add-track span {
    transform: translateX(1.28rem);
}

.quick-add-floating strong {
    font-size: 1rem;
}

.quick-add-floating small {
    font-size: .82rem;
}

.quick-add-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.quick-add-track {
    display: inline-flex;
    width: 2.55rem;
    height: 1.45rem;
    align-items: center;
    padding: .14rem;
    border-radius: 999px;
    background: #aebed0;
    transition: background .16s ease;
}

.quick-add-track span {
    width: 1.17rem;
    height: 1.17rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(18, 33, 59, .24);
    transition: transform .16s ease;
}

.quick-add-switch input:checked + .quick-add-track {
    background: #129b75;
}

.quick-add-switch input:checked + .quick-add-track span {
    transform: translateX(1.1rem);
}

.quick-add-switch input:focus-visible + .quick-add-track {
    outline: 2px solid #367eea;
    outline-offset: 3px;
}

.quick-add-switch strong,
.quick-add-switch small {
    display: block;
}

.quick-add-switch strong {
    font-size: .86rem;
}

.quick-add-switch small {
    margin-top: .08rem;
    color: #60718d;
    font-size: .7rem;
    font-weight: 600;
}

.catalogue-result-count {
    max-width: 80rem;
    margin: 1.25rem auto 1.1rem;
    color: #60718d;
    font-size: .9rem;
    font-weight: 800;
}

.quick-add-hint {
    max-width: 80rem;
    margin: -0.35rem auto 1.1rem;
    padding: .65rem .85rem;
    border: 1px solid #a8e4d1;
    border-radius: .7rem;
    color: #087c60;
    background: #effcf6;
    font-size: .88rem;
    font-weight: 800;
}

.coin-year-group {
    max-width: 80rem;
    margin: 0 auto 1.5rem;
}

.coin-year-group + .coin-year-group {
    margin-top: clamp(3.5rem, 5vw, 5rem);
}

.coin-year-group h2 {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.5rem;
    color: #14213b;
    font-size: 1.8rem;
}

.coin-year-group h2::after {
    flex: 1;
    height: 2px;
    background: #dbe5ef;
    content: "";
}

@media (max-width: 640px) {
    .coin-year-group > h2 {
        position: sticky;
        top: var(--catalogue-header-height, 5.25rem);
        z-index: 30;
        padding: .55rem .75rem;
        border: 1px solid #dbe5ef;
        border-radius: .6rem;
        background: #fff;
        box-shadow: 0 3px 9px rgba(23, 33, 58, .07);
        font-size: 1.25rem;
        scroll-margin-top: calc(var(--catalogue-header-height, 5.25rem) + .5rem);
    }
}

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

.catalogue-coin-card {
    display: flex;
    min-height: 19.5rem;
    align-items: center;
    flex-direction: column;
    padding: 1.1rem 1rem 1rem;
    border: 1px solid #dbe5ef;
    border-radius: 1rem;
    color: #14213b;
    background: #fff;
    box-shadow: 0 10px 25px rgba(39, 80, 120, .05);
    cursor: pointer;
    font: inherit;
    text-align: center;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.catalogue-coin-card.standard-coin-card {
    min-height: 16.25rem;
}

.standard-coin-card .catalogue-coin-owned,
.standard-coin-card .catalogue-coin-missing {
    margin-top: auto;
}

.catalogue-coin-card:hover,
.catalogue-coin-card:focus-visible {
    border-color: #8fc4e5;
    box-shadow: 0 17px 36px rgba(39, 80, 120, .12);
    outline: none;
    transform: translateY(-3px);
}

.catalogue-coin-card:disabled {
    cursor: wait;
    opacity: .72;
}

.catalogue-coin-card.owned-coin-card {
    border-color: #16834b;
    background: #c8efd7;
    box-shadow: inset 0 0 0 1px #16834b, 0 10px 25px rgba(20, 133, 93, .12);
}

.catalogue-coin-card.owned-coin-card:hover,
.catalogue-coin-card.owned-coin-card:focus-visible {
    border-color: #116337;
    background: #b4e7c7;
    box-shadow: inset 0 0 0 1px #116337, 0 17px 36px rgba(10, 123, 91, .2);
}

.catalogue-coin-card.owned-coin-card img {
    mix-blend-mode: multiply;
}

.quick-add-card {
    border-color: #a8e4d1;
}

.quick-add-card:hover,
.quick-add-card:focus-visible {
    border-color: #35ad88;
    box-shadow: 0 17px 36px rgba(10, 123, 91, .13);
}

.catalogue-coin-card img,
.coin-image-fallback {
    display: grid;
    width: 8.8rem;
    height: 8.8rem;
    place-items: center;
    margin-bottom: .85rem;
    object-fit: contain;
}

.coin-image-fallback,
.coin-detail-fallback {
    border-radius: 50%;
    color: #936e2e;
    background: radial-gradient(circle at 35% 30%, #fff4b9, #cf9f42 58%, #815e22);
    box-shadow: inset 0 0 0 .35rem rgba(255, 255, 255, .25);
    font-size: 3.5rem;
    font-weight: 900;
}

.catalogue-coin-value {
    color: #111b34;
    font-size: 1.1rem;
    font-weight: 900;
}

.catalogue-coin-title {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 2.65rem;
    margin: .3rem 0 auto;
    color: #60718d;
    font-size: .85rem;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
}

.catalogue-coin-owned,
.catalogue-coin-missing {
    margin-top: .7rem;
    padding: .3rem .55rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 900;
}

.quick-add-card-action {
    margin-top: .55rem;
    padding: .32rem .62rem;
    border-radius: 999px;
    color: #087c60;
    background: #e8faf3;
    font-size: .74rem;
    font-weight: 900;
}

.catalogue-coin-owned {
    color: #ffffff;
    background: #116337;
}

.owned-coin-card .catalogue-coin-title {
    color: #294c38;
}

.catalogue-coin-missing {
    color: #6b7d95;
    background: #f1f5f8;
}

.coin-modal-backdrop {
    position: fixed;
    z-index: 100;
    inset: 0;
    display: grid;
    place-items: center;
    padding: clamp(.75rem, 2vh, 1.5rem);
    overflow: hidden;
    background: rgba(12, 25, 45, .63);
}

.coin-modal {
    position: relative;
    width: min(100%, 67rem);
    max-height: calc(100dvh - clamp(1.5rem, 4vh, 3rem));
    padding: 2.2rem;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: auto;
    scrollbar-color: #9fb6c9 transparent;
    scrollbar-width: thin;
    border: 1px solid rgba(255, 255, 255, .78);
    border-radius: 1.5rem;
    background: linear-gradient(145deg, #fff 0%, #fff 72%, #f8fbfe 100%);
    background-clip: padding-box;
    box-shadow: 0 32px 90px rgba(7, 25, 48, .3), 0 8px 28px rgba(36, 84, 126, .14);
}

.coin-modal::-webkit-scrollbar {
    width: .65rem;
}

.coin-modal::-webkit-scrollbar-track {
    margin-block: 1rem;
    background: transparent;
}

.coin-modal::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: #9fb6c9;
    background-clip: padding-box;
}

.coin-modal::-webkit-scrollbar-thumb:hover {
    background: #7798b3;
    background-clip: padding-box;
}

.coin-modal-close {
    padding: 0;
    position: sticky;
    z-index: 5;
    top: .85rem;
    margin-left: auto;
    margin-bottom: -2.75rem;
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    border: 0;
    border-radius: .55rem;
    color: #b42318;
    background: #fff1f0;
    box-shadow: 0 2px 8px rgba(70, 15, 15, .12);
    cursor: pointer;
    font-size: 2rem;
    line-height: 1;
}

.coin-modal-close svg {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.coin-modal-close:hover,
.coin-modal-close:focus-visible {
    color: #ffffff;
    background: #b42318;
    outline: 2px solid #b42318;
    outline-offset: 2px;
}

.coin-modal-heading {
    padding-right: 3.25rem;
    border-bottom: 1px solid #e3ebf2;
}

.coin-modal-heading h2 {
    margin-bottom: .3rem;
    font-size: clamp(1.5rem, 3vw, 2rem);
}

.coin-modal-heading p:not(.eyebrow) {
    margin-bottom: 1.2rem;
    color: #60718d;
}

.coin-modal-heading .coin-modal-country {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

.coin-modal-heading .coin-modal-flag {
    width: 1.35rem;
    min-width: 1.35rem;
    aspect-ratio: 3 / 2;
    margin: 0;
    border-radius: .18rem;
}

.coin-detail-layout {
    display: grid;
    grid-template-columns: minmax(14rem, .75fr) minmax(0, 1.25fr);
    gap: 2rem;
    padding: 1.8rem 0;
}

.coin-detail-image-wrap {
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
}

.coin-detail-image,
.coin-detail-fallback {
    display: grid;
    width: min(100%, 18rem);
    aspect-ratio: 1;
    place-items: center;
    object-fit: contain;
}

.coin-detail-fallback {
    font-size: 6rem;
}

.coin-detail-image-wrap p {
    margin: .8rem 0 0;
    color: #526c8d;
    font-weight: 800;
}

.coin-detail-data dl {
    margin: 0;
}

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

.coin-motif,
.coin-design-details .coin-specifications {
    min-width: 0;
    padding: 1.35rem;
    border: 1px solid #dce6ee;
    border-radius: 1.15rem;
    background: #fff;
}

.coin-motif {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: linear-gradient(135deg, #edf7fc, #f7fafc 75%);
    border-color: #cce2ee;
    box-shadow: 0 5px 18px rgb(24 72 104 / 4%);
}

.coin-design-details h3 {
    margin: 0 0 1rem;
    font-size: 1rem;
    font-weight: 800;
    color: #1d2b45;
}

.coin-design-details .coin-motif-heading {
    display: flex;
    align-items: center;
    gap: .65rem;
    color: #226482;
}

.coin-motif-icon {
    display: inline-grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 auto;
    border-radius: .7rem;
    background: #fff;
    border: 1px solid #d3e6f0;
}
.coin-motif-icon svg { width: 1.55rem; height: 1.55rem; }

.coin-motif p {
    margin: 0 0 1.2rem;
    font-size: 1.02rem;
    line-height: 1.75;
    color: #344e66;
    overflow-wrap: anywhere;
    text-wrap: pretty;
}

.coin-motif-source {
    display: inline-block;
    max-width: 100%;
    margin-top: auto;
    padding: .4rem .7rem;
    border: 1px solid #cee0eb;
    border-radius: .65rem;
    background: rgb(255 255 255 / 80%);
    color: #246783;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
    overflow-wrap: anywhere;
}
.coin-motif-source:hover { background: #fff; text-decoration: underline; }
.coin-motif-source:focus-visible { outline: 2px solid #237a9e; outline-offset: 3px; }

@media (max-width: 700px) {
    .coin-design-details { grid-template-columns: minmax(0, 1fr); gap: .85rem; margin: 1rem 0 1.5rem; }
    .coin-motif, .coin-design-details .coin-specifications { padding: 1rem; border-radius: 1rem; }
    .coin-motif p { font-size: .95rem; line-height: 1.7; }
}

.coin-detail-data dl > div {
    display: grid;
    grid-template-columns: minmax(6rem, .5fr) minmax(0, 1.5fr);
    gap: 1rem;
    padding: .55rem 0;
    border-bottom: 1px solid #e8eef4;
}

.coin-detail-data dt {
    color: #60718d;
    font-weight: 700;
}

.coin-detail-data dd {
    margin: 0;
    color: #1d2b45;
    font-weight: 800;
    overflow-wrap: anywhere;
    text-align: right;
}

.coin-detail-data dl > .coin-physical-specs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    padding: 0;
}

.coin-physical-specs > div {
    display: grid;
    gap: .25rem;
    padding: .7rem .8rem;
    text-align: center;
}

.coin-physical-specs > div + div {
    border-left: 1px solid #e8eef4;
}

.coin-detail-data .coin-physical-specs dt,
.coin-detail-data .coin-physical-specs dd {
    text-align: center;
}

@media (max-width: 430px) {
    .coin-physical-specs > div {
        padding: .55rem .25rem;
    }

    .coin-detail-data .coin-physical-specs dt {
        font-size: .72rem;
    }

    .coin-detail-data .coin-physical-specs dd {
        font-size: .82rem;
    }
}

.mintage-grid,
.holding-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .7rem;
}

.mintage-grid {
    margin-top: 1rem;
}

.mintage-grid > div {
    display: grid;
    min-height: 4.9rem;
    place-items: center;
    padding: .55rem;
    border: 1px solid #dbe5ef;
    border-radius: .7rem;
    text-align: center;
}

.mintage-grid span {
    color: #60718d;
    font-size: .72rem;
    font-weight: 800;
}

.mintage-grid strong {
    overflow-wrap: anywhere;
    font-size: .86rem;
}

.coin-holdings {
    padding-top: 1.35rem;
    border-top: 1px solid #e3ebf2;
}

.coin-community-totals {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-top: 1.35rem;
    padding: 1rem 1.15rem;
    border: 1px solid #cde5f3;
    border-radius: .85rem;
    background: linear-gradient(120deg, #f1f9fe, #f8fcff);
}

.coin-community-totals .eyebrow {
    margin-bottom: .2rem;
    font-size: .65rem;
}

.coin-community-totals h3 {
    margin: 0;
    font-size: 1rem;
}

.coin-community-totals dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(7.5rem, 1fr));
    gap: .55rem;
    margin: 0;
}

.coin-community-totals dl > div {
    display: grid;
    min-width: 7.5rem;
    padding: .55rem .75rem;
    border: 1px solid #dcebf4;
    border-radius: .65rem;
    text-align: center;
    background: #fff;
}

.coin-community-totals dt {
    color: #60718d;
    font-size: .68rem;
    font-weight: 800;
}

.coin-community-totals dd {
    margin: .15rem 0 0;
    color: #287fac;
    font-size: 1.15rem;
    font-weight: 900;
}

.coin-community-totals + .coin-holdings {
    margin-top: 1.2rem;
}

.coin-holdings h3 {
    margin-bottom: .1rem;
    font-size: 1.2rem;
}

.coin-holdings p {
    margin-bottom: .9rem;
    color: #60718d;
    font-size: .88rem;
}

.coin-problem-report {
    margin-top: 1.2rem;
    padding-top: 1.2rem;
    border-top: 1px solid #e3ebf2;
}

.coin-problem-callout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.coin-problem-report h3 {
    margin-bottom: .2rem;
    font-size: 1rem;
}

.coin-problem-report p {
    color: #60718d;
    font-size: .86rem;
    line-height: 1.45;
}

.coin-problem-report label {
    display: block;
    margin: .85rem 0 .35rem;
    color: #28496e;
    font-size: .84rem;
    font-weight: 800;
}

.coin-problem-textarea {
    min-height: 6.5rem;
    resize: vertical;
}

.coin-problem-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    margin-top: .75rem;
}

.coin-problem-callout-actions {
    justify-content: flex-end;
    margin-top: 0;
}

.coin-admin-image-import {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .35rem .6rem;
    margin-top: 1rem;
    padding: .75rem .9rem;
    border: 1px solid #c7e3f3;
    border-radius: .7rem;
    color: #506c8d;
    background: #f2faff;
    font-size: .82rem;
    line-height: 1.45;
}

.coin-admin-image-import strong {
    color: #1d5e86;
}

.coin-admin-catalogue-id {
    display: flex;
    justify-content: flex-end;
    gap: .45rem;
    margin: .75rem .15rem 0;
    color: #8291a5;
    font-size: .72rem;
}

.coin-admin-catalogue-id strong {
    color: #60718d;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.coin-admin-image-status {
    color: #087c60;
    font-weight: 800;
}

.coin-admin-image-upload {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.coin-admin-image-upload input[type="file"] {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
}

.holding-error {
    color: #b4233c !important;
    font-weight: 800;
}

.holding-control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .75rem;
    border: 1px solid #dbe5ef;
    border-radius: .7rem;
    color: #526c8d;
    font-size: .84rem;
    font-weight: 800;
}

.holding-control > div {
    display: flex;
    align-items: center;
    gap: .55rem;
    color: #14213b;
}

.holding-control button {
    display: grid;
    padding: 0;
    flex-shrink: 0;
    width: 1.85rem;
    height: 1.85rem;
    place-items: center;
    border: 1px solid #cfdfed;
    border-radius: 50%;
    color: #1d4267;
    background: #fff;
    cursor: pointer;
    font-size: 1.15rem;
    font-weight: 900;
}

.holding-control button svg {
    display: block;
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
}

.holding-control button:hover:not(:disabled),
.holding-control button:focus-visible:not(:disabled) {
    border-color: #69acda;
    background: #eaf6ff;
    outline: none;
}

.holding-control button:disabled {
    cursor: wait;
    opacity: .55;
}

.auth-required {
    text-align: center;
}

.collection-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
}

.collection-heading h1 {
    margin-bottom: .6rem;
    font-size: clamp(2rem, 4vw, 3rem);
}

.collection-heading p:not(.eyebrow) {
    margin-bottom: 0;
    color: #60718d;
}

.collection-layout {
    display: grid;
    grid-template-columns: minmax(17rem, .85fr) minmax(0, 1.65fr);
    gap: 1.5rem;
}

.collection-form,
.collection-list {
    padding: 1.75rem;
}

.collection-form h2,
.collection-list h2 {
    margin-bottom: .2rem;
    font-size: 1.35rem;
}

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

.list-header span {
    color: #6d7e98;
    font-size: .85rem;
    font-weight: 800;
}

.empty-state {
    padding: 2.5rem 1rem;
    border: 1px dashed #c8d8e7;
    border-radius: .85rem;
    text-align: center;
}

.empty-state h3 {
    margin-bottom: .35rem;
}

.empty-state p {
    margin: 0;
    color: #60718d;
}

.coin-cards {
    display: grid;
    gap: .8rem;
}

.coin-card {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid #e0e9f1;
    border-radius: .8rem;
    background: #fbfdff;
}

.coin-card h3 {
    margin-bottom: .35rem;
    font-size: 1rem;
}

.coin-card p {
    margin-bottom: 0;
    color: #60718d;
    font-size: .9rem;
}

.coin-card .coin-notes {
    margin-top: .6rem;
    white-space: pre-wrap;
}

.text-button {
    padding: .25rem;
    border: 0;
    background: transparent;
    font-weight: 800;
    cursor: pointer;
}

.danger {
    color: #b4233c;
}

@media (max-width: 760px) {
    .coin-community-totals {
        align-items: stretch;
        flex-direction: column;
        gap: .8rem;
    }

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

    .coin-community-totals dl > div {
        min-width: 0;
    }

    .feature-grid,
    .collection-layout,
    .collection-category-grid {
        grid-template-columns: 1fr;
    }

    .hero {
        padding-top: 5.25rem;
    }

    .collection-heading {
        align-items: start;
        flex-direction: column;
    }

    .dashboard-page {
        padding-top: 3rem;
    }

    .collection-category-grid {
        gap: 1.25rem;
    }

    .collection-category-card {
        min-height: 0;
    }

    .countries-heading {
        grid-template-columns: 1fr;
        justify-items: center;
        row-gap: .9rem;
        margin-bottom: 2rem;
    }

    .catalogue-heading {
        grid-template-columns: 1fr;
        justify-items: center;
        row-gap: .9rem;
        margin-bottom: 1.5rem;
    }

    .catalogue-heading-copy {
        grid-row: 2;
    }

    .catalogue-heading-balance {
        display: none;
    }

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

    .country-card {
        min-height: 16rem;
    }

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

    .coin-detail-layout {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .coin-modal {
        padding: 1.5rem;
    }

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

    .coin-problem-callout {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 900px) {
    .coin-modal-backdrop {
        align-items: stretch;
        padding: .5rem;
    }

    .coin-modal {
        width: 100%;
        max-width: 100%;
        max-height: calc(100dvh - 1rem);
        padding: 1rem;
        border-radius: 1rem;
        scrollbar-gutter: auto;
    }

    .coin-detail-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
        padding: 1rem 0;
    }

    .coin-detail-image-wrap,
    .coin-detail-data,
    .coin-detail-data dl,
    .coin-detail-data dl > div {
        min-width: 0;
        max-width: 100%;
    }

    .coin-detail-image,
    .coin-detail-fallback {
        width: min(68vw, 15rem);
        max-width: 100%;
    }

    .coin-detail-data dl > div {
        grid-template-columns: minmax(0, 1fr);
        gap: .2rem;
        padding: .65rem 0;
    }

    .coin-detail-data dd {
        text-align: left;
    }
}

@media (max-width: 430px) {
    .coin-modal-backdrop {
        align-items: stretch;
        padding: .5rem;
    }

    .coin-modal {
        width: 100%;
        max-width: 100%;
        max-height: calc(100dvh - 1rem);
        padding: 1rem;
        border-radius: 1rem;
    }

    .coin-modal-heading h2 { font-size: 1.45rem; }

    .coin-detail-layout {
        gap: 1rem;
        padding: 1rem 0;
    }

    .coin-detail-image,
    .coin-detail-fallback {
        width: min(72vw, 15rem);
        max-width: 100%;
    }

    .coin-detail-data dl > div {
        grid-template-columns: 1fr;
        gap: .2rem;
        padding: .65rem 0;
    }

    .coin-detail-data dd { text-align: left; }

    .holding-grid { grid-template-columns: 1fr; }

    .coin-problem-actions { flex-wrap: wrap; }

    .account-card,
    .collection-form,
    .collection-list {
        padding: 1.35rem;
    }

    .catalogue-page,
    .countries-page {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .catalogue-filters {
        align-items: stretch;
        flex-direction: column;
    }

    .catalogue-filters label:not(.missing-filter) {
        min-width: 0;
    }

    .quick-add-floating {
        --quick-add-screen-bottom: .85rem;
        max-width: calc(100vw - 1.7rem);
    }

    .catalogue-coin-card {
        min-height: 17.5rem;
        padding: .85rem .65rem;
    }

    .catalogue-coin-card.standard-coin-card {
        min-height: 14.25rem;
    }

    .catalogue-coin-card img,
    .coin-image-fallback {
        width: 6.8rem;
        height: 6.8rem;
    }

    .mintage-grid {
        grid-template-columns: 1fr;
    }
}

.contact-form {
    display: grid;
    gap: .55rem;
    margin-top: 1.5rem;
}

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

.contact-form label { margin-top: .55rem; color: #28496e; font-weight: 800; }
.contact-message-input { min-height: 11rem; resize: vertical; }
.contact-success { margin-top: 1.5rem; padding: 1.5rem; border: 1px solid #9ddfc9; border-radius: 1rem; background: #effcf7; }

@media (max-width: 640px) {
    .contact-form-grid { grid-template-columns: 1fr; gap: .55rem; }
}

@media (min-width: 1100px) {
    .catalogue-page.has-year-rail { padding-right: 128px; }
}
@media(min-width:1100px){.catalogue-page.has-country-rail{padding-right:186px}}

/* Server-rendered public catalogue, shared by mobile and desktop. */
.public-catalogue{max-width:1160px;margin:auto;padding:2.5rem 1.25rem;color:#14233e}.public-catalogue h1{margin:1.5rem 0;font-size:clamp(1.7rem,4vw,2.6rem);line-height:1.25}.public-catalogue h2{margin:2rem 0 1rem}.public-catalogue p{line-height:1.7}.public-catalogue .country-grid,.public-catalogue .coin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}.public-catalogue .catalogue-card{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:1.3rem;border:1px solid #dbe5ef;border-radius:18px;background:#fff;text-decoration:none;text-align:center;color:#193b5b;overflow-wrap:anywhere}.public-catalogue .catalogue-card img{object-fit:contain;max-width:100%}.public-catalogue .catalogue-card:hover{border-color:#246fa8}.public-catalogue .catalogue-callout{margin-top:2rem;padding:1.5rem;border-radius:16px;background:#edf5fc}.public-catalogue .pagination{display:flex;justify-content:space-between;gap:2rem;margin:2rem 0}.public-catalogue .public-coin-detail{display:grid;grid-template-columns:minmax(180px,320px) 1fr;gap:2.5rem;align-items:start}.public-catalogue .public-coin-detail>img{max-width:100%;height:auto;object-fit:contain;mix-blend-mode:multiply}.public-catalogue .public-coin-detail dl{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.public-catalogue .public-coin-detail dd{margin:0;overflow-wrap:anywhere}@media(max-width:650px){.public-catalogue .public-coin-detail{grid-template-columns:1fr}.public-catalogue .public-coin-detail>img{justify-self:center}.public-catalogue .country-grid,.public-catalogue .coin-grid{grid-template-columns:repeat(auto-fit,minmax(145px,1fr))}.public-catalogue{padding:1.5rem 1rem}}

/* Standalone public coin detail follows the signed-in coin detail layout. */
.public-coin-panel{margin-top:1.5rem;padding:2.2rem;border:1px solid #dbe5ef;border-radius:1.5rem;background:linear-gradient(145deg,#fff 0%,#fff 72%,#f8fbfe 100%);box-shadow:0 12px 40px #193b5b08}
.public-coin-panel-heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr);align-items:center;gap:.6rem;min-height:5rem}
.public-coin-panel-heading>div{grid-column:2;text-align:center}
.public-catalogue .public-coin-panel-heading h1{margin:0;font-size:clamp(1.35rem,3vw,2.3rem);overflow-wrap:anywhere}
.public-catalogue .public-coin-country{display:flex;align-items:center;flex-wrap:wrap;gap:.45rem;margin:0;font-size:clamp(1rem,2.4vw,1.8rem);font-weight:700;line-height:1.25;color:#19324d}
.public-coin-country .country-flag{width:2rem;flex:0 0 2rem;margin:0;border-radius:.18rem;box-shadow:none}
.public-catalogue .public-coin-subtitle{margin:.5rem 0 0;color:#60718d}
.public-coin-panel .coin-detail-image{height:auto;mix-blend-mode:multiply}
.public-mintage-rows{display:grid;gap:.65rem;margin-bottom:1.6rem}
.public-mintage-row{display:grid;gap:.35rem;padding:.75rem;border:1px solid #dbe5ef;border-radius:.7rem;min-width:0;overflow-wrap:anywhere}
.public-mintage-row span{color:#60718d;font-size:.85rem;font-weight:700}
.public-mintage-row strong{color:#19324d}
.public-catalogue .public-coin-data-note{font-size:.8rem;color:#60718d;margin:1rem 0}
.public-coin-join{border-top:1px solid #e8eef4;padding-top:1.5rem;margin-top:.5rem}
.public-catalogue .public-coin-join h2{margin:0;font-size:1.25rem}
.public-catalogue .public-coin-join p{margin:.5rem 0 1rem;color:#60718d}
.public-coin-join>div{display:flex;gap:.6rem;flex-wrap:wrap}
@media(max-width:900px){.public-coin-panel{padding:1.25rem}.public-coin-panel-heading{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:.8rem}}
@media(max-width:430px){.public-coin-panel{padding:1rem;border-radius:1rem}.public-catalogue .public-coin-country{font-size:.9rem}.public-catalogue .public-coin-panel-heading h1{font-size:1.3rem}.public-coin-panel .coin-detail-data dl>.coin-physical-specs{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Shared country card presentation for public and member catalogues. */
/* Shared progress footer: count and blue percentage directly above the bar. */
.country-card .country-stat,.series-grid .series-count{font-size:.84rem;line-height:1.5;font-weight:700;color:#526c8d;margin:1.25rem 0 .6rem;white-space:normal}
.country-card .country-percentage{color:#246fa8;margin-left:.3em;font-weight:700;white-space:nowrap}
.country-card .country-progress{height:.4rem;margin-top:0;flex-shrink:0}
.country-card:not(.series-card) .country-stat{margin-top:auto;padding-top:1.25rem}
.series-grid .country-stat{align-self:end;margin-bottom:.6rem}
.series-grid .country-progress{margin-top:0}
.country-card h2{font-weight:700;color:#19324d}
.year-card h2{color:#246fa8;font-weight:800}

/* Keep the percentage on its own line on every card, independently of label wrapping. */
.country-card .country-stat{display:block;width:100%;text-align:center}
.country-card .country-percentage{display:block;margin:0;line-height:1.5}


@media (max-width: 640px) {
    .catalogue-page {
        padding-top: 1rem;
    }

    .catalogue-heading {
        row-gap: .5rem;
        margin-bottom: .75rem;
    }

    .catalogue-back-link {
        padding: .45rem .8rem;
        min-height: 2.75rem;
    }

    .catalogue-heading-copy .eyebrow {
        margin-bottom: .25rem;
        font-size: .7rem;
    }

    .catalogue-heading h1 {
        margin-bottom: .25rem;
        font-size: 1.7rem;
    }

    .catalogue-heading p:not(.eyebrow) {
        font-size: .8rem;
        line-height: 1.4;
    }

    .catalogue-filters {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .5rem .75rem;
        padding: .65rem .75rem;
    }

    .catalogue-filters label:not(.missing-filter) {
        min-width: 0;
        gap: .2rem;
    }

    .catalogue-filters label {
        margin: 0;
    }

    .catalogue-filters select {
        width: 100%;
        min-width: 0;
        min-height: 2.75rem;
    }

    .missing-filter {
        grid-column: 1 / -1;
        min-height: 2.75rem;
        font-size: .8rem;
    }
}

.country-heading-title{display:flex;align-items:center;justify-content:center;gap:.65rem;flex-wrap:wrap}.country-heading-title .heading-country-flag{width:2.3rem;height:1.55rem;flex:0 0 2.3rem;margin:0;border-radius:.2rem;box-shadow:0 2px 6px #19324d20}

/* Shared coin detail header and mintage rows. */

.coin-modal-heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr);align-items:center;gap:.6rem;min-height:5rem;padding-right:0}
.coin-modal-heading .coin-detail-title{grid-column:2;grid-row:1;text-align:center;margin:0;font-size:clamp(1.35rem,3vw,2.3rem);overflow-wrap:anywhere}
.coin-modal-heading .coin-modal-country{grid-column:1;grid-row:1;margin:0;font-size:clamp(1rem,2.4vw,1.8rem);font-weight:700;line-height:1.25;flex-wrap:wrap;color:#19324d}
.coin-modal-heading .coin-modal-flag{width:2rem;height:1.35rem;flex-shrink:0}
.coin-modal-heading .coin-design-title{grid-column:1/-1;grid-row:2;text-align:center;margin:0}
@media(max-width:600px){.coin-modal-heading{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) 2.4rem;gap:.4rem}.coin-modal-heading .coin-modal-country{font-size:.9rem}.coin-modal-heading .coin-detail-title{font-size:1.3rem}}
.mintage-holdings{display:grid;gap:.65rem;margin-bottom:1.6rem}
.mintage-holding-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.75rem;border:1px solid #dbe5ef;border-radius:.7rem;min-width:0}
.mintage-figure{display:grid;gap:.35rem;min-width:0;text-align:left;overflow-wrap:anywhere}
.mintage-figure span{color:#60718d;font-size:.85rem;font-weight:700}
.mintage-figure strong{color:#19324d}
.mintage-holding-row .holding-control{flex-shrink:0;flex-direction:column;padding:0;border:0;gap:.3rem}
@media(max-width:380px){.mintage-holding-row{padding:.55rem;gap:.4rem}.mintage-holding-row .holding-control>div{gap:.3rem}}

/* Public-only navigation adapts links to the existing catalogue presentation. */
.public-coin-type-switch{display:flex;justify-content:center;flex-wrap:wrap;gap:.75rem;margin:0 auto 2rem}
.public-coin-type-switch .button{text-align:center}
.public-catalogue-browser .public-catalogue-section+.public-catalogue-section{margin-top:4rem}
.public-catalogue-browser .public-category-heading{text-align:center;margin:0 0 2rem;font-size:1.8rem}
.public-catalogue-browser a.catalogue-coin-card{text-decoration:none}
.public-catalogue-browser .pagination{display:flex;justify-content:space-between;gap:1.5rem;max-width:80rem;margin:2rem auto 0}
.public-catalogue-browser .catalogue-filters button{align-self:end}
.public-coin-panel .coin-modal-heading .coin-detail-title{margin:0;font-size:clamp(1.35rem,3vw,2.3rem);line-height:1.25}
@media(max-width:600px){.public-coin-panel .coin-modal-heading .coin-detail-title{font-size:1.3rem}}

/* Separate detail navigation from explicit quantity controls; no nested buttons. */
.quantity-card { cursor: default; }
.coin-card-details { display: flex; flex-direction: column; align-items: center; flex: 1; width: 100%; padding: 0; border: 0; border-radius: .6rem; background: transparent; color: inherit; font: inherit; cursor: pointer; text-align: center; }
.coin-card-details:focus-visible { outline: 3px solid #227aa3; outline-offset: 4px; }

.holding-quantity-input{width:4.5rem;min-height:34px;border:1px solid #bfd5e8;border-radius:8px;text-align:center;font:inherit;font-weight:700;color:inherit;background:#fff;appearance:textfield;-moz-appearance:textfield}
.holding-quantity-input::-webkit-inner-spin-button,.holding-quantity-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.holding-quantity-input:focus{outline:2px solid #247bab;outline-offset:2px}

/* Informational Austria price pilot; keep all quantity controls independent. */
.coin-card-details,.catalogue-coin-card { position:relative; }
.coin-value-estimate { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;flex-shrink:0;color:#226382;line-height:1.3;text-align:center; }
.coin-value-estimate small { font-size:.68rem;font-weight:600; }
.coin-value-estimate strong { font-size:.92rem;white-space:nowrap; }
.coin-value-estimate-card { position:absolute;top:.2rem;right:.2rem;z-index:1;background:#f0f7fb;border:1px solid #d8e8f1;border-radius:.65rem;padding:.35rem .5rem;pointer-events:none; }
a.catalogue-coin-card > .coin-value-estimate-card { top:.65rem;right:.65rem; }
.coin-value-estimate-card strong { font-size:.78rem; }
.coin-value-unavailable { font-size:.72rem;color:#60718d;max-width:7rem; }
.coin-value-source { font-size:.75rem;color:#60718d;margin:-.65rem 0 1.2rem; }
.coin-value-source summary { cursor:pointer; }
.coin-value-source p { margin:.5rem 0;line-height:1.5; }
@media(max-width:600px){
 .mintage-holding-row:has(.coin-value-estimate) { display:grid;grid-template-columns:minmax(0,1fr) auto; }
 .mintage-holding-row:has(.holding-control) .coin-value-estimate { grid-column:1;grid-row:2;align-items:flex-start;text-align:left; }
 .mintage-holding-row:has(.coin-value-estimate) .holding-control { grid-column:2;grid-row:1 / span 2; }
 .coin-value-estimate-card { padding:.25rem .35rem; }
}

/* Keep the same price lane even when a commemorative coin has no estimate. */
.commemorative-coin-card > .coin-card-details::before,
a.commemorative-coin-card::before { content:"";display:block;flex:0 0 2.25rem;width:100%; }
.coin-value-estimate-card { position:absolute;gap:.1rem;padding:.25rem .45rem;background:#eef5fa;border:0;border-radius:.4rem;line-height:1.2;color:#193b55; }
.coin-value-estimate-card small { font-size:.75rem;font-weight:500; }
.coin-value-estimate-card strong { font-size:.875rem;font-weight:700; }

/* Reserve an explicit close-button lane and center estimate independently of content. */
.coin-modal > .coin-modal-heading { padding-right:3.5rem;grid-template-columns:minmax(0,1fr) minmax(0,2fr);column-gap:1rem; }
.mintage-holding-row:has(.coin-value-estimate) { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); }
.mintage-holding-row > .coin-value-estimate { grid-column:2;grid-row:1;justify-self:center;align-items:center;text-align:center; }
.mintage-holding-row:has(.coin-value-estimate) > .holding-control { grid-column:3;grid-row:1;justify-self:end; }
@media(max-width:600px){
 .coin-modal > .coin-modal-heading { grid-template-columns:minmax(0,1fr);padding-right:0;row-gap:1rem;padding-bottom:.8rem; }
 .coin-modal > .coin-modal-heading .coin-modal-country { grid-column:1;grid-row:1;padding-right:3.5rem;min-height:2.75rem; }
 .coin-modal > .coin-modal-heading .coin-detail-title { grid-column:1;grid-row:2; }
 .coin-modal > .coin-modal-heading .coin-design-title { grid-column:1;grid-row:3; }
 .mintage-holding-row:has(.coin-value-estimate) { grid-template-columns:minmax(0,1fr) auto; }
 .mintage-holding-row:has(.coin-value-estimate) > .holding-control { grid-column:2;grid-row:1; }
 .mintage-holding-row > .coin-value-estimate,
 .mintage-holding-row:has(.holding-control) > .coin-value-estimate { grid-column:1 / -1;grid-row:2;justify-self:center;align-items:center;text-align:center; }
}