: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: #67adda;
    border-color: #67adda;
}

.button-primary:hover {
    background: #4797cb;
    border-color: #4797cb;
}

.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;
}

.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, .08);
    border-radius: .45rem;
    background: #eef3f8;
    box-shadow: 0 1px 2px rgba(23, 33, 58, .08);
}

.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 {
    position: fixed;
    z-index: 30;
    left: 50%;
    bottom: max(1.25rem, env(safe-area-inset-bottom));
    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 2.6rem;
}

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

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

.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: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: #9bdcc2;
    background: #edf9f3;
    box-shadow: 0 10px 25px rgba(20, 133, 93, .09);
}

.catalogue-coin-card.owned-coin-card:hover,
.catalogue-coin-card.owned-coin-card:focus-visible {
    border-color: #48b78c;
    background: #e5f7ee;
    box-shadow: 0 17px 36px rgba(10, 123, 91, .16);
}

.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: -webkit-box;
    overflow: hidden;
    min-height: 2.65rem;
    margin: .3rem 0 auto;
    color: #60718d;
    font-size: .85rem;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.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: #087c60;
    background: #e8faf3;
}

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

.coin-modal-backdrop {
    position: fixed;
    z-index: 20;
    inset: 0;
    display: grid;
    overflow-y: auto;
    place-items: center;
    padding: 1.5rem;
    background: rgba(12, 25, 45, .63);
}

.coin-modal {
    position: relative;
    width: min(100%, 67rem);
    padding: 2.2rem;
    border-radius: 1.25rem;
    background: #fff;
    box-shadow: 0 28px 80px rgba(0, 0, 0, .35);
}

.coin-modal-close {
    position: absolute;
    top: .85rem;
    right: .9rem;
    display: grid;
    width: 2.3rem;
    height: 2.3rem;
    place-items: center;
    border: 0;
    border-radius: .55rem;
    color: #60718d;
    background: transparent;
    cursor: pointer;
    font-size: 2rem;
    line-height: 1;
}

.coin-modal-close:hover,
.coin-modal-close:focus-visible {
    color: #1d4267;
    background: #edf4fa;
    outline: none;
}

.coin-modal-heading {
    padding-right: 2.5rem;
    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-detail-data dl > div {
    display: grid;
    grid-template-columns: minmax(7rem, .7fr) minmax(0, 1.3fr);
    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;
}

.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-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-image-status {
    color: #087c60;
    font-weight: 800;
}

.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;
    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: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) {
    .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: 430px) {
    .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 {
        bottom: .85rem;
        max-width: calc(100vw - 1.7rem);
    }

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

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

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