/* Serwis prezentowy — arkusz CSS. */

/* PODSTAWY I STYLE GLOBALNE */
:root { color-scheme: light; --ink: #20343e; --muted: #52646d; --green: #285749; --green-2: #286b78; --green-soft: #dcece5; --cream: #f1f0e8; --paper: #fffdf8; --line: #cbd7d2; --rose: #914e63; --rose-soft: #f6e5e8; --gold: #8c681f; --shadow: 0 7px 22px rgba(35, 67, 70, .075); --radius: 14px; --radius-small: 9px; --content: 1200px; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
a { color: var(--green-2); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--rose); }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid #c59c5b; outline-offset: 3px; }
::selection { background: #d9e7de; color: var(--ink); }
.skip-link { position: absolute; left: -10000px; top: 0; z-index: 100; background: var(--paper); padding: .8rem 1rem; }
.skip-link:focus { left: 1rem; top: 1rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
ul.lista_wskazowek { list-style: none; padding-left: 0; margin-left: 20px; }
ul.lista_wskazowek li::before { content: "✦"; color: currentColor; display: inline-block; width: 1.2em; margin-left: -1.2em; }
body { margin: 0; color: var(--ink); font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; -webkit-font-smoothing: antialiased; background: linear-gradient(180deg, #f1efe6 0%, #edf2ee 100%); line-height: 1.48; }
.instant-scroll { scroll-behavior: auto !important; }

/* NAGŁÓWEK I NAWIGACJA */
.brand:hover { color: var(--green); }
.brand-copy { display: flex; flex-direction: column; line-height: 1.25; }
.brand-copy strong { font-size: 1rem; letter-spacing: -.02em; }
.brand-copy small { color: var(--muted); font-size: .72rem; margin-top: .2rem; }
.main-nav { display: flex; align-items: center; justify-content: center; gap: .3rem; flex: 1; }
.main-nav a:hover, .main-nav a.active, .guest-nav > a:not(.button):hover { background: var(--green-soft); color: var(--green); }
.nav-user { display: flex; align-items: center; gap: .7rem; }
.nav-greeting { color: var(--muted); font-size: .86rem; white-space: nowrap; }
.guest-nav { display: flex; align-items: center; gap: .7rem; margin-left: auto; }
.logout-form, .inline-form { display: inline-flex; margin: 0; vertical-align: middle; }
.site-header { position: sticky; z-index: 20; top: 0; border-bottom: 1px solid rgba(225, 230, 223, .85); backdrop-filter: blur(14px); background: rgba(255, 253, 248, .97); border-bottom-color: #c7d5d0; }
.nav-wrap { max-width: var(--content); margin: 0 auto; display: flex; align-items: center; min-height: 70px; padding: .5rem 1.25rem; gap: 1rem; }
.brand { display: flex; align-items: center; color: var(--ink); text-decoration: none; min-width: max-content; gap: .65rem; }
.brand-mark { display: grid; place-items: center; background: var(--green); color: #f8f5e9; font-size: 1.55rem; width: 39px; height: 39px; border-radius: 12px 12px 12px 4px; box-shadow: 0 4px 12px rgba(35, 71, 61, .13); }
.main-nav a, .guest-nav > a:not(.button) { font-weight: 650; text-decoration: none; border-radius: 999px; color: var(--muted); white-space: nowrap; padding: .43rem .65rem; font-size: .84rem; }
.main-nav a { display: inline-flex; align-items: center; gap: .38rem; }
.nav-notification-badge { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-width: 1.28rem; height: 1.28rem; padding: 0 .24rem; border-radius: 4px; background: #c93642; color: #fff; font-size: .7rem; font-weight: 850; line-height: 1; font-variant-numeric: tabular-nums; box-shadow: 0 1px 4px rgba(137, 27, 39, .24); }
.menu-toggle { display: none; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; align-items: center; justify-content: center; flex-direction: column; gap: 5px; border: 1px solid #b8cfdc; border-radius: 11px; background: #e3eef3; color: #203f4d; box-shadow: 0 2px 7px rgba(35, 67, 70, .08); }
.menu-toggle:hover { background: #d5e6ed; border-color: #94b6c3; }
.menu-toggle span { display: block; width: 20px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .18s ease, opacity .18s ease; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.site-navigation { display: flex; flex: 1 1 auto; min-width: 0; align-items: center; gap: 1rem; }
.site-navigation .main-nav { min-width: 0; }

/* WSPÓLNY UKŁAD, PRZYCISKI I PANELE */
.button { display: inline-flex; justify-content: center; align-items: center; gap: .45rem; border: 1px solid transparent; background: #edf1ed; color: var(--green); text-decoration: none; font-weight: 720; line-height: 1.2; transition: transform .15s ease, background .15s ease, border-color .15s ease; min-height: 38px; padding: .52rem .9rem; border-radius: 9px; font-size: .86rem; }
.page-heading-wide { max-width: 1200px; }
.eyebrow, .section-kicker { color: var(--rose); font-size: .72rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.button:hover { transform: translateY(-1px); text-decoration: none; }
.button-primary:hover { color: #fffefa; background: #193c32; }
.button-outline:hover { background: var(--green-soft); border-color: #aebfb4; color: var(--green); }
.button-quiet { color: var(--muted); background: transparent; border-color: transparent; }
.button-danger { background: #984f48; color: white; }
.button-danger:hover { background: #783c36; color: white; }
.button-wide { width: 100%; }
.button-row { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; }
.text-link { font-size: .88rem; font-weight: 750; text-decoration: none; white-space: nowrap; }
.text-button { border: 0; background: transparent; padding: .2rem .35rem; color: var(--green-2); font-size: .8rem; font-weight: 750; }
.text-button:hover { text-decoration: underline; }
.danger-text { color: var(--rose); }
.panel h3 { margin: 0 0 .7rem; font-size: 1rem; }
.panel-form { max-width: 820px; }
.panel-narrow { max-width: 560px; margin: 0 auto; }
.profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.muted-copy, .field-hint { color: var(--muted); font-size: .84rem; }
.muted-copy { margin-bottom: 0; }
.notice a { font-weight: 700; }
.narrow-layout .page-heading { max-width: 740px; }
.narrow-layout .panel { max-width: 820px; }
.field-hint { margin-top: -.08rem; }
.tip-icon { color: var(--gold); font-size: 1.3rem; line-height: 1.2; }
.page-shell { max-width: var(--content); width: calc(100% - 3rem); min-height: calc(100vh - 160px); margin: 0 auto; padding: 1.65rem 0 2.5rem; }
.page-heading { margin: 0 0 1.75rem; max-width: 1200px; margin-bottom: 1.15rem; }
.page-heading h1, .hero-panel h1 { letter-spacing: -.055em; line-height: 1.08; font-weight: 750; margin: .32rem 0 .45rem; font-size: clamp(1.95rem, 3.5vw, 2.85rem); }
.page-heading p { margin: 0; color: var(--muted); font-size: .98rem; }
.heading-actions { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .9rem; }
.button-small { min-height: 30px; padding: .34rem .62rem; font-size: .77rem; }
.button-primary { color: #fffefa; background: var(--green); box-shadow: 0 3px 9px rgba(35, 71, 61, .12); }
.button-outline { color: var(--green); border-color: #a9c2bb; background: #fffdf8; }
.button-quiet:hover { color: var(--ink); background: #e7eeea; }
.panel, .stat-card { background: var(--paper); border: 1px solid var(--line); border-color: #cbd7d2; box-shadow: var(--shadow); border-radius: var(--radius); }
.panel { padding: clamp(.9rem, 1.55vw, 1.35rem); }
.panel + .panel { margin-top: .85rem; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-bottom: .8rem; }
.panel-heading h2, .panel h2 { margin: .15rem 0 0; letter-spacing: -.03em; line-height: 1.25; font-size: 1.22rem; }
.section-panel { margin-top: .9rem; }
.content-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .8fr); align-items: start; gap: .85rem; }
.profile-link-panel .section-kicker { color: #78506b; }
.notice { margin: 0 0 1.25rem; border-radius: var(--radius-small); border: 1px solid var(--line); background: #f7faf7; color: var(--ink); padding: .65rem .85rem; margin-bottom: .9rem; }
.notice-success { background: #e1f0e3; border-color: #a9d0b0; }
.notice-info { background: #e2eef5; border-color: #b3cfdf; }
.notice-warning { background: #f8efd9; border-color: #deca91; }
.notice-error { background: #f7e4e7; border-color: #dfb3bd; }
.tip-strip { display: flex; align-items: flex-start; margin: 0 0 1.5rem; border: 1px solid #d9e4db; gap: .65rem; padding: .7rem .9rem; margin-bottom: 1rem; background: #f7f0d9; border-color: #e1d29e; border-radius: 11px; }
.tip-strip p { margin: 0; color: #4b594e; font-size: .86rem; }
.tip-strip strong { color: #365746; }
.gift-action .button { min-height: 30px; }
.own-gift-actions .button { display: flex; justify-content: center; align-items: center; width: 100%; min-height: 34px; padding: .42rem .55rem; box-sizing: border-box; text-align: center; white-space: normal; }

/* LOGOWANIE, REJESTRACJA I FORMULARZE */
.hero-panel { padding: 1rem 0; }
.hero-panel > p { max-width: 590px; color: var(--muted); font-size: 1.1rem; }
.hero-points strong, .hero-points small { display: block; }
.hero-points strong { font-size: .95rem; }
.hero-points small { color: var(--muted); font-size: .84rem; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.field input:focus, .field textarea:focus, .field select:focus, .search-form input:focus { border-color: var(--green-2); }
.field.field-invalid label { color: #914e63; }
.field.field-invalid input, .field.field-invalid textarea { border-color: #a44454; background: #fff7f8; }
.field.field-invalid input:focus, .field.field-invalid textarea:focus { border-color: #a44454; outline-color: #a44454; }
.field-error { color: #a44454; font-size: .8rem; font-weight: 650; line-height: 1.35; }
.form-subheading { padding-top: .85rem; border-top: 1px solid var(--line); }
.form-subheading h2 { margin: 0 0 .2rem; font-size: 1.1rem; }
.panel .form-subheading h2 { font-size: 1.22rem; letter-spacing: -.03em; line-height: 1.25; }
.form-subheading p { margin: 0; color: var(--muted); font-size: .86rem; }
.choice-field legend { margin-bottom: .6rem; }
.radio-card input { accent-color: var(--green); margin-top: .28rem; }
.radio-card strong, .radio-card small { display: block; }
.radio-card small { color: var(--muted); margin-top: .15rem; font-size: .84rem; }
.profile-link-panel .field input[readonly] { color: #233f4d; background: #f8fbfc; border-color: #b5cbd6; }
.auth-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, .76fr); align-items: center; max-width: 1050px; margin: 0 auto; gap: clamp(1.5rem, 4vw, 3.5rem); padding: .45rem 0 1.25rem; }
.hero-panel h1 { max-width: 650px; font-size: clamp(2.35rem, 4.7vw, 4.1rem); }
.hero-points { display: grid; gap: .7rem; margin-top: 1.3rem; }
.hero-points > div { display: flex; align-items: center; gap: .7rem; }
.point-icon { display: grid; place-items: center; flex: 0 0 46px; color: var(--green); font-size: .8rem; font-weight: 850; flex-basis: 40px; height: 40px; border-radius: 11px; background: #dcece5; }
.auth-card { background: var(--paper); border: 1px solid var(--line); box-shadow: 0 24px 75px rgba(35, 71, 61, .1); padding: clamp(1.1rem, 2.4vw, 1.7rem); border-radius: 16px; }
.auth-card h2 { margin: .15rem 0 1.2rem; font-size: 1.7rem; letter-spacing: -.04em; margin-bottom: .9rem; }
.auth-links { display: flex; flex-direction: column; gap: .4rem; font-size: .83rem; margin: .75rem 0 1rem; }
.auth-divider { display: flex; align-items: center; gap: .8rem; color: var(--muted); font-size: .8rem; margin: .9rem 0; }
.narrow-layout { margin: 0 auto; max-width: 820px; }
.stack-form { display: flex; flex-direction: column; gap: .75rem; }
.field { display: flex; flex-direction: column; min-width: 0; gap: .28rem; }
.field label, .field > span, .choice-field legend { color: #3e4f46; font-weight: 750; font-size: .83rem; }
.field input, .field textarea, .search-form input { width: 100%; border: 1px solid #d7dfd8; color: var(--ink); outline-offset: 2px; min-height: 40px; padding: .52rem .68rem; border-color: #bdcec8; border-radius: 8px; background: #fffefa; }
.field textarea { resize: vertical; min-height: 90px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }

.date-parts-field { min-width: 0; }
.date-parts-title { color: #3e4f46; font-weight: 750; font-size: .83rem; }
.date-parts-controls { display: grid; grid-template-columns: minmax(76px, .7fr) minmax(0, 1.3fr); gap: .5rem; }
.date-parts-controls label { display: flex; flex-direction: column; gap: .22rem; min-width: 0; }
.date-parts-controls label > span { color: var(--muted); font-size: .72rem; font-weight: 650; }
.date-parts-controls select { width: 100%; min-width: 0; min-height: 40px; padding: .48rem .55rem; border: 1px solid #bdcec8; border-radius: 8px; color: var(--ink); background: #fffefa; }
.date-parts-controls select:focus { border-color: var(--green-2); }
.field-invalid .date-parts-controls select { border-color: #a44454; background: #fff7f8; }
.field-invalid .date-parts-title { color: #914e63; }
.choice-field { border: 0; margin: 0; padding: .25rem 0; display: grid; gap: .5rem; }
.radio-card { display: flex; align-items: flex-start; gap: .7rem; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; padding: .65rem .75rem; border-color: #cbd7d2; background: #fffdf8; }
.radio-card:has(input:checked) { border-color: #83b4a0; background: #e1efe7; }

/* O SERWISIE I REGULAMIN */
.prose-panel p { color: #4f5e56; }
.prose-panel h2 { margin-top: 1.55rem; }
.prose-panel h2:first-child { margin-top: 0; }
.rules-panel ol { padding-left: 1.3rem; }
.rules-panel li { padding-left: .2rem; margin: .45rem 0; }
.rules-panel { background: #f7eee3; border-color: #e2d0b9; }
.about-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.about-grid > .panel { min-width: 0; margin-top: 0; }
.about-grid > .about-history-panel { grid-column: 1 / -1; }
.prose-panel { background: #e2efe6; border-color: #bed7c7; }

/* MÓJ PROFIL I ZNAJOMI */
.detail-list > div:last-child { border-bottom: 0; }
.profile-link-panel h2 { margin-top: .35rem; }
.profile-link-panel input[readonly] { font-size: .78rem; color: #56675e; background: #f9fbf8; }
.clean-list { list-style: none; padding: 0; margin: 0; }
.clean-list > li:first-child { border-top: 0; }
.status-text { font-size: .78rem; color: var(--muted); }
.empty-state { color: var(--muted); font-size: .88rem; }
.invite-report ul { padding-left: 1.1rem; margin-bottom: 0; font-size: .88rem; }
.danger-zone h2 { margin-top: .25rem; }
.danger-form { max-width: 440px; display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; }
.reservation-reset-panel { background: #fffaf3; border-color: #ead7b8; }
.reservation-reset-panel h2 { margin-top: .25rem; }
.reservation-reset-panel > p { color: var(--muted); }
.reservation-reset-confirm { margin-top: .85rem; padding: .7rem .8rem; border: 1px solid #e6cda4; border-radius: 10px; background: #fffdf8; }
.reservation-reset-confirm summary { cursor: pointer; color: #835525; font-size: .9rem; font-weight: 750; }
.reservation-reset-confirm[open] { background: #fff5e5; }
.reservation-reset-confirm p { margin: .65rem 0; color: var(--ink); font-size: .87rem; }
.profile-link-panel { background: #e3eef3; border-color: #b8cfdc; }
.profile-link-panel p { font-size: .9rem; color: #405c68; }
.stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; margin-bottom: .9rem; }
.stat-card { display: flex; flex-direction: column; padding: .85rem 1.05rem; border-radius: 13px; }
.stat-card:nth-child(1) { background: #e2efe6; border-color: #bed7c7; }
.stat-card:nth-child(2) { background: #e1edf4; border-color: #bfd3e1; }
.stat-card:nth-child(3) { background: #f5e8dc; border-color: #e5cfb8; }
.stat-card span { font-weight: 680; color: #425860; font-size: .8rem; }
.stat-card strong { margin-top: .15rem; letter-spacing: -.05em; color: var(--green); font-size: 1.85rem; line-height: 1.18; }
.stat-card small { font-size: .76rem; color: #52636a; }
.detail-list { margin: 1rem 0 0; margin-top: .65rem; }
.detail-list > div { display: grid; grid-template-columns: minmax(120px, .65fr) minmax(0, 1fr); border-bottom: 1px solid #edf0eb; gap: .6rem; padding: .48rem 0; border-bottom-color: #dce4df; }
.detail-list dt { color: #4d626b; font-size: .82rem; }
.detail-list dd { margin: 0; overflow-wrap: anywhere; font-weight: 720; }
.contact-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
.contact-columns > div + div { border-left: 1px solid var(--line); padding-left: .8rem; }
.contact-columns h3 { min-height: 1.5rem; }

.profile-invitations-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: .85rem; }
.profile-invitations-grid > .panel { min-width: 0; margin-top: 0; }
.panel-pending-invitations { border-color: #c93642; box-shadow: 0 0 0 1px rgba(201, 54, 66, .52), 0 0 17px rgba(201, 54, 66, .32), var(--shadow); }
.friends-table-wrap { width: 100%; overflow-x: auto; border: 1px solid #dce4df; border-radius: 10px; }
.friends-mobile-list { display: none; }
.friends-table { width: 100%; min-width: 760px; border-collapse: collapse; background: #fffefa; font-size: .87rem; }
.friends-table th, .friends-table td { padding: .62rem .7rem; border-bottom: 1px solid #e4eae5; text-align: left; vertical-align: middle; }
.friends-table th { color: #405760; background: #eaf1ed; font-size: .77rem; font-weight: 800; white-space: nowrap; }
.friends-table tbody tr:nth-child(even) { background: #f7f9f6; }
.friends-table tbody tr:last-child td { border-bottom: 0; }
.friends-table td:last-child, .friends-table th:last-child { width: 1%; text-align: right; }
.friend-remove-confirm { min-width: 70px; text-align: right; }
.friend-remove-confirm summary { display: inline-block; list-style: none; cursor: pointer; }
.friend-remove-confirm summary::-webkit-details-marker { display: none; }
.friend-remove-confirm-body { min-width: 240px; max-width: 330px; margin-top: .45rem; padding: .65rem; border: 1px solid #e6cda4; border-radius: 9px; background: #fffaf0; text-align: left; }
.friend-remove-confirm-body p { margin: 0 0 .55rem; color: var(--ink); font-size: .8rem; }
.clean-list > li { border-top: 1px solid #edf0eb; display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .86rem; padding: .48rem 0; border-top-color: #dce4df; }
.invite-report { border-radius: 12px; margin-top: .9rem; padding: .8rem; background: #e8f0ed; }
.danger-zone { background: #f8e9e5; border-color: #e0b9b0; }
.danger-zone > p { color: #5c6060; }
.profile-grid > .panel + .panel { margin-top: 0; }
.profile-grid > .panel { min-width: 0; }
.invite-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: .85rem; width: 100%; }

/* MÓJ WIDOK — LISTY PREZENTOWE ZNAJOMYCH */
.friend-note { color: #425965; background: #f7f0d9; border-left: 3px solid #e1d29e; padding: .6rem .8rem; margin: .55rem 0 .75rem 0; font-size: .9rem; }
.gift-main { min-width: 0; }
.gift-reserved .gift-title { color: #7a847e; text-decoration: line-through; }
.gift-action-form { justify-content: flex-end; }
.friend-index a:hover { background: #deeee6; border-color: #8fb8a4; }
.friend-lists { display: grid; gap: .85rem; }
.friend-list-panel { scroll-margin-top: 82px; background: #fffdf8; }
.count-badge, .inline-count { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-size: .78rem; font-weight: 750; white-space: nowrap; padding: .2rem .5rem; background: #e4edf0; color: #354f5b; }
.gift-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .32rem; }
.gift-item { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #edf0eb; gap: .75rem; padding: .58rem .7rem; border: 1px solid #d0e0d7; border-radius: 9px; background: #edf5ef; }
.gift-item:nth-child(even) { background: #edf2f7; border-color: #d0dce7; }
.gift-item:first-child { padding-top: .58rem; }
.gift-item:last-child { border-bottom: 0; padding-bottom: .58rem; }
.gift-title { display: inline-block; text-decoration: none; overflow-wrap: anywhere; color: #203b4a; font-size: .98rem; font-weight: 780; }
a.gift-title { text-decoration: underline; text-decoration-color: #8eaaa8; text-underline-offset: 3px; }
.gift-title:hover { text-decoration: underline; color: #175e68; text-decoration-color: currentColor; }
.gift-description { margin: .15rem 0 0; margin-top: .1rem; color: #455c62; font-size: .84rem; }
.external-mark { font-size: .75rem; margin-left: .35rem; color: #235f6d; font-weight: 800; }
.gift-action { display: flex; flex-shrink: 0; justify-content: flex-end; margin-left: .25rem; }
.gift-reserved, .gift-reserved:nth-child(even) { background: #f7e5e8; border-color: #dfb8c0; border-left: 4px solid #a35467; padding-left: .55rem; }
.gift-reserved .gift-title,
.gift-reserved a.gift-title,
.gift-reserved a.gift-title:visited { color: #67414b; text-decoration: line-through; text-decoration-color: #a65a6d; text-decoration-thickness: 1.5px; }
.gift-reserved .gift-title:hover { color: #78394b; }
.gift-reserved .external-mark { color: #84394e; }
.gift-reserved .gift-description { color: #72555c; }
.gift-reserved .pill-muted { color: #642f3d; background: #edcbd2; border: 1px solid #dba0ac; }
.pill { display: inline-flex; align-items: center; border-radius: 999px; line-height: 1.2; font-weight: 800; white-space: nowrap; padding: .24rem .48rem; font-size: .71rem; }
.pill-muted { background: #dfe5e1; color: #3f514b; }
.pill-soft { background: #dfeaf0; color: #345966; }
.pill-green { background: #d6eadc; color: #26593c; }
.pill-new { background: #dce8fb; color: #244f8a; border: 1px solid #b2c9ef; }
.empty-card { text-align: center; border: 1px dashed #cfd9d0; border-radius: var(--radius); padding: 2rem 1.2rem; border-color: #bdcec5; background: #f8fbf6; }
.empty-card h2, .empty-card h3 { margin: .45rem 0 .35rem; letter-spacing: -.025em; margin-top: .3rem; }
.empty-card p { max-width: 540px; margin: 0 auto 1.2rem; color: var(--muted); margin-bottom: .9rem; }
.empty-illustration { display: inline-grid; place-items: center; color: var(--green); font-size: 1.8rem; width: 46px; height: 46px; border-radius: 14px 14px 14px 5px; background: #dcece5; }
.compact-empty { border: 0; padding: 1.35rem .9rem; background: #edf4ef; }
.friend-index { flex-wrap: wrap; margin-bottom: .8rem; display: flex; flex-direction: column; align-items: stretch; width: fit-content; max-width: 100%; gap: .12rem; margin: 0 auto .8rem; }
.friend-index-label { font-size: .82rem; margin-right: .2rem; color: #4a5e67; margin: 0 0 .15rem; }
.friend-index a { text-decoration: none; font-weight: 680; font-size: .82rem; color: var(--green); border: 1px solid #d8e1d8; border-color: #c4d5ce; background: #f9fcf8; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .2rem .5rem; border-radius: 7px; white-space: nowrap; }
.friend-index small { padding: .05rem .35rem; border-radius: 999px; font-size: .7rem; background: #d9eae1; color: #294f42; flex: 0 0 auto; margin-left: .35rem; }

/* MOJE PREZENTY */
.own-gift-list, .shopping-list { list-style: none; padding: 0; margin: 0; }
.own-gift-info { min-width: 0; }
.own-gift-info h3 a:hover { color: var(--green-2); text-decoration: underline; }
.type-label { color: var(--muted); font-size: .75rem; }
.delete-details { position: relative; }
.delete-details summary { cursor: pointer; list-style: none; padding: .4rem .5rem; color: var(--rose); font-size: .8rem; font-weight: 750; }
.delete-details summary::-webkit-details-marker { display: none; }
.delete-details p { margin: .25rem 0 .5rem; color: var(--ink); font-size: .8rem; }
.delete-inline-form { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; }
.own-gift-item { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #edf0eb; gap: .75rem; padding: .75rem .65rem; border: 1px solid #d2dfd8; border-radius: 9px; margin: .35rem 0; background: #eef5ef; }
.own-gift-item:nth-child(even) { background: #eef2f7; border-color: #d0dce6; }
.own-gift-item:first-child { padding-top: .75rem; }
.own-gift-item:last-child { border-bottom: 1px solid #d2dfd8; }
.inactive-item, .inactive-item:nth-child(even) { background: #f0ede8; border-color: #d7d1c9; }
.inactive-item h3, .inactive-item p { color: #686d69; }
.own-gift-info h3 { overflow-wrap: anywhere; margin: .22rem 0 .1rem; font-size: 1rem; }
.own-gift-info h3 a { color: #234b5b; text-decoration: underline; text-decoration-color: #9ab5ba; text-underline-offset: 3px; }
.own-gift-info p { margin: 0; color: #4d6268; font-size: .84rem; }
.gift-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; }
.delete-details[open] { padding: .5rem; min-width: 200px; border: 1px solid #e7c9c3; border-radius: 10px; background: #f8e6e2; border-color: #dfb9b0; }
.own-gift-actions { display: flex; flex: 0 0 142px; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: .35rem; width: 142px; min-width: 142px; }
.own-gift-actions > a,
.own-gift-actions > form,
.own-gift-actions > details { display: block; width: 100%; min-width: 0; margin: 0; box-sizing: border-box; }
.own-gift-actions .delete-details { width: 100%; box-sizing: border-box; }
.own-gift-actions .delete-details summary { display: flex; justify-content: center; align-items: center; width: 100%; min-height: 34px; padding: .42rem .55rem; border: 1px solid #e0bac1; border-radius: 999px; background: #fbebed; color: #914e63; box-sizing: border-box; text-align: center; }
.own-gift-actions .delete-details summary:hover { background: #f6dfe4; border-color: #d69aa7; }
.own-gift-actions .delete-details[open] { width: 100%; }

/* LISTA ZAKUPOWA */
.shopping-list { counter-reset: item; }
.shopping-item:last-child { border-bottom: 0; }
.shopping-manage { align-self: center; }
.shopping-item { counter-increment: item; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: start; border-bottom: 1px solid #edf0eb; gap: .7rem; padding: .7rem .65rem; margin: .3rem 0; border: 1px solid #d2dfd8; border-radius: 9px; background: #eef5ef; }
.shopping-item:nth-child(even) { background: #edf2f7; border-color: #d0dce6; }
.shopping-owner { display: block; font-size: .78rem; color: #4a626b; }
.shopping-title { display: inline-block; margin-top: .08rem; font-weight: 780; overflow-wrap: anywhere; color: #203f50; text-decoration: underline; text-decoration-color: #9ab5ba; text-underline-offset: 3px; }
.shopping-title:hover { text-decoration: underline; color: #155f6a; }
.shopping-copy p { margin: .1rem 0; font-size: .87rem; color: #4a5e65; }
.shopping-status { display: block; margin-top: .25rem; font-size: .76rem; color: #385e4d; }
.shopping-check { width: 24px; height: 24px; margin-top: .4rem; border: 1.5px solid #b3c3b6; border-radius: 6px; padding: 0 3px 3px 5px; border-color: #799f8c; background: #f9fcf8; }

/* WYSZUKIWANIE ZNAJOMYCH */
.search-form input { flex: 1; min-width: 0; }
.people-table { width: 100%; border-collapse: collapse; font-size: .87rem; text-align: left; }
.people-table th:first-child { border-radius: 9px 0 0 9px; }
.people-table th:last-child { border-radius: 0 9px 9px 0; }
.people-table td:first-child strong, .people-table td:first-child small { display: block; }
.people-table td:first-child small { color: var(--muted); }
.table-action { text-align: right; white-space: nowrap; }
.search-panel { padding: .95rem; }
.search-form { display: flex; gap: .45rem; }
.table-scroll { overflow-x: auto; margin-top: .75rem; }
.people-table th { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; padding: .6rem .65rem; background: #e4edf0; color: #3e5864; }
.people-table td { border-bottom: 1px solid #edf0eb; vertical-align: middle; padding: .65rem; border-bottom-color: #dbe3e1; }
.people-table tbody tr:nth-child(even) { background: #f1f5f2; }
.people-table tbody tr:hover { background: #e2eee7; }

/* STOPKA */
.footer-inner a { text-decoration: none; font-weight: 700; }
.footer-version { opacity: .8; }
.site-footer { border-top: 1px solid var(--line); background: rgba(255, 253, 248, .8); border-top-color: #cbd7d2; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .8rem; max-width: var(--content); margin: 0 auto; color: var(--muted); font-size: .76rem; padding: .85rem 1.25rem; }

/* KOMUNIKATY */
.flash-toast { position: fixed; z-index: 1500; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); display: flex; align-items: flex-start; gap: .8rem; width: min(440px, calc(100vw - 2rem)); padding: .9rem 1rem; border: 1px solid #cbd7d2; border-left: 5px solid #527b69; border-radius: 13px; background: #f5faf6; color: #20343e; box-shadow: 0 12px 36px rgba(22, 43, 39, .2); font-size: .92rem; line-height: 1.45; font-weight: 570; opacity: 1; transform: translateY(0); transition: opacity .2s ease, transform .2s ease; }
.flash-toast-message { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.flash-toast-close { display: inline-grid; place-items: center; flex: 0 0 1.6rem; width: 1.6rem; height: 1.6rem; margin: -.1rem -.2rem 0 0; padding: 0; border: 1px solid transparent; border-radius: 50%; background: transparent; color: currentColor; font-size: 1.35rem; line-height: 1; opacity: .75; }
.flash-toast-close:hover { background: rgba(32, 52, 62, .08); opacity: 1; }
.flash-toast-success { background: #e8f4e9; border-color: #b8d8bd; border-left-color: #34734b; color: #214c30; }
.flash-toast-info { background: #e7f1f6; border-color: #bcd3df; border-left-color: #286b78; color: #234c5a; }
.flash-toast-warning { background: #fbf2dc; border-color: #e6d2a1; border-left-color: #a57622; color: #634b1c; }
.flash-toast-error { background: #f8e7e9; border-color: #e5bfc5; border-left-color: #a44454; color: #762d3a; }
.flash-toast.is-leaving { opacity: 0; transform: translateY(.45rem); pointer-events: none; }

@media (min-width: 721px) {
    /* WSPÓLNY UKŁAD, PRZYCISKI I PANELE */
    .profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1000px) {
    /* NAGŁÓWEK I NAWIGACJA */
    .brand { flex: 1; }
    .main-nav { justify-content: flex-start; order: 3; overflow-x: auto; padding-bottom: .1rem; width: 100%; }
    .nav-user { margin-left: auto; }
    .nav-wrap { flex-wrap: wrap; gap: .45rem .85rem; padding-block: .55rem; }
    /* WSPÓLNY UKŁAD, PRZYCISKI I PANELE */
    .page-shell { padding-top: 1.35rem; }
    /* MÓJ PROFIL I ZNAJOMI */
    .contact-columns > div:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); grid-column: 1 / -1; padding: 1rem 0 0; }
    .contact-columns { grid-template-columns: 1fr 1fr; gap: .75rem; }
    .profile-invitations-grid { grid-template-columns: 1fr 1fr; gap: .65rem; }
}

@media (min-width: 721px) and (max-width: 1000px) {
    /* NAGŁÓWEK I NAWIGACJA */
    .site-navigation { display: contents; }
}

@media (max-width: 720px) {
    /* NAGŁÓWEK I NAWIGACJA */
    .brand-copy small { max-width: 190px; }
    .nav-greeting { display: none; }
    .main-nav { gap: .1rem; }
    .main-nav a { font-size: .8rem; padding: .48rem .65rem; }
    .nav-wrap { padding-inline: .85rem; gap: .35rem .7rem; justify-content: space-between; min-height: 64px; padding: .55rem .85rem; }
    .nav-wrap > .brand { flex: 0 1 auto; gap: .55rem; max-width: calc(100% - 3.4rem); min-width: 0; }
    .brand-copy { min-width: 0; }
    .brand-copy strong,
    .brand-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .brand-mark { flex: 0 0 36px; height: 36px; width: 36px; }
    .menu-toggle { display: flex; margin-left: auto; }
    .site-navigation { align-items: stretch; border-top: 1px solid #d1ded8; display: none; flex-direction: column; flex: 0 0 100%; gap: .55rem; margin-top: .25rem; order: 3; padding: .65rem 0 .1rem; width: 100%; }
    .site-navigation.is-open { display: flex; }
    .site-navigation .main-nav { align-items: stretch; display: flex; flex-direction: column; flex: 0 0 auto; gap: .15rem; justify-content: flex-start; order: initial; overflow: visible; padding: 0; width: 100%; }
    .site-navigation .main-nav a,
    .site-navigation .guest-nav > a:not(.button) { border-radius: 8px; display: block; font-size: .94rem; line-height: 1.35; padding: .68rem .8rem; white-space: normal; width: 100%; }
    .site-navigation .main-nav a:hover,
    .site-navigation .main-nav a.active,
    .site-navigation .guest-nav > a:not(.button):hover { background: #e3eee8; }
    .site-navigation .nav-user { align-items: center; border-top: 1px solid #e0e8e3; display: flex; gap: .75rem; justify-content: space-between; margin: 0; order: initial; padding: .65rem .8rem .15rem; width: 100%; }
    .site-navigation .nav-user .logout-form { margin: 0; }
    .site-navigation .guest-nav { align-items: stretch; display: flex; flex-direction: column; gap: .2rem; margin: 0; width: 100%; }
    .site-navigation .guest-nav > .button { justify-content: center; margin-top: .25rem; width: 100%; }
    /* WSPÓLNY UKŁAD, PRZYCISKI I PANELE */
    .gift-action .button { text-align: center; white-space: normal; }
    .search-form .button { padding-inline: .8rem; }
    .page-shell { padding: 1.15rem 0 2rem; width: calc(100% - 1.4rem); }
    .page-heading { margin-bottom: .9rem; }
    .panel { padding: .85rem; }
    .content-grid, .profile-grid { grid-template-columns: minmax(0, 1fr); gap: .65rem; }
    /* LOGOWANIE, REJESTRACJA I FORMULARZE */
    .auth-layout { align-items: stretch; display: flex; flex-direction: column; }
    .hero-panel { padding: .4rem 0 0; }
    .hero-panel > p { font-size: 1rem; }
    .hero-points { grid-template-columns: 1fr; }
    .form-grid { grid-template-columns: minmax(0, 1fr); }
    /* MÓJ PROFIL I ZNAJOMI */
    .friends-table-wrap { display: none; }
    .friends-mobile-list { display: grid; gap: .42rem; }
    .friend-mobile-card { min-width: 0; padding: .58rem .65rem; border: 1px solid #dce5df; border-radius: 10px; background: #fffefa; }
    .friend-mobile-card:nth-child(even) { background: #f5f8f5; }
    .friend-mobile-head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-width: 0; padding-bottom: .36rem; border-bottom: 1px solid #e7ece8; }
    .friend-mobile-name { min-width: 0; overflow-wrap: anywhere; font-size: .88rem; line-height: 1.25; }
    .friend-mobile-remove { position: relative; flex: 0 0 auto; }
    .friend-mobile-remove summary { padding: .12rem .22rem; font-size: .76rem; }
    .friend-mobile-meta { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: .25rem .7rem; padding: .35rem 0 .28rem; }
    .friend-mobile-meta > div { display: flex; align-items: baseline; min-width: 0; gap: .25rem; }
    .friend-mobile-meta span { flex: 0 0 auto; color: #718078; font-size: .66rem; }
    .friend-mobile-meta strong { min-width: 0; overflow-wrap: anywhere; font-size: .76rem; font-weight: 680; }
    .friend-mobile-dates { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: .18rem .7rem; color: #405760; font-size: .74rem; }
    .friend-mobile-dates b { color: #718078; font-size: .68rem; font-weight: 650; }
    .friend-mobile-remove .friend-remove-confirm-body { position: absolute; z-index: 8; top: calc(100% + .2rem); right: 0; width: min(270px, calc(100vw - 3.5rem)); min-width: 0; max-width: none; margin: 0; box-shadow: 0 8px 24px rgba(22, 43, 39, .16); }
    .stat-card span { line-height: 1.35; }
    .stat-card small { display: none; }
    .contact-columns { grid-template-columns: minmax(0, 1fr); }
    .profile-invitations-grid { grid-template-columns: minmax(0, 1fr); gap: .65rem; }
    .contact-columns > div + div, .contact-columns > div:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); grid-column: auto; padding: 1rem 0 0; }
    .contact-columns > div + div { padding-left: .8rem; }
    .detail-list > div { grid-template-columns: minmax(90px, .7fr) minmax(0, 1fr); }
    .stats-grid { gap: .4rem; }
    .stat-card { padding: .7rem .55rem; }
    .stat-card strong { font-size: 1.55rem; }
    .invite-fields { grid-template-columns: minmax(0, 1fr); }
    /* MÓJ WIDOK — LISTY PREZENTOWE ZNAJOMYCH */
    .gift-action { max-width: 145px; }
    .gift-item { align-items: flex-start; gap: .55rem; padding: .55rem; }
    .gift-item:first-child { padding-top: .55rem; }
    .gift-item:last-child { padding-bottom: .55rem; }
    .gift-reserved, .gift-reserved:nth-child(even) { padding-left: .4rem; }
    .friend-index { width: 100%; }
    .friend-index a { overflow-wrap: anywhere; white-space: normal; }
    /* MOJE PREZENTY */
    .own-gift-item { align-items: flex-start; flex-direction: column; padding: .65rem; }
    .own-gift-item:first-child { padding-top: .65rem; }
    .own-gift-actions { flex: 0 0 auto; min-width: 0; width: 100%; }
    /* LISTA ZAKUPOWA */
    .shopping-manage { grid-column: 2; }
    .shopping-item { grid-template-columns: 20px minmax(0, 1fr); padding: .6rem; }
    /* WYSZUKIWANIE ZNAJOMYCH */
    .search-form { align-items: stretch; }
    /* STOPKA */
    .footer-inner { align-items: flex-start; flex-direction: column; gap: .3rem; }
    /* KOMUNIKATY */
    .flash-toast { bottom: max(.7rem, env(safe-area-inset-bottom)); font-size: .88rem; gap: .6rem; padding: .8rem .85rem; right: max(.7rem, env(safe-area-inset-right)); width: calc(100vw - 1.4rem); }
}

@media (max-width: 420px) {
    /* NAGŁÓWEK I NAWIGACJA */
    .brand-copy strong { font-size: .9rem; }
    .brand-copy small { font-size: .66rem; }
    .nav-user .button { padding-inline: .6rem; }
    /* WSPÓLNY UKŁAD, PRZYCISKI I PANELE */
    .page-heading h1 { font-size: 1.95rem; }
    .heading-actions .button { flex: 1; }
    .gift-action .button { width: auto; }
    /* MÓJ WIDOK — LISTY PREZENTOWE ZNAJOMYCH */
    .gift-item { align-items: stretch; flex-direction: column; }
    .gift-action { max-width: none; justify-content: flex-start; margin-left: 0; width: 100%; }
    .gift-action-form { width: auto; }
    /* WYSZUKIWANIE ZNAJOMYCH */
    .search-form { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    .menu-toggle span { transition: none; }
    .flash-toast { transition: none; }
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}