:root { font-family: ui-rounded, "Avenir Next", Avenir, "Segoe UI", sans-serif; color: #302937; background: #f8f4ef; }
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; padding: 40px 24px 56px; background: radial-gradient(circle at 8% 5%, #f6d9d8 0, transparent 27rem), radial-gradient(circle at 92% 12%, #dcebe6 0, transparent 28rem), #f8f4ef; }
button, input { font: inherit; }
.page-shell { max-width: 1420px; margin: auto; }
.hero { max-width: 660px; margin: 0 auto 36px; text-align: center; }
.eyebrow { margin: 0 0 10px; color: #a55a67; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
h1 { margin: 0; color: #352b3b; font-family: Georgia, "Times New Roman", serif; font-size: clamp(30px, 4vw, 44px); font-weight: 600; letter-spacing: -.04em; }
.hero > p:last-child { margin: 12px 0 0; color: #716a75; font-size: 17px; line-height: 1.5; }
.gift-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.section { position: relative; min-height: 205px; overflow: hidden; padding: 24px; border: 1px solid rgb(255 255 255 / 78%); border-radius: 20px; background: rgb(255 255 255 / 82%); box-shadow: 0 16px 34px rgb(85 55 74 / 10%); backdrop-filter: blur(10px); }
.section::after { position: absolute; z-index: 0; right: -32px; bottom: -42px; width: 138px; height: 138px; border-radius: 50%; content: ""; opacity: .55; }
.section-my::after { background: #f7d6c7; }.section-lenka::after { background: #dfd7f3; }.section-nasi::after { background: #d5eadc; }
.section-header { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.section-header > div { display: flex; align-items: center; gap: 10px; min-width: 0; }
.section-icon { display: grid; flex: 0 0 35px; width: 35px; height: 35px; place-items: center; border-radius: 12px; color: #fff; font-size: 17px; }
.section-my .section-icon, .section-my .add-button { background: #bd6c64; }.section-lenka .section-icon, .section-lenka .add-button { background: #7563a8; }.section-nasi .section-icon, .section-nasi .add-button { background: #4e9275; }
h2 { margin: 0; color: #372f3e; font-family: Georgia, "Times New Roman", serif; font-size: 20px; font-weight: 600; }
.add-button, .submit-button { border: 0; border-radius: 999px; padding: 8px 13px; color: #fff; cursor: pointer; font-size: 14px; font-weight: 700; box-shadow: 0 5px 12px rgb(42 27 38 / 13%); transition: transform .16s ease, filter .16s ease; }
.add-button { display: grid; width: 34px; height: 34px; padding: 0; place-items: center; font-size: 24px; font-weight: 400; line-height: 1; }
.add-button:hover, .submit-button:hover { filter: brightness(.93); transform: translateY(-1px); }
.gift-list { position: relative; z-index: 1; display: grid; gap: 7px; margin: 25px 0 0; padding: 0; list-style: none; }
.gift-list li { display: flex; align-items: center; gap: 9px; padding: 10px 11px; border: 1px solid rgb(93 72 87 / 8%); border-radius: 11px; background: rgb(255 255 255 / 64%); transition: background .16s ease, transform .16s ease; }
.gift-list li:not(.empty):hover { background: #fff; transform: translateX(2px); }.gift-list li:last-child { border-bottom: 0; }
a { color: #4e4052; font-weight: 600; line-height: 1.4; text-decoration: none; overflow-wrap: anywhere; } a:hover { color: #a55a67; text-decoration: underline; }
.complete-form { margin: 0; }.complete-button, .close-button { display: grid; width: 24px; height: 24px; padding: 0; place-items: center; border: 0; border-radius: 50%; background: #f3e9e5; color: #9a7472; cursor: pointer; font-size: 20px; line-height: 1; transition: background .16s ease, color .16s ease; }.complete-button:hover, .close-button:hover { background: #f0d3d1; color: #a23e3e; }
.empty { color: #817983; font-style: italic; }.empty span { color: #b89c7a; font-size: 19px; }
dialog { width: min(460px, calc(100% - 32px)); border: 1px solid rgb(255 255 255 / 75%); border-radius: 20px; padding: 24px; background: #fffdfb; box-shadow: 0 24px 65px rgb(55 32 49 / 28%); } dialog::backdrop { background: rgb(48 35 52 / 40%); backdrop-filter: blur(3px); }
#add-form { display: grid; gap: 16px; } #add-form header { display: flex; align-items: center; justify-content: space-between; gap: 16px; } #add-form label { display: grid; gap: 7px; color: #514957; font-size: 14px; font-weight: 700; } #add-form input:not(.honeypot) { width: 100%; padding: 11px 12px; border: 1px solid #ddd3da; border-radius: 10px; background: #fff; outline: 0; } #add-form input:focus { border-color: #b77884; box-shadow: 0 0 0 3px #f5e4e6; }.submit-button { justify-self: start; padding: 10px 17px; background: #bd6c64; }.error { margin: 0; color: #a23e3e; }.honeypot { position: absolute; left: -10000px; opacity: 0; }
@media (max-width: 900px) { .gift-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } .section:last-child { grid-column: 1 / -1; max-width: calc(50% - 11px); } }
@media (max-width: 620px) { body { padding: 28px 14px 40px; } .hero { margin-bottom: 26px; }.gift-board { display: block; }.section, .section:last-child { max-width: none; margin-bottom: 16px; }.section { padding: 20px; } }