.app{min-height:100vh;padding:30px;background:#f8f8fb;color:#333;font-family:Inter,sans-serif;position:relative;overflow:hidden;transition:.5s}.app.dark{background:#111;color:#eee}.blob{position:absolute;width:340px;height:340px;filter:blur(140px);opacity:.55;animation:float 12s infinite alternate ease-in-out}.blob1{top:-80px;left:-40px;background:#c6a4ff}.blob2{bottom:-120px;right:-60px;background:#9bd3ff}@keyframes float{0%{transform:translateY(0)}to{transform:translateY(-60px)}}.title{text-align:center;font-size:2.6rem;margin-bottom:15px;font-weight:700}.typewriter{width:100%;overflow:hidden;white-space:nowrap;border-right:3px solid #815bff;animation:typing 3s steps(40),blink .8s infinite step-end alternate}@keyframes typing{0%{width:0}}@keyframes blink{50%{border-color:transparent}}.toggle{position:absolute;top:20px;right:20px;padding:7px 14px;border-radius:20px;border:none;background:#eadcff;color:#5431d8;cursor:pointer}.app.dark .toggle{background:#3b2a63;color:#e2d8ff}.mode-buttons{display:flex;justify-content:center;gap:8px;margin-bottom:22px}.mode-buttons button{padding:8px 14px;border-radius:10px;border:1px solid #cbb8ff;background:#fff9;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:pointer;transition:.3s}.mode-buttons .active{background:#8a63ff;color:#fff;border-color:#8a63ff}.app.dark .mode-buttons button{background:#28282899;border:1px solid #7356d9}.search-box{display:flex;justify-content:center;gap:10px;background:#ffffff73;padding:14px;border-radius:18px;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);margin-bottom:28px}.app.dark .search-box{background:#28282873}.search-box input{width:50%;padding:12px 14px;border-radius:10px;border:none;outline:none;color:#222;transition:width .35s,box-shadow .35s}.search-box input::placeholder{color:#777}.search-box input:focus{width:65%;box-shadow:0 0 18px #885cff59}.app.dark .search-box input{color:#fff;background:#14141473}.app.dark .search-box input::placeholder{color:#cfcfcf}.app.dark .search-box input:focus{box-shadow:0 0 18px #c8aaff73}.search-box button{background:#885cffe6;color:#fff;padding:12px 18px;border-radius:12px;border:none;cursor:pointer;font-weight:600;transition:transform .35s,box-shadow .35s,background .35s}.search-box button:hover{transform:scale(1.08);background:#7a48ff;box-shadow:0 0 18px #885cff73}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:22px}.card{position:relative;background:#ffffff8c;border:1px solid rgba(136,92,255,.3);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-radius:16px;text-align:center;padding-bottom:14px;animation:fadeUp .6s ease forwards;opacity:0;transform:translateY(28px) scale(.97);transition:transform .35s,box-shadow .35s,border-color .35s;cursor:pointer}.card:hover{transform:translateY(-10px) scale(1.05);border-color:#885cffb3;box-shadow:0 18px 35px #885cff59}.card img{width:100%;height:160px;object-fit:cover;border-radius:16px 16px 0 0;transition:transform .5s}.card:hover img{transform:scale(1.12)}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#00000059;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:16px;opacity:0;display:flex;justify-content:center;align-items:center;transition:opacity .35s}.card:hover .overlay{opacity:1}.view-btn{background:#8a63ff;color:#fff;padding:10px 18px;border-radius:12px;border:none;font-weight:600;cursor:pointer;transform:scale(.9);transition:transform .35s,background .35s}.card:hover .view-btn{transform:scale(1)}.view-btn:hover{background:#6d45ff}.app.dark .overlay{background:#ffffff2e}@keyframes fadeUp{to{opacity:1;transform:translateY(0) scale(1)}}footer{text-align:center;margin-top:40px;opacity:.7}