:root{--ink:#48345f;--muted:#736184;--pink:#ee78ac;--purple:#9b77e6}
*{box-sizing:border-box}
body{min-height:100vh;margin:0;font-family:ui-rounded,"Trebuchet MS","Segoe UI",Arial,sans-serif;color:var(--ink);
background:radial-gradient(circle at 10% 6%,#ffe0ee,transparent 30%),radial-gradient(circle at 90% 15%,#d8fbeb,transparent 35%),#faf2ff}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #33bcb4;outline-offset:3px}
.topnav{max-width:1200px;margin:auto;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.logo{text-decoration:none;color:var(--ink);font-weight:900;font-size:1.3rem;white-space:nowrap}.logo span{color:var(--pink)}
.topnav nav{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
.topnav nav a{padding:10px 14px;border-radius:100px;background:#fff;border:1px solid #ebddf3;box-shadow:0 5px 14px #70549418;color:var(--ink);font-weight:800;text-decoration:none}
.flower-page{width:min(100% - 28px,1120px);margin:auto;padding:18px 0 50px}
.flower-hero{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 0 12px}
.eyebrow{text-transform:uppercase;letter-spacing:.1em;color:#8c6a99;font-size:.75rem;font-weight:900}
h1{font-size:clamp(2.2rem,5.2vw,4.2rem);max-width:740px;line-height:1.06;letter-spacing:-.05em;margin:10px 0}
h1 span{color:var(--purple);background:linear-gradient(110deg,#f57dab,#a17aed,#56bfb4);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.introduction{max-width:650px;color:var(--muted);line-height:1.55;font-size:1.05rem}
.hero-bouquet{font-size:clamp(3.3rem,6vw,5.2rem);line-height:1.4;text-align:center;transform:rotate(9deg);filter:drop-shadow(0 10px 9px #aa75a734)}
.message{background:#fffbee;border:1px solid #f4e3ab;border-radius:17px;padding:13px 18px;font-weight:800;margin:16px 0;color:#745384}
.message a{color:#754ab1}
.collection-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.stat{background:#fffefe;border:1px solid #efdffa;border-radius:20px;padding:16px;display:flex;flex-direction:column;gap:5px;text-align:center;box-shadow:0 9px 25px #8161a41a}
.stat-icon{font-size:1.75rem}.stat strong{font-size:clamp(1.25rem,3vw,2.1rem)}.stat>span:last-child{color:var(--muted);font-size:.81rem;font-weight:700}
.progress{height:17px;background:#e9dbf4;border:2px solid #fff;border-radius:100px;margin:20px 0 26px;overflow:hidden}
#progressFill{height:100%;width:0;background:linear-gradient(90deg,#ff9ebe,#b19afa,#6fdbc7);border-radius:100px;transition:width .5s}
.filters{display:flex;align-items:end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:12px 0}
.filter-buttons{display:flex;flex-wrap:wrap;gap:7px}
.filter{border:2px solid #eadbf4;background:#fff;color:#684f81;border-radius:100px;font:inherit;font-size:.88rem;font-weight:900;cursor:pointer;padding:10px 13px}
.filter.active{background:linear-gradient(100deg,#f889b8,#a687ed);color:#fff;border-color:transparent;box-shadow:0 5px 14px #ac78bc47}
.search-label{display:flex;flex-direction:column;gap:5px;font-size:.78rem;color:var(--muted);font-weight:900}
.search-label input{border:2px solid #e6d5f4;border-radius:12px;background:#fff;padding:11px 13px;font:inherit;min-width:min(230px,80vw);color:var(--ink)}
.results{color:var(--muted);font-weight:800;font-size:.88rem}
.flower-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:13px}
.flower-card{--petal:#efb6d4;--soft:#fff3f8;min-width:0;display:flex;flex-direction:column;align-items:center;position:relative;overflow:hidden;
border:2px solid #eadcf4;border-radius:22px;background:#fffefa;padding:11px 11px 16px;text-align:center;box-shadow:0 6px 0 #e9d7ec,0 13px 20px #8e6c9b1b}
.flower-art{position:relative;display:grid;place-items:center;width:100%;height:125px;overflow:hidden;border-radius:18px;
background:radial-gradient(circle at 50% 40%,#ffffff9c 0 14%,transparent 57%),linear-gradient(135deg,var(--petal),var(--soft))}
.flower-illustration{font-size:4.1rem;line-height:1;filter:drop-shadow(0 8px 4px #74538a35);transform:rotate(-8deg);transition:transform .25s}
.flower-card.found:hover .flower-illustration{transform:rotate(6deg) scale(1.13)}
.flower-card.missing .flower-illustration{filter:grayscale(1);opacity:.22;transform:scale(.85)}
.mystery{position:absolute;font-size:2.5rem;color:#785b96;font-weight:900;text-shadow:0 2px #fff}
.found-flag{position:absolute;right:5px;bottom:6px;font-size:.67rem;background:#dcfaec;border:1px solid #a0e0c2;color:#287a61;border-radius:100px;padding:5px 8px;font-weight:900}
.flower-card h3{font-size:1rem;line-height:1.25;margin:13px 0 4px;overflow-wrap:anywhere}
.flower-family{font-size:.79rem;color:var(--muted);margin:0 0 8px}
.flower-origin{color:#705989;font-size:.75rem;margin:0 0 9px;line-height:1.4}
.cupboard-link{margin-top:auto;background:#f7e6ff;color:#6b418c;border-radius:100px;text-decoration:none;padding:7px 10px;font-size:.71rem;font-weight:900}
.looking{font-size:.75rem;color:#aa8db1;font-weight:800;margin-top:auto}
.book-footer{margin:30px 0;text-align:center;color:var(--muted);font-weight:700;line-height:1.5}
@media(max-width:600px){.topnav{padding:14px;align-items:flex-start;flex-direction:column}.topnav nav{justify-content:flex-start}.topnav nav a{font-size:.78rem;padding:7px 10px}.hero-bouquet{display:none}.flower-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.flower-card{padding:7px 7px 13px}.flower-art{height:108px}.flower-illustration{font-size:3.3rem}.stat{padding:10px 5px}.stat strong{font-size:1.2rem}.stat-icon{font-size:1.4rem}.stat>span:last-child{font-size:.71rem}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}