@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600&display=swap');*{box-sizing:border-box}body{margin:0;background:#f5f2ed;color:#211f1d;font-family:'DM Sans',sans-serif}.app{max-width:520px;margin:auto;min-height:100vh;background:#fbfaf7;padding:22px 18px 100px;position:relative}header{display:flex;justify-content:space-between;align-items:center;margin:8px 2px 22px}header small{letter-spacing:2.4px;color:#8a7d70;font-size:10px}h1,h2{font-family:'Playfair Display',serif;margin:2px 0}.avatar{border:0;border-radius:50%;width:40px;height:40px;background:#2d2926;color:white;font-weight:700}.search{display:flex;align-items:center;gap:10px;background:#eeeae4;border-radius:15px;padding:12px 14px}.search input{border:0;outline:0;background:transparent;flex:1;font-size:14px}.cats{display:flex;gap:8px;overflow:auto;padding:14px 0}.cats button,.choices button{white-space:nowrap;border:1px solid #ded7cf;background:white;border-radius:30px;padding:8px 13px}.cats .on,.choices .chosen{background:#2d2926;color:white;border-color:#2d2926}.count{display:flex;justify-content:space-between;align-items:end;margin:10px 2px 12px}.count span{font-size:11px;color:#958a80}.grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.grid article{background:white;border-radius:17px;overflow:hidden;box-shadow:0 2px 12px #2c241b0d}.photo{height:220px;position:relative;background:#ece8e2}.photo img,.detailphoto img{width:100%;height:100%;object-fit:cover}.heart{position:absolute;right:9px;top:9px;border:0;background:#ffffffdd;width:32px;height:32px;border-radius:50%;display:grid;place-items:center}.meta{padding:11px}.meta small,.sheet small{font-size:9px;letter-spacing:1px;color:#9a8d81}.meta h3{font-size:14px;margin:4px 0 8px}.tag{display:inline-block;background:#f1eee9;border-radius:10px;padding:4px 7px;font-size:9px;margin:2px}.fab{position:fixed;bottom:84px;left:50%;transform:translateX(-50%);border:0;background:#2d2926;color:white;border-radius:30px;padding:13px 19px;display:flex;gap:7px;align-items:center;box-shadow:0 5px 18px #0003;z-index:5}nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(520px,100%);height:72px;background:#fff;border-top:1px solid #eee7df;display:flex;justify-content:space-around;padding:9px 20px;z-index:4}nav button{border:0;background:none;color:#aaa;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px}nav button svg{width:20px}.active{color:#2d2926!important}.sheet{position:fixed;inset:0;z-index:10}.backdrop{position:absolute;inset:0;background:#0007}.sheet section{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:min(520px,100%);max-height:92vh;overflow:auto;background:#fbfaf7;border-radius:25px 25px 0 0;padding:18px 20px 35px}.close{position:absolute;right:28px;top:28px;z-index:2;border:0;border-radius:50%;background:#fff;width:38px;height:38px}.detailphoto{height:320px;border-radius:17px;overflow:hidden;margin-bottom:15px}.sheet h4{margin:18px 0 8px}.rating button{border:0;background:none;padding:3px;color:#8d4e43}.choices{display:flex;gap:6px;overflow:auto}.sheet textarea{width:100%;min-height:72px;border:1px solid #ddd4ca;border-radius:12px;padding:10px;font-family:inherit}.stylebtn,.empty button{width:100%;margin-top:15px;border:0;background:#2d2926;color:#fff;border-radius:13px;padding:13px;display:flex;justify-content:center;gap:8px}.empty{text-align:center;padding:120px 35px;color:#5f5851}.empty svg{color:#8d4e43}.empty p{font-size:14px;line-height:1.5}@media(max-width:390px){.photo{height:190px}.meta h3{font-size:13px}}