* {
    box-sizing: border-box;
}

:root {
    --bg: #edf1f7;
    --card: rgba(255, 255, 255, 0.94);
    --text: #111827;
    --muted: #6b7280;
    --line: #d9e0ea;
    --blue: #1958d1;
    --orange: #ef6b08;
    --green: #24b45a;
    --red: #e42634;
    --navy: #10192c;
    --shadow: 0 20px 55px rgba(16, 25, 44, 0.12);
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--text);
    background: linear-gradient(180deg, #eef2f8 0%, #f8fbff 100%);
}

.page-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(120deg, rgba(239, 107, 8, 0.16) 0%, rgba(239, 107, 8, 0) 18%),
        linear-gradient(300deg, rgba(25, 88, 209, 0.18) 0%, rgba(25, 88, 209, 0) 20%),
        linear-gradient(180deg, #ecf1f7 0%, #f7faff 100%);
    overflow: hidden;
}

.page-bg::before,
.page-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.page-bg::before {
    background:
        linear-gradient(135deg, rgba(239,107,8,0.18) 0 7%, transparent 7% 100%),
        linear-gradient(225deg, rgba(25,88,209,0.15) 0 7%, transparent 7% 100%),
        linear-gradient(45deg, rgba(36,180,90,0.10) 0 6%, transparent 6% 100%),
        linear-gradient(315deg, rgba(228,38,52,0.10) 0 6%, transparent 6% 100%);
    filter: blur(16px);
    opacity: .8;
}

.page-bg::after {
    inset: 7% 8%;
    border: 2px solid rgba(255,255,255,0.42);
    border-radius: 32px;
    box-shadow: inset 0 0 0 1px rgba(25, 88, 209, 0.05);
    background:
        linear-gradient(90deg, transparent 0 49.7%, rgba(255,255,255,0.65) 49.7% 50.3%, transparent 50.3% 100%),
        linear-gradient(0deg, transparent 0 16%, rgba(255,255,255,0.26) 16% 16.35%, transparent 16.35% 83.65%, rgba(255,255,255,0.26) 83.65% 84%, transparent 84% 100%);
    opacity: .45;
}

.topbar {
    max-width: 1320px;
    margin: 22px auto;
    padding: 20px 24px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.90);
    border: 1px solid rgba(255,255,255,0.7);
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 18px;
}

.logo-image {
    width: 94px;
    height: 132px;
    object-fit: cover;
    border-radius: 18px;
    box-shadow: 0 16px 28px rgba(16, 25, 44, 0.18);
    border: 3px solid rgba(255,255,255,0.92);
    background: white;
}

.brand h1,
.brand p,
h1,
h2,
h3,
p {
    margin: 0;
}

.brand h1 {
    font-size: 32px;
    line-height: 1.1;
}

.brand p {
    margin-top: 5px;
    color: var(--muted);
    font-size: 18px;
}

.container {
    max-width: 1320px;
    margin: 0 auto 70px;
    padding: 0 18px;
}

.alert {
    border-radius: 18px;
    padding: 16px 18px;
    margin: 0 0 18px;
    font-weight: 700;
    box-shadow: var(--shadow);
}

.success {
    background: #ddf7e4;
    border: 1px solid #99e0ac;
    color: #166534;
}

.error {
    background: #ffe7e7;
    border: 1px solid #ffb5b5;
    color: #a52626;
}

.auth-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
    align-items: stretch;
}

.card,
.welcome-card,
.album-block {
    background: var(--card);
    border: 1px solid rgba(255,255,255,0.78);
    border-radius: 30px;
    box-shadow: var(--shadow);
}

.auth-card {
    padding: 28px;
}

.auth-head {
    margin-bottom: 18px;
}

.auth-kicker,
.section-kicker {
    display: inline-block;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--blue);
    margin-bottom: 10px;
}

.auth-card h2,
.section-head h2,
.album-block-head h2,
.welcome-card h2 {
    font-size: 30px;
    line-height: 1.12;
}

.auth-form label {
    display: block;
    margin: 18px 0 8px;
    font-size: 18px;
    font-weight: 800;
}

input[type="text"],
input[type="email"],
input[type="password"] {
    width: 100%;
    border-radius: 18px;
    border: 2px solid #cfd7e3;
    background: rgba(255,255,255,0.84);
    padding: 17px 18px;
    font-size: 18px;
    color: var(--text);
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

input:focus {
    border-color: rgba(93, 99, 255, 0.75);
    box-shadow: 0 0 0 4px rgba(93, 99, 255, 0.08);
}

.auth-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
}

button,
.logout,
.hero-link {
    border: none;
    text-decoration: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    padding: 14px 22px;
    font-weight: 800;
    font-size: 16px;
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

button:hover,
.logout:hover,
.hero-link:hover {
    transform: translateY(-1px);
}

.primary-btn {
    min-width: 180px;
    color: white;
    background: linear-gradient(135deg, #6c5ce7, #5b54e7);
    box-shadow: 0 14px 28px rgba(108, 92, 231, 0.22);
}

.logout {
    background: var(--navy);
    color: white;
}

.auth-switch {
    margin-top: 28px;
    font-size: 18px;
    color: var(--muted);
}

.auth-switch a {
    color: #717e9a;
    font-weight: 500;
    text-decoration: none;
}

.auth-switch a:hover {
    color: var(--blue);
}

.welcome-card {
    margin-bottom: 24px;
    padding: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background:
        linear-gradient(135deg, rgba(16,25,44,0.95), rgba(25,88,209,0.94) 55%, rgba(239,107,8,0.92));
    color: white;
}

.welcome-card .section-kicker {
    color: rgba(255,255,255,0.72);
}

.welcome-card p {
    margin-top: 8px;
    max-width: 760px;
    color: rgba(255,255,255,0.88);
    font-size: 17px;
    line-height: 1.55;
}

.hero-link {
    background: white;
    color: var(--navy);
    white-space: nowrap;
}

.matches {
    padding: 28px;
    margin-bottom: 24px;
}

.section-head,
.album-block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.match-list {
    display: grid;
    gap: 14px;
}

.match-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 18px;
    border-radius: 22px;
    background: #f7faff;
    border: 1px solid #d7e0ed;
}

.match-copy {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.match-item strong {
    background: linear-gradient(135deg, #ffcf2e, #ffb300);
    color: #161616;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 15px;
}

.small-btn {
    background: linear-gradient(135deg, var(--orange), var(--red));
    color: white;
    white-space: nowrap;
}

.muted {
    color: var(--muted);
    font-size: 16px;
    line-height: 1.55;
}

.album-block {
    padding: 28px;
    margin-bottom: 24px;
}

.special-block {
    background: linear-gradient(135deg, rgba(255,248,214,0.96), rgba(255,255,255,0.96));
}

.country-list {
    display: grid;
    gap: 18px;
}

.country-card {
    --c1: #1958d1;
    --c2: #ef6b08;
    --c3: #24b45a;
    --c4: #e42634;
    position: relative;
    overflow: hidden;
    padding: 22px;
    border-radius: 28px;
    border: 1px solid #e3e8f0;
    background: rgba(255,255,255,0.92);
    box-shadow: 0 16px 32px rgba(16,25,44,0.07);
}

.country-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 8px;
    background: linear-gradient(90deg, var(--c1), var(--c2), var(--c3), var(--c4));
}

.country-card.team {
    background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(247,250,255,0.98));
}

.country-card.special {
    background: linear-gradient(135deg, rgba(251, 248, 232, 0.98), rgba(255,255,255,0.96));
}

.country-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 16px;
    margin-bottom: 18px;
    border-bottom: 2px dashed #d5ddea;
}

.country-title-wrap {
    min-width: 0;
}

.country-title-line {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.country-flag {
    font-size: 34px;
    line-height: 1;
}

.country-title-line h3 {
    font-size: 26px;
    line-height: 1.14;
}

.group-meta {
    margin-top: 8px;
    color: var(--c1);
    font-size: 17px;
    font-weight: 800;
}

.range-pill {
    background: linear-gradient(135deg, var(--c1), var(--c2));
    color: white;
    border-radius: 999px;
    padding: 10px 14px;
    font-weight: 900;
    font-size: 15px;
    white-space: nowrap;
    box-shadow: 0 10px 24px rgba(16,25,44,0.12);
}

.special-preview {
    margin-bottom: 18px;
    display: inline-flex;
    padding: 10px;
    border-radius: 22px;
    background: rgba(255,255,255,0.86);
    border: 1px solid #dbe3ef;
    box-shadow: 0 10px 24px rgba(16,25,44,0.08);
}

.special-preview img {
    display: block;
    width: 210px;
    max-width: 100%;
    border-radius: 16px;
}

.stickers-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.sticker-box {
    border-radius: 22px;
    border: 2px solid #d6deea;
    padding: 14px;
    background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(240,245,252,0.96));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.95);
}

.sticker-box:nth-child(4n + 1) { border-top: 7px solid var(--c1); }
.sticker-box:nth-child(4n + 2) { border-top: 7px solid var(--c2); }
.sticker-box:nth-child(4n + 3) { border-top: 7px solid var(--c3); }
.sticker-box:nth-child(4n + 4) { border-top: 7px solid var(--c4); }

.sticker-code {
    font-size: 18px;
    font-weight: 900;
    margin-bottom: 12px;
}

.check {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 16px;
    font-size: 15px;
    font-weight: 800;
    border: 1px solid #dde5ef;
    background: rgba(255,255,255,0.82);
}

.check input {
    width: 18px;
    height: 18px;
    margin: 0;
}

.check.duplicate {
    color: var(--c1);
    box-shadow: inset 5px 0 0 var(--c1);
}

.check.missing {
    color: var(--c2);
    box-shadow: inset 5px 0 0 var(--c2);
}

.save-btn {
    width: 100%;
    position: sticky;
    bottom: 18px;
    margin-top: 6px;
    padding: 19px 22px;
    font-size: 19px;
    color: #171717;
    background: linear-gradient(135deg, #ffd53a, #ff8b1f);
    box-shadow: 0 20px 42px rgba(255, 139, 31, 0.28);
}

.accept-page {
    max-width: 760px;
    margin-top: 64px;
}

.back-link {
    display: inline-flex;
    margin-top: 16px;
    text-decoration: none;
    color: white;
    background: var(--navy);
    border-radius: 16px;
    padding: 12px 16px;
    font-weight: 800;
}

@media (max-width: 1100px) {
    .stickers-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 920px) {
    .auth-grid {
        grid-template-columns: 1fr;
    }

    .topbar,
    .welcome-card,
    .country-header,
    .match-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .brand h1 {
        font-size: 28px;
    }

    .brand p {
        font-size: 16px;
    }

    .hero-link,
    .logout {
        align-self: stretch;
    }

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

@media (max-width: 640px) {
    .container {
        padding: 0 14px;
    }

    .topbar,
    .auth-card,
    .matches,
    .album-block,
    .country-card,
    .welcome-card {
        padding: 20px;
    }

    .logo-image {
        width: 76px;
        height: 108px;
    }

    .auth-card h2,
    .section-head h2,
    .album-block-head h2,
    .welcome-card h2,
    .country-title-line h3 {
        font-size: 24px;
    }

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

    .range-pill {
        font-size: 14px;
    }
}

@media (max-width: 430px) {
    .stickers-grid {
        grid-template-columns: 1fr;
    }

    .primary-btn,
    .small-btn,
    .hero-link,
    .logout {
        width: 100%;
    }
}

/* Single authentication card mode */
.auth-shell {
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
}

.single-auth-card {
    width: 100%;
    min-height: auto;
}

.single-auth-card .primary-btn {
    min-width: 210px;
}

.single-auth-card .auth-switch {
    margin-top: 28px;
}

.single-auth-card .auth-switch a {
    font-weight: 800;
}

@media (max-width: 640px) {
    .auth-shell {
        max-width: 100%;
    }

    .single-auth-card .primary-btn {
        width: 100%;
    }
}

/* Dashboard statistics */
.stats-card {
    margin-bottom: 24px;
    padding: 28px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(255,255,255,0.78);
    box-shadow: 0 20px 55px rgba(16, 25, 44, 0.12);
}

.stats-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
}

.stats-header h2 {
    margin: 0;
    font-size: 30px;
    line-height: 1.12;
}

.stats-total {
    background: #10192c;
    color: #ffffff;
    padding: 12px 16px;
    border-radius: 999px;
    font-weight: 800;
    white-space: nowrap;
}

.stats-total strong {
    color: #ffd53a;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.stat-box {
    position: relative;
    overflow: hidden;
    padding: 20px;
    min-height: 150px;
    border-radius: 24px;
    border: 1px solid #dbe3ef;
    background: linear-gradient(135deg, #ffffff, #f7faff);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.95);
}

.stat-box::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 7px;
    background: linear-gradient(90deg, #1958d1, #ef6b08, #24b45a, #e42634);
}

.stat-label {
    display: block;
    margin-bottom: 12px;
    color: #6b7280;
    font-size: 14px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.stat-box strong {
    display: block;
    color: #111827;
    font-size: 34px;
    line-height: 1.1;
    margin-bottom: 8px;
}

.stat-box small {
    color: #6b7280;
    font-size: 15px;
    font-weight: 700;
}

.duplicate-stat::before {
    background: linear-gradient(90deg, #1958d1, #2f80ed);
}

.missing-stat::before {
    background: linear-gradient(90deg, #ef6b08, #ffd53a);
}

.country-stat::before {
    background: linear-gradient(90deg, #24b45a, #1958d1);
}

/* Multi-request exchange panels */
.received-requests {
    padding: 28px;
    margin-bottom: 24px;
}

.received-list,
.grouped-match-list {
    display: grid;
    gap: 14px;
}

.received-item,
.match-group-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px;
    border-radius: 24px;
    background: #f7faff;
    border: 1px solid #d7e0ed;
}

.received-main,
.match-group-main {
    min-width: 0;
    display: grid;
    gap: 12px;
    flex: 1;
}

.requester-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.requester-info strong {
    font-size: 17px;
    color: #111827;
}

.requester-info span {
    color: #6b7280;
    font-weight: 700;
}

.request-code-list,
.match-code-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.request-code-chip,
.match-code-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 12px;
    border-radius: 999px;
    border: 1px solid #dbe3ef;
    background: #ffffff;
    color: #111827;
    font-weight: 900;
    font-size: 14px;
}

.request-code-chip input,
.match-code-chip input {
    width: 16px;
    height: 16px;
    margin: 0;
}

.selectable-chip {
    cursor: pointer;
    box-shadow: inset 4px 0 0 #1958d1;
}

.sent-chip {
    color: #6b7280;
    background: #eef2f7;
    box-shadow: inset 4px 0 0 #94a3b8;
}

.already-sent-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 14px;
    border-radius: 999px;
    background: #eef2f7;
    color: #64748b;
    font-weight: 900;
    white-space: nowrap;
}

.accept-btn {
    background: linear-gradient(135deg, #24b45a, #12813d);
}

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

@media (max-width: 760px) {
    .received-item,
    .match-group-item {
        flex-direction: column;
        align-items: stretch;
    }

    .received-item .small-btn,
    .match-group-item .small-btn,
    .already-sent-badge {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .stats-card,
    .received-requests {
        padding: 20px;
    }

    .stats-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .stats-total {
        width: 100%;
        text-align: center;
    }

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

    .stat-box strong {
        font-size: 30px;
    }
}

/* Request history by user */
.request-history {
    padding: 28px;
    margin-bottom: 24px;
}

.history-list {
    display: grid;
    gap: 16px;
}

.history-item {
    padding: 20px;
    border-radius: 24px;
    background: #f7faff;
    border: 1px solid #d7e0ed;
}

.history-user {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.history-user strong {
    display: block;
    color: #111827;
    font-size: 19px;
    margin-bottom: 6px;
}

.history-user span {
    display: inline-flex;
    margin-right: 10px;
    margin-bottom: 6px;
    color: #6b7280;
    font-weight: 700;
}

.history-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.history-summary span {
    display: block;
    padding: 11px 12px;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid #dbe3ef;
    color: #6b7280;
    font-size: 14px;
    font-weight: 800;
}

.history-summary b {
    color: #111827;
    font-size: 17px;
}

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

.history-column {
    padding: 16px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid #dbe3ef;
}

.history-column h4 {
    margin: 0 0 12px;
    color: #111827;
    font-size: 16px;
}

.history-empty {
    color: #94a3b8;
    font-weight: 700;
    margin: 0;
}

.history-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.history-chip {
    display: inline-flex;
    align-items: center;
    padding: 8px 11px;
    border-radius: 999px;
    border: 1px solid #dbe3ef;
    background: #f8fafc;
    color: #334155;
    font-size: 13px;
    font-weight: 900;
}

.history-chip.status-pending {
    background: #fff7df;
    color: #b45309;
    border-color: #f4d47e;
}

.history-chip.status-accepted {
    background: #def7e6;
    color: #166534;
    border-color: #9bdfaf;
}

.history-chip.status-rejected {
    background: #fee2e2;
    color: #991b1b;
    border-color: #fecaca;
}

@media (max-width: 900px) {
    .history-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

@media (max-width: 640px) {
    .request-history {
        padding: 20px;
    }

    .history-summary {
        grid-template-columns: 1fr;
    }
}

/* Grouped request history by album order */
.history-album-groups {
    display: grid;
    gap: 14px;
}

.history-album-section {
    padding: 12px;
    border-radius: 18px;
    background: #f8fbff;
    border: 1px solid #e1e8f2;
}

.history-album-title {
    display: inline-flex;
    align-items: center;
    margin-bottom: 10px;
    padding: 7px 11px;
    border-radius: 999px;
    background: #10192c;
    color: #ffffff;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.history-team-row {
    padding: 10px 0;
    border-top: 1px dashed #d6deea;
}

.history-team-row:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.history-team-row:last-child {
    padding-bottom: 0;
}

.history-team-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: #111827;
    font-size: 14px;
}

.history-team-title span {
    font-size: 18px;
    line-height: 1;
}

.history-team-title strong {
    font-size: 14px;
    font-weight: 900;
}

.history-column {
    align-self: start;
}

@media (max-width: 640px) {
    .history-album-section {
        padding: 10px;
    }

    .history-chip {
        font-size: 12px;
        padding: 7px 10px;
    }
}

/* History management, transfer reversal, and album search */
.history-section-head {
    align-items: flex-start;
}

.ghost-danger-btn {
    border: 1px solid #fecaca;
    background: #fff5f5;
    color: #b91c1c;
    box-shadow: none;
    padding: 11px 15px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 900;
}

.ghost-danger-btn:hover {
    background: #fee2e2;
    box-shadow: 0 10px 22px rgba(185, 28, 28, 0.12);
}

.small-history-btn {
    white-space: nowrap;
    margin-top: 0;
}

.history-chip-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    margin: 2px 0;
}

.reverse-transfer-btn {
    margin: 0;
    padding: 7px 10px;
    border-radius: 999px;
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fed7aa;
    box-shadow: none;
    font-size: 12px;
    font-weight: 900;
}

.reverse-transfer-btn:hover {
    background: #ffedd5;
    box-shadow: 0 8px 18px rgba(194, 65, 12, 0.12);
}

.history-chip.status-reversed {
    background: #f3f4f6;
    color: #4b5563;
    border-color: #d1d5db;
}

.album-search-card {
    margin-bottom: 24px;
    padding: 28px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(255,255,255,0.78);
    box-shadow: 0 20px 55px rgba(16, 25, 44, 0.12);
    display: grid;
    grid-template-columns: 1fr minmax(260px, 420px);
    gap: 22px;
    align-items: center;
}

.album-search-card h2 {
    margin: 0;
    font-size: 30px;
    line-height: 1.12;
}

.album-search-card p {
    margin-top: 8px;
    color: #6b7280;
    font-size: 16px;
    line-height: 1.5;
}

#albumSearchInput {
    width: 100%;
    border-radius: 18px;
    border: 2px solid #cfd7e3;
    background: #ffffff;
    padding: 17px 18px;
    font-size: 18px;
    font-weight: 800;
    color: #111827;
    text-transform: uppercase;
    outline: none;
}

#albumSearchInput:focus {
    border-color: #1958d1;
    box-shadow: 0 0 0 5px rgba(25, 88, 209, 0.10);
}

.sticker-box.search-soft-hit {
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.28);
}

.sticker-box.search-hit {
    border-color: #f59e0b;
    box-shadow: 0 0 0 5px rgba(245, 158, 11, 0.30), 0 18px 35px rgba(245, 158, 11, 0.20);
    transform: scale(1.02);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

@media (max-width: 920px) {
    .album-search-card {
        grid-template-columns: 1fr;
    }

    .history-user {
        gap: 14px;
    }
}

@media (max-width: 640px) {
    .album-search-card {
        padding: 20px;
    }

    .history-chip-wrap {
        width: 100%;
        justify-content: space-between;
    }

    .reverse-transfer-btn {
        flex-shrink: 0;
    }
}

/* Updated album dropdown search */
.album-search-controls {
    display: grid;
    grid-template-columns: 1fr 180px auto;
    gap: 12px;
    align-items: end;
}

.album-search-controls label {
    font-size: 13px;
    font-weight: 900;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 6px;
}

.album-search-controls select {
    width: 100%;
    border-radius: 18px;
    border: 2px solid #cfd7e3;
    background: #ffffff;
    padding: 16px 18px;
    font-size: 17px;
    font-weight: 800;
    color: #111827;
    outline: none;
    min-height: 60px;
}

.album-search-controls select:focus {
    border-color: #1958d1;
    box-shadow: 0 0 0 5px rgba(25, 88, 209, 0.10);
}

.album-search-controls select:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.album-search-btn {
    min-height: 60px;
    margin: 0;
    padding: 16px 24px;
    white-space: nowrap;
    color: #ffffff;
    background: linear-gradient(135deg, #1958d1, #6c5ce7);
    box-shadow: 0 14px 28px rgba(25, 88, 209, 0.18);
}

.album-search-status {
    grid-column: 1 / -1;
    margin: 0;
    min-height: 22px;
    color: #6b7280;
    font-size: 15px;
    font-weight: 800;
}

.album-search-status.is-error {
    color: #b91c1c;
}

.album-search-status.is-success {
    color: #166534;
}

.country-card.country-search-hit {
    border-color: #1958d1;
    box-shadow: 0 0 0 5px rgba(25, 88, 209, 0.12), 0 22px 42px rgba(25, 88, 209, 0.16);
}

@media (max-width: 920px) {
    .album-search-controls {
        grid-template-columns: 1fr;
    }

    .album-search-btn {
        width: 100%;
    }
}

.album-search-field {
    min-width: 0;
}

/* PDF export controls in album search */
.album-search-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.album-pdf-actions {
    display: grid;
    gap: 7px;
    justify-items: end;
    flex-shrink: 0;
}

.pdf-export-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 13px 18px;
    border-radius: 16px;
    background: linear-gradient(135deg, #10192c, #1958d1);
    color: #ffffff;
    text-decoration: none;
    font-weight: 900;
    box-shadow: 0 14px 28px rgba(16, 25, 44, 0.18);
    white-space: nowrap;
}

.album-pdf-actions small {
    color: #6b7280;
    font-weight: 800;
    text-align: right;
}

@media (max-width: 760px) {
    .album-search-top {
        flex-direction: column;
        align-items: stretch;
    }

    .album-pdf-actions {
        justify-items: stretch;
    }

    .album-pdf-actions small {
        text-align: left;
    }

    .pdf-export-btn {
        width: 100%;
    }
}

/* Collapsible history and PDF export */
.history-intro {
    margin-top: 8px;
    color: #6b7280;
    font-weight: 700;
    line-height: 1.45;
}

.history-head-actions,
.history-user-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.history-pdf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 15px;
    border-radius: 14px;
    background: linear-gradient(135deg, #1958d1, #10192c);
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 900;
    box-shadow: 0 12px 26px rgba(25, 88, 209, 0.18);
}

.history-pdf-btn:hover {
    transform: translateY(-1px);
}

.small-history-pdf-btn {
    padding: 10px 13px;
    box-shadow: none;
}

.history-accordion-list {
    gap: 12px;
}

.history-details {
    padding: 0;
    overflow: hidden;
}

.history-details[open] {
    background: #ffffff;
}

.history-summary-user {
    cursor: pointer;
    list-style: none;
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(320px, 2fr) auto;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
}

.history-summary-user::-webkit-details-marker {
    display: none;
}

.history-user-compact strong {
    display: block;
    color: #111827;
    font-size: 20px;
    margin-bottom: 6px;
}

.history-user-compact span {
    display: block;
    color: #6b7280;
    font-weight: 700;
    font-size: 14px;
    margin-top: 3px;
}

.history-summary-mini {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.history-summary-mini span {
    display: block;
    padding: 10px 11px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid #dbe3ef;
    color: #6b7280;
    font-size: 13px;
    font-weight: 800;
}

.history-summary-mini b {
    display: block;
    margin-top: 4px;
    color: #111827;
    font-size: 18px;
}

.history-open-indicator {
    padding: 9px 12px;
    border-radius: 999px;
    background: #eef4ff;
    color: #1958d1;
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
}

.history-details[open] .history-open-indicator {
    background: #10192c;
    color: #ffffff;
}

.history-details[open] .history-open-indicator {
    font-size: 0;
}

.history-details[open] .history-open-indicator::before {
    content: "Zatvori";
    font-size: 13px;
}

.history-details-body {
    padding: 0 20px 20px;
    border-top: 1px solid #dbe3ef;
}

.history-user-actions {
    justify-content: flex-end;
    margin: 16px 0;
}

@media (max-width: 1050px) {
    .history-summary-user {
        grid-template-columns: 1fr;
    }

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

    .history-open-indicator {
        justify-self: flex-start;
    }
}

@media (max-width: 640px) {
    .history-head-actions,
    .history-user-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .history-pdf-btn,
    .history-head-actions form,
    .history-user-actions form,
    .ghost-danger-btn {
        width: 100%;
    }

    .history-summary-mini {
        grid-template-columns: 1fr;
    }

    .history-summary-user {
        padding: 16px;
    }

    .history-details-body {
        padding: 0 16px 16px;
    }
}

/* PDF format selector */
.pdf-format-form label {
    color: #111827;
    font-weight: 900;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .08em;
    text-align: right;
}

.pdf-format-row {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.pdf-format-row select {
    min-height: 52px;
    min-width: 170px;
    border-radius: 16px;
    border: 2px solid #d6deea;
    background: #ffffff;
    color: #111827;
    padding: 0 14px;
    font-size: 15px;
    font-weight: 900;
    outline: none;
}

.pdf-format-row button.pdf-export-btn {
    border: none;
    cursor: pointer;
}

@media (max-width: 760px) {
    .pdf-format-form label {
        text-align: left;
    }

    .pdf-format-row {
        flex-direction: column;
    }

    .pdf-format-row select {
        width: 100%;
    }
}

/* SEO landing block for Croatia-wide indexing */
.seo-landing {
    margin-top: 26px;
    padding: 28px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(255,255,255,0.78);
    box-shadow: 0 20px 55px rgba(16, 25, 44, 0.12);
}

.seo-landing-main h2 {
    margin: 0 0 14px;
    max-width: 980px;
    font-size: 34px;
    line-height: 1.12;
    color: #111827;
}

.seo-landing-main p {
    max-width: 980px;
    margin: 0 0 12px;
    color: #4b5563;
    font-size: 17px;
    line-height: 1.65;
}

.seo-benefits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 22px 0;
}

.seo-benefits div {
    padding: 18px;
    border-radius: 22px;
    border: 1px solid #dbe3ef;
    background: linear-gradient(135deg, #ffffff, #f7faff);
}

.seo-benefits strong {
    display: block;
    margin-bottom: 8px;
    color: #111827;
    font-size: 18px;
}

.seo-benefits span {
    display: block;
    color: #6b7280;
    line-height: 1.5;
}

.seo-faq {
    display: grid;
    gap: 10px;
    margin-top: 20px;
}

.seo-faq h3 {
    margin: 0 0 6px;
    font-size: 24px;
}

.seo-faq details {
    border: 1px solid #dbe3ef;
    border-radius: 18px;
    background: #ffffff;
    padding: 14px 16px;
}

.seo-faq summary {
    cursor: pointer;
    font-weight: 900;
    color: #111827;
}

.seo-faq p {
    margin: 10px 0 0;
    color: #4b5563;
    line-height: 1.55;
}

@media (max-width: 900px) {
    .seo-benefits {
        grid-template-columns: 1fr;
    }

    .seo-landing-main h2 {
        font-size: 27px;
    }
}

.form-select {
    width: 100%;
    border-radius: 18px;
    border: 2px solid #cfd7e3;
    background: rgba(255,255,255,0.92);
    padding: 17px 18px;
    font-size: 18px;
    color: #111827;
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.form-select:focus {
    border-color: rgba(93, 99, 255, 0.75);
    box-shadow: 0 0 0 4px rgba(93, 99, 255, 0.08);
}

.field-note {
    display: block;
    margin-top: 8px;
    color: #6b7280;
    font-weight: 700;
    line-height: 1.4;
}

.auth-help-box,
.legal-note {
    border-radius: 20px;
    border: 1px solid #dbe3ef;
    background: linear-gradient(135deg, #f7faff, #ffffff);
    padding: 16px 18px;
    margin: 0 0 20px;
    color: #4b5563;
    line-height: 1.55;
}

.auth-help-box strong,
.legal-note strong {
    display: block;
    color: #111827;
    margin-bottom: 6px;
}

.auth-help-box p {
    margin: 0;
}

.legal-note {
    max-width: 720px;
    margin: 20px auto 0;
}

.city-card {
    margin-bottom: 24px;
    padding: 24px 28px;
    border-radius: 30px;
    background: rgba(255,255,255,0.94);
    border: 1px solid rgba(255,255,255,0.78);
    box-shadow: 0 20px 55px rgba(16, 25, 44, 0.12);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.city-card h2 {
    margin: 0;
    font-size: 28px;
}

.city-card p {
    margin-top: 8px;
    color: #6b7280;
    line-height: 1.5;
}

.city-form {
    min-width: 360px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.city-form .form-select {
    min-width: 220px;
}

@media (max-width: 760px) {
    .city-card,
    .city-form {
        flex-direction: column;
        align-items: stretch;
    }

    .city-form {
        min-width: 0;
        width: 100%;
    }
}

.consent-check {
    display: flex !important;
    align-items: flex-start;
    gap: 12px;
    margin-top: 18px !important;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid #dbe3ef;
    background: linear-gradient(135deg, #f7faff, #ffffff);
    color: #4b5563;
    font-size: 14px !important;
    line-height: 1.45;
    font-weight: 700 !important;
}

.consent-check input {
    width: 20px;
    height: 20px;
    margin: 2px 0 0;
    flex: 0 0 auto;
}

.consent-check span {
    display: block;
}

.profile-form {
    min-width: 620px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.profile-field {
    display: grid;
    gap: 7px;
    min-width: 220px;
    flex: 1 1 220px;
}

.profile-field label {
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #6b7280;
}

.profile-input {
    width: 100%;
    border-radius: 18px;
    border: 2px solid #cfd7e3;
    background: rgba(255,255,255,0.92);
    padding: 17px 18px;
    font-size: 18px;
    color: #111827;
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.profile-input:focus {
    border-color: rgba(93, 99, 255, 0.75);
    box-shadow: 0 0 0 4px rgba(93, 99, 255, 0.08);
}

.compact-consent {
    flex: 1 1 100%;
    margin: 4px 0 0 !important;
}

.contact-current {
    margin-top: 2px !important;
}

@media (max-width: 980px) {
    .profile-form {
        min-width: 0;
        width: 100%;
    }
}

/* Safety and legal update */
.safety-card,
.legal-page .legal-content {
    margin-bottom: 24px;
    padding: 28px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255,255,255,0.78);
    box-shadow: 0 20px 55px rgba(16, 25, 44, 0.12);
}

.safety-card h2,
.legal-content h2 {
    margin: 0 0 12px;
    font-size: 30px;
    color: #111827;
}

.safety-card p,
.legal-content p,
.legal-content li {
    color: #4b5563;
    font-size: 16px;
    line-height: 1.65;
}

.safety-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.safety-links a,
.legal-note a,
.match-safety-note a {
    color: #1958d1;
    font-weight: 800;
    text-decoration: none;
}

.safety-links a {
    border-radius: 999px;
    padding: 10px 14px;
    background: #eef4ff;
    border: 1px solid #cfe0ff;
}

.safety-consent-box {
    margin: 18px 0 8px;
    padding: 16px 18px;
    border-radius: 18px;
    background: #fff8e6;
    border: 1px solid #ffd86b;
}

.safety-consent-box strong {
    display: block;
    color: #92400e;
    margin-bottom: 6px;
}

.safety-consent-box p {
    margin: 0;
    color: #6b4f00;
    line-height: 1.55;
}

.match-safety-note {
    margin: 12px 0 0;
    padding: 12px 14px;
    border-radius: 16px;
    background: #fff8e6;
    border: 1px solid #ffe1a3;
    color: #6b4f00;
    font-size: 14px;
    line-height: 1.45;
}

.legal-content ul {
    margin: 14px 0;
    padding-left: 22px;
}

.legal-content textarea,
textarea.profile-input {
    min-height: 140px;
    resize: vertical;
}

@media (max-width: 640px) {
    .safety-card,
    .legal-page .legal-content {
        padding: 20px;
    }
}

/* Platform navbar update */
.topbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.topbar-link {
    text-decoration: none;
    color: #1b56d1;
    background: rgba(25, 88, 209, 0.08);
    border: 1px solid rgba(25, 88, 209, 0.14);
    padding: 10px 13px;
    border-radius: 14px;
    font-weight: 800;
    font-size: 14px;
}

.nav-toggle {
    display: none;
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 16px;
    background: #10192c;
    color: #fff;
    font-size: 24px;
    line-height: 1;
    box-shadow: none;
}

.platform-nav {
    max-width: 1320px;
    margin: -8px auto 22px;
    padding: 12px;
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(255,255,255,0.78);
    box-shadow: 0 18px 48px rgba(16,25,44,0.10);
    display: flex;
    align-items: center;
    gap: 10px;
    overflow-x: auto;
}

.platform-nav-link {
    position: relative;
    margin: 0;
    appearance: none;
    border: 1px solid #d8e0ec;
    background: #ffffff;
    color: #10192c;
    padding: 13px 18px;
    border-radius: 18px;
    font-weight: 900;
    font-size: 15px;
    white-space: nowrap;
    box-shadow: none;
}

.platform-nav-link:hover {
    box-shadow: 0 10px 24px rgba(16,25,44,0.10);
}

.platform-nav-link.active {
    background: linear-gradient(135deg, #10192c, #1b56d1);
    color: #ffffff;
    border-color: transparent;
}

.primary-nav-link {
    background: linear-gradient(135deg, #ffd53a, #ff8b1f);
    color: #10192c;
    border-color: rgba(255, 139, 31, 0.35);
}

.primary-nav-link.active {
    background: linear-gradient(135deg, #ff8b1f, #e42634);
    color: #ffffff;
}

.nav-badge {
    min-width: 23px;
    height: 23px;
    margin-left: 8px;
    padding: 0 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #24b45a;
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
    vertical-align: middle;
    box-shadow: 0 8px 18px rgba(36,180,90,0.25);
}

.nav-badge.danger {
    background: #e42634;
    box-shadow: 0 8px 18px rgba(228,38,52,0.25);
}

.nav-badge.neutral {
    background: #6b7280;
    box-shadow: 0 8px 18px rgba(107,114,128,0.18);
}

.platform-section {
    display: none !important;
}

.platform-section.active {
    display: block !important;
}

form.platform-section.active,
.stickers-form.platform-section.active {
    display: block !important;
}

.album-search-card.platform-section.active {
    display: block !important;
}

@media (max-width: 920px) {
    .topbar-actions {
        width: 100%;
        justify-content: space-between;
    }

    .topbar-link {
        display: none;
    }

    .nav-toggle {
        display: inline-flex;
    }

    .platform-nav {
        display: none;
        margin: -6px 14px 18px;
        flex-direction: column;
        align-items: stretch;
        overflow: visible;
    }

    .platform-nav.is-open {
        display: flex;
    }

    .platform-nav-link {
        width: 100%;
        justify-content: space-between;
    }
}

@media (min-width: 921px) {
    .platform-nav {
        position: sticky;
        top: 10px;
        z-index: 50;
    }
}

/* Final professional navigation and match layout update */
.topbar {
    position: sticky;
    top: 0;
    z-index: 300;
    backdrop-filter: blur(18px);
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px;
    width: 54px;
    height: 54px;
    border-radius: 18px;
    background: #10192c;
    color: #ffffff;
    border: 2px solid transparent;
    box-shadow: 0 12px 30px rgba(16,25,44,0.16);
}

.nav-toggle-line {
    display: block;
    width: 24px;
    height: 3px;
    border-radius: 999px;
    background: currentColor;
    transition: transform .2s ease, opacity .2s ease;
}

.nav-toggle.is-open {
    background: #ffffff;
    color: #10192c;
    border-color: #ffb000;
}

.nav-toggle.is-open .nav-toggle-line:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.nav-toggle.is-open .nav-toggle-line:nth-child(2) {
    opacity: 0;
}

.nav-toggle.is-open .nav-toggle-line:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

.platform-nav {
    max-width: 1320px;
    margin: -8px auto 22px;
    padding: 0 18px;
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    position: sticky;
    top: 112px;
    z-index: 250;
}

.platform-nav-inner {
    padding: 12px;
    border-radius: 26px;
    background: rgba(255,255,255,0.96);
    border: 1px solid rgba(255,255,255,0.78);
    box-shadow: 0 18px 48px rgba(16,25,44,0.10);
    display: flex;
    align-items: center;
    gap: 10px;
    overflow-x: auto;
}

.platform-nav-link,
.platform-nav-anchor,
.logout-nav-link {
    min-height: 48px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.logout-nav-link {
    background: #10192c;
    color: #ffffff;
    border-color: #10192c;
    margin-left: auto;
}

.logout-nav-link:hover {
    color: #ffffff;
}

.match-section-head {
    align-items: flex-end;
}

.section-description {
    margin-top: 8px;
    color: #6b7280;
    font-size: 16px;
    line-height: 1.5;
}

.section-count-pill {
    background: linear-gradient(135deg, #24b45a, #1b56d1);
    color: #ffffff;
    padding: 12px 16px;
    border-radius: 999px;
    font-weight: 900;
    white-space: nowrap;
    box-shadow: 0 12px 28px rgba(27,86,209,0.16);
}

.empty-state-card {
    padding: 22px;
    border-radius: 24px;
    border: 1px solid #d7e0ed;
    background: #f7faff;
}

.empty-state-card strong {
    display: block;
    margin-bottom: 8px;
    font-size: 18px;
}

.empty-state-card p {
    color: #6b7280;
    line-height: 1.55;
}

.match-board {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.match-person-card {
    position: relative;
    display: grid;
    gap: 18px;
    padding: 20px;
    border-radius: 28px;
    background: linear-gradient(135deg, #ffffff, #f7faff);
    border: 1px solid #d7e0ed;
    box-shadow: 0 18px 40px rgba(16,25,44,0.08);
}

.match-person-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 7px;
    background: linear-gradient(90deg, #1958d1, #ef6b08, #24b45a, #e42634);
    border-radius: 28px 28px 0 0;
}

.match-person-header {
    display: flex;
    align-items: center;
    gap: 14px;
}

.match-person-avatar {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    background: linear-gradient(135deg, #ffd53a, #ff8b1f);
    color: #10192c;
    font-size: 22px;
    font-weight: 950;
    box-shadow: 0 12px 24px rgba(255,139,31,0.20);
}

.match-person-info {
    min-width: 0;
    display: grid;
    gap: 4px;
    flex: 1;
}

.match-person-info strong {
    font-size: 20px;
    color: #10192c;
}

.match-person-info span {
    color: #6b7280;
    font-weight: 800;
    line-height: 1.35;
}

.match-available-badge,
.already-sent-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 950;
    white-space: nowrap;
}

.match-available-badge {
    background: #e0f8e7;
    color: #176b35;
    border: 1px solid #9be2af;
}

.already-sent-badge {
    background: #eef3fb;
    color: #6b7280;
    border: 1px solid #d3ddeb;
}

.match-subtitle {
    color: #10192c;
    font-size: 14px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.muted-subtitle {
    color: #8b95a7;
}

.match-code-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
    gap: 10px;
}

.match-code-chip {
    min-height: 44px;
    margin: 0;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 12px;
    font-weight: 950;
    line-height: 1.2;
    text-align: center;
}

.selectable-chip {
    cursor: pointer;
    color: #10192c;
    background: #ffffff;
    border: 2px solid #d8e0ec;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.selectable-chip:hover {
    transform: translateY(-1px);
    border-color: #1b56d1;
    box-shadow: 0 10px 24px rgba(27,86,209,0.10);
}

.selectable-chip input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: #1b56d1;
}

.selectable-chip:has(input:checked) {
    background: #eaf2ff;
    border-color: #1b56d1;
    color: #1b56d1;
}

.sent-chip {
    background: #eef3fb;
    color: #6b7280;
    border: 1px solid #d3ddeb;
}

.match-card-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding-top: 4px;
}

.match-card-footer .small-btn {
    min-width: 150px;
}

.match-safety-note {
    color: #6b7280;
    font-size: 14px;
    line-height: 1.45;
}

.match-safety-note a {
    color: #1b56d1;
    font-weight: 900;
    text-decoration: none;
}

@media (max-width: 1100px) {
    .match-board {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 920px) {
    .topbar {
        margin: 0;
        border-radius: 0 0 28px 28px;
    }

    .topbar-actions {
        width: auto;
        justify-content: flex-end;
    }

    .topbar-link {
        display: none;
    }

    .nav-toggle {
        display: inline-flex;
    }

    .platform-nav {
        display: none;
        position: fixed;
        top: 96px;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 260;
        margin: 0;
        padding: 14px;
        background: rgba(16,25,44,0.28);
        backdrop-filter: blur(8px);
        overflow-y: auto;
    }

    .platform-nav.is-open {
        display: block;
    }

    .platform-nav-inner {
        flex-direction: column;
        align-items: stretch;
        overflow: visible;
        padding: 18px;
        border-radius: 32px;
        box-shadow: 0 24px 60px rgba(16,25,44,0.22);
    }

    .platform-nav-link,
    .platform-nav-anchor,
    .logout-nav-link {
        width: 100%;
        justify-content: center;
        min-height: 64px;
        border-radius: 22px;
        font-size: 18px;
    }

    .logout-nav-link {
        margin-left: 0;
    }

    .match-section-head,
    .match-person-header,
    .match-card-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .match-available-badge,
    .already-sent-badge {
        align-self: flex-start;
    }

    .match-card-footer .small-btn {
        width: 100%;
    }
}

@media (max-width: 560px) {
    .match-code-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .match-person-card {
        padding: 18px;
        border-radius: 24px;
    }

    .match-person-card::before {
        border-radius: 24px 24px 0 0;
    }

    .match-person-info strong {
        font-size: 18px;
    }
}

@media (min-width: 921px) {
    .nav-toggle {
        display: none !important;
    }
}

@media (max-width: 920px) {
    .nav-toggle {
        display: inline-flex !important;
    }
}

/* Full-width classic navbar + final responsive layout update */

.site-navbar + .container {
    margin-top: 116px;
}

.site-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    width: 100%;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid rgba(207, 216, 231, 0.9);
    box-shadow: 0 12px 34px rgba(16, 25, 44, 0.08);
    backdrop-filter: blur(18px);
}

.site-navbar-inner {
    width: 100%;
    min-height: 92px;
    padding: 12px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
}

.site-brand {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    min-width: 260px;
    color: #10192c;
    text-decoration: none;
}

.site-logo {
    width: 54px;
    height: 70px;
    object-fit: cover;
    border-radius: 13px;
    background: #fff;
    border: 2px solid rgba(255,255,255,0.9);
    box-shadow: 0 12px 24px rgba(16, 25, 44, 0.14);
}

.site-brand-text {
    display: grid;
    gap: 2px;
    line-height: 1.15;
}

.site-brand-text strong {
    font-size: 25px;
    font-weight: 950;
    letter-spacing: -0.02em;
}

.site-brand-text small {
    color: #6b7280;
    font-size: 14px;
    font-weight: 750;
}

.site-navbar .platform-nav {
    position: static;
    display: block;
    max-width: none;
    width: auto;
    margin: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    z-index: auto;
}

.site-navbar .platform-nav-inner {
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    overflow: visible;
}

.site-navbar .platform-nav-link,
.site-navbar .platform-nav-anchor,
.site-navbar .logout-nav-link {
    min-height: 46px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid #d5deec;
    background: rgba(255, 255, 255, 0.72);
    color: #10192c;
    font-size: 15px;
    font-weight: 900;
    white-space: nowrap;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}

.site-navbar .platform-nav-link:hover,
.site-navbar .platform-nav-anchor:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(16, 25, 44, 0.08);
}

.site-navbar .platform-nav-link.active,
.site-navbar .primary-nav-link,
.site-navbar .primary-nav-link.active {
    background: linear-gradient(135deg, #ff7b1a, #e82b32);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 12px 26px rgba(232, 43, 50, 0.18);
}

.site-navbar .logout-nav-link {
    background: #10192c;
    color: #ffffff;
    border-color: #10192c;
    margin-left: 0;
}

.site-navbar .nav-toggle {
    display: none;
    flex: 0 0 auto;
}


/* Better match cards */
.match-board {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)) !important;
    gap: 20px !important;
    align-items: start;
}

.match-person-card {
    width: 100%;
    min-width: 0;
    padding: 22px !important;
    border: 1px solid #d7e0ed !important;
    background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%) !important;
}

.match-code-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.match-code-chip {
    min-width: 94px;
    min-height: 42px;
    flex: 0 0 auto;
    border-radius: 999px !important;
    padding: 9px 13px !important;
}

.match-person-info span {
    word-break: normal;
}

.match-card-footer {
    border-top: 1px solid #e4eaf3;
    padding-top: 16px !important;
}

.help-center-page {
    padding-top: 20px;
}

.help-hero,
.help-section {
    padding: 30px;
    margin-bottom: 22px;
}

.help-hero h1,
.help-section h2 {
    font-size: 34px;
    margin-bottom: 10px;
}

.help-hero p,
.help-section p,
.help-section li {
    color: #4b5563;
    font-size: 17px;
    line-height: 1.65;
}

.help-contact-box {
    margin-top: 20px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-radius: 18px;
    background: #eef4ff;
    border: 1px solid #cfdcf4;
    color: #10192c;
    font-weight: 900;
}

.help-contact-box a,
.help-section a {
    color: #1b56d1;
    font-weight: 900;
    text-decoration: none;
}

.help-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 18px;
}

.help-grid > div {
    padding: 18px;
    border-radius: 20px;
    border: 1px solid #d7e0ed;
    background: #f8fbff;
}

.help-grid strong {
    display: block;
    color: #10192c;
    font-size: 17px;
    margin-bottom: 8px;
}

@media (max-width: 1180px) {
    .site-navbar + .container {
        margin-top: 98px;
    }

    .site-navbar-inner {
        min-height: 84px;
        padding: 10px 18px;
    }

    .site-navbar .nav-toggle {
        display: inline-flex !important;
        width: 58px;
        height: 58px;
        border-radius: 20px;
        background: #ffffff;
        color: #10192c;
        border: 3px solid #ffb000;
        box-shadow: 0 14px 30px rgba(16,25,44,0.12);
    }

    .site-navbar .nav-toggle.is-open {
        background: #ffffff;
        color: #10192c;
        border-color: #ffb000;
    }

    .site-navbar .platform-nav {
        display: none;
        position: fixed;
        top: 84px;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 999;
        width: 100%;
        padding: 14px;
        background: rgba(8, 32, 49, 0.74);
        backdrop-filter: blur(10px);
        overflow-y: auto;
    }

    .site-navbar .platform-nav.is-open {
        display: block;
    }

    .site-navbar .platform-nav-inner {
        width: min(760px, 100%);
        margin: 0 auto;
        padding: 26px;
        border-radius: 34px;
        background: rgba(255,255,255,0.98);
        border: 1px solid rgba(255,255,255,0.9);
        box-shadow: 0 24px 70px rgba(0,0,0,0.22);
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .site-navbar .platform-nav-link,
    .site-navbar .platform-nav-anchor,
    .site-navbar .logout-nav-link {
        width: 100%;
        min-height: 64px;
        justify-content: center;
        border-radius: 22px;
        font-size: 19px;
        background: #ffffff;
        border: 1px solid #e0e6ef;
        color: #10192c;
        box-shadow: 0 8px 20px rgba(16,25,44,0.05);
    }

    .site-navbar .platform-nav-link.active,
    .site-navbar .primary-nav-link,
    .site-navbar .primary-nav-link.active {
        background: linear-gradient(135deg, #ff7b1a, #e82b32);
        color: #ffffff;
    }

    .site-navbar .logout-nav-link {
        background: #10192c;
        color: #ffffff;
    }

    .site-brand {
        min-width: 0;
    }

    .site-brand-text strong {
        font-size: 21px;
    }

    .site-brand-text small {
        font-size: 13px;
    }

    .site-logo {
        width: 48px;
        height: 62px;
    }

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

@media (max-width: 640px) {
    .site-navbar + .container {
        margin-top: 90px;
    }

    .site-navbar-inner {
        min-height: 76px;
        padding: 8px 12px;
        gap: 12px;
    }

    .site-logo {
        width: 42px;
        height: 54px;
        border-radius: 11px;
    }

    .site-brand-text strong {
        font-size: 18px;
    }

    .site-brand-text small {
        display: none;
    }

    .site-navbar .nav-toggle {
        width: 52px;
        height: 52px;
        border-radius: 18px;
    }

    .site-navbar .platform-nav {
        top: 76px;
    }

    .site-navbar .platform-nav-inner {
        padding: 18px;
        border-radius: 28px;
    }

    .site-navbar .platform-nav-link,
    .site-navbar .platform-nav-anchor,
    .site-navbar .logout-nav-link {
        min-height: 58px;
        font-size: 17px;
    }

    .match-board {
        grid-template-columns: 1fr !important;
    }

    .match-code-chip {
        min-width: calc(50% - 6px);
        flex: 1 1 calc(50% - 6px);
    }

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

    .help-hero,
    .help-section {
        padding: 22px;
    }

    .help-hero h1,
    .help-section h2 {
        font-size: 27px;
    }
}

/* Mobile menu full-screen visibility + Help back button fix */
body.mobile-menu-open {
    overflow: hidden;
}

.help-actions {
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.help-back-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 18px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ff7b1a, #e82b32);
    color: #ffffff !important;
    text-decoration: none;
    font-weight: 900;
    box-shadow: 0 12px 26px rgba(232, 43, 50, 0.18);
}

@media (max-width: 1180px) {
    .site-navbar .nav-toggle {
        position: relative;
        z-index: 1305;
    }

    .site-navbar .platform-nav {
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 1200 !important;
        width: 100vw !important;
        height: 100vh !important;
        padding: 104px 18px 22px !important;
        background: rgba(8, 32, 49, 0.82) !important;
        backdrop-filter: blur(16px) !important;
        overflow-y: auto !important;
    }

    .site-navbar .platform-nav-inner {
        width: min(780px, 100%) !important;
        margin: 0 auto !important;
        max-height: calc(100vh - 126px) !important;
        overflow-y: auto !important;
    }
}

@media (max-width: 640px) {
    .site-navbar .platform-nav {
        padding: 90px 14px 18px !important;
    }

    .site-navbar .platform-nav-inner {
        max-height: calc(100vh - 108px) !important;
        padding: 18px !important;
        gap: 12px !important;
    }

    .site-navbar .platform-nav-link,
    .site-navbar .platform-nav-anchor,
    .site-navbar .logout-nav-link {
        min-height: 56px !important;
        font-size: 17px !important;
    }

    .help-back-button {
        width: 100%;
    }
}

/* Final public navbar / usage page cleanup */
.usage-page {
    padding-top: 24px;
}

.usage-hero h1 {
    margin: 0 0 18px;
    font-size: clamp(34px, 4vw, 56px);
    line-height: 1.08;
    color: #111827;
}

.usage-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 24px;
}

.usage-back-btn,
.usage-help-btn {
    text-decoration: none;
}

.secondary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    padding: 14px 22px;
    font-weight: 900;
    color: #1958d1;
    background: #eef4ff;
    border: 1px solid #cbd9f5;
    text-decoration: none;
}

.usage-faq {
    margin-top: 18px;
}

@media (max-width: 920px) {
    .usage-actions {
        flex-direction: column;
    }

    .usage-back-btn,
    .usage-help-btn,
    .secondary-btn {
        width: 100%;
    }
}