.app{flex-direction:column;min-height:100vh;display:flex}.main-content{flex:1}*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--primary:#ff7eb3;--primary-dark:#e05f96;--secondary:#ffd6e7;--accent:#ffb347;--accent2:#a8edea;--bg:#fff5f8;--surface:#fff;--text:#3d2b3d;--text-muted:#9b7fa0;--border:#f0d0e0;--shadow:#ff7eb32e;--radius:20px;--radius-sm:12px;--transition:.28s cubic-bezier(.34, 1.56, .64, 1)}html{scroll-behavior:smooth}body{background:var(--bg);color:var(--text);min-height:100vh;font-family:Nunito,Hiragino Kaku Gothic ProN,Meiryo,sans-serif;overflow-x:hidden}.floating-paws{pointer-events:none;z-index:0;position:fixed;inset:0;overflow:hidden}.floating-paw{opacity:0;animation:linear infinite floatUp;position:absolute;bottom:-60px}@keyframes floatUp{0%{opacity:0;transform:translateY(0)rotate(0)}10%{opacity:.15}90%{opacity:.1}to{opacity:0;transform:translateY(-110vh)rotate(360deg)}}.hero{text-align:center;z-index:1;background:linear-gradient(135deg,#ff7eb3 0%,#ff9a9e 40%,#fecfef 70%,#a8edea 100%);padding:60px 24px 80px;position:relative;overflow:hidden}.hero:before{content:"";background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.06'%3E%3Ccircle cx='30' cy='30' r='4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");position:absolute;inset:0}.hero-content{z-index:2;max-width:680px;margin:0 auto;position:relative}.hero-icon{filter:drop-shadow(0 8px 16px #00000026);margin-bottom:12px;font-size:72px;animation:2s ease-in-out infinite bounce;display:block}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-12px)}}.hero-title{color:#fff;text-shadow:0 4px 12px #00000026;letter-spacing:-.02em;margin-bottom:10px;font-size:clamp(2rem,5vw,3.2rem);font-weight:900}.hero-subtitle{color:#ffffffe6;margin-bottom:32px;font-size:1.1rem;font-weight:600}.paw-decoration{opacity:.12;font-size:80px;animation:3s ease-in-out infinite sway;position:absolute;top:50%;transform:translateY(-50%)rotate(-20deg)}.paw-left{left:5%}.paw-right{right:5%;transform:translateY(-50%)rotate(20deg)scaleX(-1)}@keyframes sway{0%,to{transform:translateY(-50%)rotate(-20deg)}50%{transform:translateY(-60%)rotate(-10deg)}}.search-wrapper{max-width:600px;margin:0 auto;position:relative}.search-box{background:#fff;border-radius:50px;align-items:center;gap:8px;padding:8px 8px 8px 20px;transition:box-shadow .2s;display:flex;box-shadow:0 8px 32px #0000001f,0 2px 8px #ff7eb34d}.search-wrapper.focused .search-box{box-shadow:0 8px 40px #ff7eb366,0 0 0 3px #ff7eb340}.search-icon{flex-shrink:0;font-size:20px}.search-input{color:var(--text);background:0 0;border:none;outline:none;flex:1;font-family:inherit;font-size:1.05rem}.search-input::placeholder{color:#c9a8c9}.clear-btn{cursor:pointer;color:var(--text-muted);background:0 0;border:none;border-radius:50%;padding:4px 6px;font-size:14px;transition:background .2s}.clear-btn:hover{background:#f0d0e0}.search-btn{color:#fff;cursor:pointer;transition:var(--transition);white-space:nowrap;background:linear-gradient(135deg,#ff7eb3,#ff4d8d);border:none;border-radius:40px;padding:10px 24px;font-family:inherit;font-size:1rem;font-weight:700;box-shadow:0 4px 12px #ff4d8d59}.search-btn:hover{transform:scale(1.05);box-shadow:0 6px 20px #ff4d8d73}.search-btn:active{transform:scale(.97)}.suggestions{border-radius:var(--radius);z-index:100;background:#fff;list-style:none;animation:.2s slideDown;position:absolute;top:calc(100% + 8px);left:0;right:0;overflow:hidden;box-shadow:0 16px 48px #00000024}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.suggestion-item{cursor:pointer;align-items:center;gap:10px;padding:12px 20px;font-weight:600;transition:background .15s;display:flex}.suggestion-item:hover,.suggestion-item.selected{background:var(--secondary)}.suggestion-dog{font-size:18px}.tab-nav{border-bottom:2px solid var(--border);z-index:50;box-shadow:0 2px 12px var(--shadow);background:#fff;justify-content:center;gap:8px;padding:0 24px;display:flex;position:sticky;top:0}.tab-btn{color:var(--text-muted);cursor:pointer;white-space:nowrap;background:0 0;border:none;border-bottom:3px solid #0000;align-items:center;gap:6px;margin-bottom:-2px;padding:16px 20px;font-family:inherit;font-size:.95rem;font-weight:700;transition:color .2s,border-color .2s;display:flex;position:relative}.tab-btn:hover{color:var(--primary)}.tab-btn.active{color:var(--primary);border-bottom-color:var(--primary)}.badge{background:var(--primary);color:#fff;text-align:center;border-radius:20px;min-width:22px;padding:2px 7px;font-size:.7rem;font-weight:800}.main-content{z-index:1;max-width:1400px;margin:0 auto;padding:32px 24px 60px;position:relative}.results-header{margin-bottom:24px}.results-header h2{color:var(--text);flex-wrap:wrap;align-items:center;gap:10px;font-size:1.4rem;font-weight:800;display:flex}.breed-tag{background:linear-gradient(135deg, var(--primary), var(--primary-dark));color:#fff;text-transform:capitalize;border-radius:20px;padding:4px 16px;font-size:1rem}.gallery{columns:4 240px;gap:16px}@media (width<=900px){.gallery{columns:3 180px}}@media (width<=600px){.gallery{columns:2 150px}}.image-card{break-inside:avoid;border-radius:var(--radius);opacity:0;background:var(--border);margin-bottom:16px;transition:opacity .4s,transform .4s;overflow:hidden;transform:translateY(20px)scale(.96);box-shadow:0 4px 16px #00000014}.image-card.visible{opacity:1;transform:translateY(0)scale(1)}.card-inner{border-radius:var(--radius);position:relative;overflow:hidden}.card-inner:hover .card-overlay{opacity:1}.card-inner:hover .card-img{transform:scale(1.05)}.img-skeleton{aspect-ratio:1;background:linear-gradient(90deg,#f8e0ee 25%,#fcd4e8 50%,#f8e0ee 75%) 0 0/200% 100%;justify-content:center;align-items:center;font-size:2rem;animation:1.5s infinite shimmer;display:flex}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.img-error{aspect-ratio:1;color:var(--text-muted);background:#fff0f5;flex-direction:column;justify-content:center;align-items:center;gap:6px;font-size:.8rem;display:flex}.img-error span{font-size:2rem}.card-img{opacity:0;width:100%;transition:transform .4s,opacity .3s;display:block}.card-img.img-loaded{opacity:1}.card-overlay{opacity:0;background:linear-gradient(#0000 40%,#00000073 100%);justify-content:space-between;align-items:flex-end;padding:12px;transition:opacity .25s;display:flex;position:absolute;inset:0}.fav-btn,.open-btn{cursor:pointer;width:38px;height:38px;transition:var(--transition);background:#ffffffe6;border:none;border-radius:50%;justify-content:center;align-items:center;font-size:18px;text-decoration:none;display:flex;box-shadow:0 2px 8px #00000026}.fav-btn:hover,.open-btn:hover{background:#fff;transform:scale(1.2)}.fav-btn.favorited{background:#ffe0ec}.empty-state,.loading-state,.error-state{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:80px 24px;display:flex}.empty-icon{font-size:64px;animation:2s ease-in-out infinite pulse}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.empty-state p{color:var(--text-muted);font-size:1.1rem;font-weight:700}.empty-hint{color:#c9a8c9!important;font-size:.9rem!important;font-weight:600!important}.paw-loader{gap:8px;margin-bottom:8px;font-size:2.5rem;display:flex}.paw-loader span{animation:.8s ease-in-out infinite pawBounce}@keyframes pawBounce{0%,to{opacity:.4;transform:translateY(0)}50%{opacity:1;transform:translateY(-16px)}}.loading-state p{color:var(--primary);font-size:1.1rem;font-weight:700}.error-state span{font-size:3rem}.error-state p{color:#e05f96;font-size:1.1rem;font-weight:700}.error-hint{color:var(--text-muted)!important;font-size:.9rem!important;font-weight:600!important}.history-list{flex-direction:column;gap:10px;max-width:480px;display:flex}.history-item{border:2px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;color:var(--text);transition:var(--transition);text-align:left;background:#fff;align-items:center;gap:14px;padding:14px 20px;font-family:inherit;font-weight:700;display:flex}.history-item:hover{border-color:var(--primary);box-shadow:0 4px 16px var(--shadow);transform:translate(6px)}.history-icon{font-size:22px}.history-breed{flex:1;font-size:1rem}.history-time{color:var(--text-muted);white-space:nowrap;font-size:.78rem;font-weight:600}.footer{text-align:center;color:var(--text-muted);z-index:1;padding:24px;font-size:.9rem;font-weight:600;position:relative}.footer a{color:var(--primary);font-weight:700;text-decoration:none}.footer a:hover{text-decoration:underline}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--primary);border-radius:4px}