:root{--bg-color: #ffffff;--text-color: #222222;--link-color: #000000;--card-bg: #f4f4f4;--card-shadow: rgba(0, 0, 0, 0.1);--input-bg: #f1f1f1;--input-border: #cccccc;--input-text: #222222;--btn-bg: #2196F3;--btn-hover-bg: #0b7dda;--btn-text: #ffffff;--skeleton-base: #e0e0e0;--skeleton-highlight: #f5f5f5;--heart-color: rgba(255, 255, 255, 0.8);--heart-active: #e74c3c;--tag-bg: #e0e0e0;--tag-active-bg: #333333;--tag-active-text: #ffffff;--scrollbar-bg: #f1f1f1;--scrollbar-thumb: #c1c1c1;--scrollbar-thumb-hover: #a8a8a8}[data-theme="dark"]{--bg-color: #121212;--text-color: #e0e0e0;--link-color: #ffffff;--card-bg: #1e1e1e;--card-shadow: rgba(0, 0, 0, 0.5);--input-bg: #222222;--input-border: #333333;--input-text: #e0e0e0;--btn-bg: #333333;--btn-hover-bg: #444444;--btn-text: #e0e0e0;--skeleton-base: #2a2a2a;--skeleton-highlight: #3a3a3a;--heart-color: rgba(255, 255, 255, 0.5);--tag-bg: #2a2a2a;--tag-active-bg: #e0e0e0;--tag-active-text: #121212;--scrollbar-bg: #1e1e1e;--scrollbar-thumb: #444444;--scrollbar-thumb-hover: #666666}::-webkit-scrollbar{width: 10px;height: 10px}::-webkit-scrollbar-track{background: var(--scrollbar-bg)}::-webkit-scrollbar-thumb{background: var(--scrollbar-thumb);border-radius: 5px}::-webkit-scrollbar-thumb:hover{background: var(--scrollbar-thumb-hover)}*{scrollbar-width: thin;scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-bg);box-sizing: border-box}body{background-color: var(--bg-color);color: var(--text-color);transition: background-color 0.3s, color 0.3s;font-family: "Verdana", "Geneva", "Tahoma", sans-serif;max-width: 1200px;margin: 0 auto;padding: 20px}h1, p.about{text-align: center}.GIFCounter{color: #0b4cda}a:link, a:visited, a:active{color: var(--link-color);text-decoration: none}a:hover{color: var(--link-color);text-decoration: underline}.theme-toggle{position: absolute;top: 20px;right: 20px;background: none;border: none;color: var(--text-color);font-size: 24px;cursor: pointer}form.searchForm{max-width: 600px;margin: 20px auto}form.searchForm input[type=text]{padding: 10px 15px;font-size: 17px;border: 1px solid var(--input-border);float: left;width: 80%;background: var(--input-bg);color: var(--input-text);border-radius: 6px 0 0 6px;outline: none}form.searchForm button{float: left;width: 20%;padding: 10px;background: var(--btn-bg);color: var(--btn-text);font-size: 17px;border: 1px solid var(--input-border);border-left: none;border-radius: 0 6px 6px 0;cursor: pointer;transition: background 0.2s}form.searchForm button:hover{background: var(--btn-hover-bg)}form.searchForm::after{content: "";clear: both;display: table}.tags-container{display: flex;gap: 10px;margin-top: 15px;justify-content: center}.tag-btn{background-color: var(--tag-bg);color: var(--text-color);border: none;padding: 8px 16px;border-radius: 20px;cursor: pointer;font-size: 14px;transition: all 0.2s}.tag-btn.active{background-color: var(--tag-active-bg);color: var(--tag-active-text);font-weight: bold}.results-container{display: grid;grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));gap: 20px;margin-top: 25px;padding: 10px 0}.gif-card{position: relative;background: var(--card-bg);border-radius: 8px;overflow: hidden;box-shadow: 0 2px 5px var(--card-shadow);min-height: 200px;display: flex;align-items: center;justify-content: center;cursor: pointer}.crop-wrapper{width: 100%;height: 100%;overflow: hidden;position: relative;display: flex;align-items: center;justify-content: center}.crop-wrapper img{width: 100%;object-fit: contain;opacity: 0;transition: opacity 0.3s ease-in-out}.crop-wrapper img.loaded{opacity: 1}.gif-card.loading{background: linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-highlight) 50%, var(--skeleton-base) 75%);background-size: 200% 100%;animation: shimmer 1.5s infinite}@keyframes shimmer{0%{background-position: 200% 0}100%{background-position: -200% 0}}.favorite-btn{position: absolute;top: 10px;right: 10px;background: rgba(0, 0, 0, 0.5);border: none;color: var(--heart-color);font-size: 18px;width: 34px;height: 34px;border-radius: 50%;cursor: pointer;display: flex;align-items: center;justify-content: center;transition: transform 0.2s, color 0.2s;z-index: 5}.favorite-btn:hover{transform: scale(1.1)}.favorite-btn.active{color: var(--heart-active)}.toast-notification{position: fixed;bottom: 30px;left: 50%;transform: translateX(-50%);background-color: rgba(0, 0, 0, 0.85);color: #ffffff;padding: 10px 20px;border-radius: 20px;font-size: 14px;z-index: 1000;pointer-events: none;animation: fadeInOut 2s forwards}@keyframes fadeInOut{0%{opacity: 0;transform: translate(-50%, 20px)}15%{opacity: 1;transform: translate(-50%, 0)}85%{opacity: 1;transform: translate(-50%, 0)}100%{opacity: 0;transform: translate(-50%, -10px)}}.no-results, .error{grid-column: 1 / -1;text-align: center;color: #777;font-size: 18px;margin-top: 20px}.favorite-btn{position: absolute;top: 10px;right: 10px;background: rgba(0, 0, 0, 0.55);border: none;color: var(--heart-color);width: 36px;height: 36px;border-radius: 50%;cursor: pointer;display: flex;align-items: center;justify-content: center;padding: 0;margin: 0;transition: transform 0.2s, color 0.2s, background-color 0.2s;z-index: 5}.favorite-btn i{font-size: 18px;line-height: 1;display: block;margin-top: 1px}.favorite-btn:hover{transform: scale(1.1);background: rgba(0, 0, 0, 0.75)}.favorite-btn.active{color: var(--heart-active)}.scroll-top-btn{position: fixed;bottom: 30px;right: 30px;width: 45px;height: 45px;background-color: var(--btn-bg);color: var(--btn-text);border: 1px solid var(--input-border);border-radius: 50%;cursor: pointer;display: flex;align-items: center;justify-content: center;font-size: 20px;box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);opacity: 0;visibility: hidden;transition: opacity 0.3s, visibility 0.3s, transform 0.2s, background-color 0.2s;z-index: 999}.scroll-top-btn.visible{opacity: 1;visibility: visible}.scroll-top-btn:hover{transform: scale(1.1);background-color: var(--btn-hover-bg)}