@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap";:root{--c-primary: #6366f1;--c-primary-dark: #4f46e5;--c-primary-light: #e0e7ff;--c-bg: #f1f5f9;--c-surface: #ffffff;--c-surface-2: #f8fafc;--c-border: #e2e8f0;--c-text: #0f172a;--c-text-muted: #475569;--c-text-subtle: #94a3b8;--c-error: #ef4444;--c-error-bg: #fef2f2;--c-error-border: #fecaca;--shadow-sm: 0 1px 3px rgb(0 0 0 / .06), 0 1px 2px rgb(0 0 0 / .04);--shadow-md: 0 4px 12px rgb(0 0 0 / .08), 0 2px 4px rgb(0 0 0 / .04);--shadow-lg: 0 10px 28px rgb(0 0 0 / .1), 0 4px 8px rgb(0 0 0 / .06);--shadow-card: 0 2px 8px rgb(0 0 0 / .06);--shadow-hover:0 8px 28px rgb(0 0 0 / .14);--r-sm: 6px;--r-md: 10px;--r-lg: 16px;--r-xl: 20px;--r-full: 9999px;--sp-1: .25rem;--sp-2: .5rem;--sp-3: .75rem;--sp-4: 1rem;--sp-5: 1.25rem;--sp-6: 1.5rem;--sp-8: 2rem;--sp-10: 2.5rem;--sp-12: 3rem;--font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;--t-fast: .15s cubic-bezier(.4, 0, .2, 1);--t-base: .25s cubic-bezier(.4, 0, .2, 1);--t-slow: .4s cubic-bezier(.4, 0, .2, 1);--header-h: 68px;--container: 1440px}[data-theme=dark]{--c-bg: #0f172a;--c-surface: #1e293b;--c-surface-2: #263344;--c-border: #334155;--c-text: #f1f5f9;--c-text-muted: #94a3b8;--c-text-subtle: #64748b;--c-primary-light: #1e1b4b;--c-error-bg: #1f0505;--c-error-border: #7f1d1d;--shadow-sm: 0 1px 3px rgb(0 0 0 / .25), 0 1px 2px rgb(0 0 0 / .15);--shadow-md: 0 4px 12px rgb(0 0 0 / .35), 0 2px 4px rgb(0 0 0 / .2);--shadow-card: 0 2px 8px rgb(0 0 0 / .3);--shadow-hover:0 8px 28px rgb(0 0 0 / .5)}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}body{font-family:var(--font);font-size:1rem;line-height:1.5;background-color:var(--c-bg);color:var(--c-text);transition:background-color var(--t-base),color var(--t-base);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{text-decoration:none;color:inherit}ul{list-style:none}img{display:block;max-width:100%}button{cursor:pointer;border:none;background:none;font-family:inherit}.app{display:flex;flex-direction:column;min-height:100vh}.main-content{flex:1;width:100%;max-width:var(--container);margin:0 auto;padding:var(--sp-8) var(--sp-6)}.header{position:sticky;top:0;z-index:100;background:#1e1b4b;border-bottom:1px solid rgba(255 255 255 / .07);box-shadow:0 2px 20px #0000004d}.header-inner{display:flex;align-items:center;gap:var(--sp-4);width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--sp-6);height:var(--header-h);flex-wrap:wrap}.logo{display:flex;align-items:center;gap:var(--sp-2);flex-shrink:0;text-decoration:none}.logo-img{width:34px;height:34px;border-radius:var(--r-sm)}.logo-text{font-size:1.375rem;font-weight:800;letter-spacing:-.03em;background:linear-gradient(135deg,#a5b4fc,#e0e7ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.logo-version{font-size:.6875rem;font-weight:500;color:#ffffff59;margin-top:.1em;flex-shrink:0;align-self:flex-end;padding-bottom:.1em}.search-form{flex:1;display:flex;align-items:center;gap:var(--sp-2);max-width:540px;margin:0 auto}.search-input-wrapper{position:relative;flex:1}.search-icon{position:absolute;left:var(--sp-3);top:50%;transform:translateY(-50%);color:#fff6;pointer-events:none;display:flex;align-items:center}.input-elevated{width:100%;height:42px;padding:0 var(--sp-4) 0 2.5rem;background:#ffffff14;border:1.5px solid rgba(255 255 255 / .14);border-radius:var(--r-full);color:#fff;font-family:var(--font);font-size:.9375rem;transition:border-color var(--t-fast),background var(--t-fast),box-shadow var(--t-fast);outline:none}.input-elevated::placeholder{color:#ffffff61}.input-elevated:focus{background:#ffffff1f;border-color:#a5b4fca6;box-shadow:0 0 0 3px #6366f14d}.header-error-bar{padding:var(--sp-2) var(--sp-6);background:var(--c-error-bg);border-top:1px solid var(--c-error-border);text-align:center}.errorMsg{color:var(--c-error);font-size:.8125rem;font-weight:600}.error-card .errorMsg{color:#b91c1c;font-size:.875rem;font-weight:400}[data-theme=dark] .error-card .errorMsg{color:#f87171}.btn-search{height:42px;padding:0 var(--sp-5);background:var(--c-primary);color:#fff;font-family:var(--font);font-size:.875rem;font-weight:600;border-radius:var(--r-full);border:none;cursor:pointer;flex-shrink:0;transition:background var(--t-fast),transform var(--t-fast),box-shadow var(--t-fast);white-space:nowrap}.btn-search:hover{background:var(--c-primary-dark);box-shadow:0 4px 14px #6366f173;transform:translateY(-1px)}.btn-search:active{transform:translateY(0)}.header-actions{display:flex;align-items:center;gap:var(--sp-2);flex-shrink:0;margin-left:auto}.btn-icon{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-full);background:#ffffff14;color:#ffffffa6;border:1.5px solid rgba(255 255 255 / .1);transition:background var(--t-fast),color var(--t-fast),transform var(--t-fast);cursor:pointer}.btn-icon:hover{background:#ffffff29;color:#fff}.btn-icon--theme:hover{transform:rotate(20deg)}.results-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-3);margin-bottom:var(--sp-6)}.results-info{font-size:.9375rem;color:var(--c-text-muted)}.results-info strong{color:var(--c-text);font-weight:700}.results-query{color:var(--c-primary);font-style:italic}.popular-tags{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center}.popular-label{font-size:.8125rem;font-weight:600;color:var(--c-text-subtle);text-transform:uppercase;letter-spacing:.06em;flex-shrink:0}.tag-chip{display:inline-flex;align-items:center;gap:4px;padding:4px var(--sp-3);background:var(--c-surface);border:1.5px solid var(--c-border);border-radius:var(--r-full);color:var(--c-text-muted);font-size:.8125rem;font-weight:500;cursor:pointer;transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast),transform var(--t-fast);white-space:nowrap}.tag-chip:hover{background:var(--c-primary-light);border-color:var(--c-primary);color:var(--c-primary-dark);transform:translateY(-1px)}[data-theme=dark] .tag-chip:hover{background:#6366f133;color:#a5b4fc}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--sp-5)}.card-style{background:var(--c-surface);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-card);border:1px solid var(--c-border);transition:transform var(--t-base),box-shadow var(--t-base);display:flex;flex-direction:column;animation:fadeInUp var(--t-slow) ease both}.card-style:hover{transform:translateY(-5px);box-shadow:var(--shadow-hover)}.card-image-wrap{position:relative;aspect-ratio:4 / 3;overflow:hidden;background:var(--c-surface-2)}.image-style{width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow),opacity var(--t-base)}.card-style:hover .image-style{transform:scale(1.05)}.image-style.loading{opacity:.5}.card-body{padding:var(--sp-4);flex:1;display:flex;flex-direction:column;gap:var(--sp-3)}.card-tags{display:flex;flex-wrap:wrap;gap:var(--sp-1);min-height:1.375rem}.card-tag{display:inline-block;padding:2px 10px;background:var(--c-primary-light);color:var(--c-primary-dark);font-size:.6875rem;font-weight:600;border-radius:var(--r-full);text-transform:capitalize;letter-spacing:.01em}[data-theme=dark] .card-tag{background:#6366f133;color:#a5b4fc}.card-footer{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);margin-top:auto}.card-stats{display:flex;align-items:center;gap:var(--sp-3);color:var(--c-text-muted);font-size:.8125rem;font-weight:500}.card-stat{display:flex;align-items:center;gap:4px}.btn-card{display:inline-flex;align-items:center;gap:5px;padding:var(--sp-2) var(--sp-4);background:var(--c-primary);color:#fff;font-size:.8125rem;font-weight:600;border-radius:var(--r-full);text-decoration:none;transition:background var(--t-fast),box-shadow var(--t-fast),transform var(--t-fast);flex-shrink:0;white-space:nowrap}.btn-card:hover{background:var(--c-primary-dark);box-shadow:0 4px 12px #6366f166;transform:translateY(-1px)}.loading-container{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.loading-spinner{display:inline-block;width:1px;height:1px}.skeleton-wrapper{width:100%}.loading-header{display:flex;align-items:center;justify-content:center;gap:var(--sp-3);padding:var(--sp-4) 0 var(--sp-8);color:var(--c-text-muted);font-size:.9375rem;font-weight:500}.loading-pulse{display:flex;gap:4px;align-items:center}.loading-pulse span{display:inline-block;width:6px;height:6px;border-radius:var(--r-full);background:var(--c-primary);animation:pulseDot 1.4s ease-in-out infinite}.loading-pulse span:nth-child(2){animation-delay:.16s}.loading-pulse span:nth-child(3){animation-delay:.32s}@keyframes pulseDot{0%,80%,to{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}.skeleton-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--sp-5)}.skeleton-card{background:var(--c-surface);border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--c-border)}.skeleton-img{aspect-ratio:4 / 3;position:relative;overflow:hidden;background:var(--c-surface-2)}.skeleton-body{padding:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-3)}.skeleton-line{height:11px;border-radius:var(--r-full);background:var(--c-surface-2);position:relative;overflow:hidden}.skeleton-line--short{width:65%}.skeleton-line--xshort{width:45%}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(200%)}}.skeleton-img:after,.skeleton-line:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,transparent 0%,rgba(255 255 255 / .55) 50%,transparent 100%);animation:shimmer 1.5s ease-in-out infinite}[data-theme=dark] .skeleton-img:after,[data-theme=dark] .skeleton-line:after{background:linear-gradient(90deg,transparent 0%,rgba(255 255 255 / .07) 50%,transparent 100%)}.empty-state{text-align:center;padding:var(--sp-12) var(--sp-6);max-width:500px;margin:0 auto;animation:fadeInUp var(--t-slow) ease both}.empty-state-icon{display:inline-flex;align-items:center;justify-content:center;width:80px;height:80px;border-radius:var(--r-xl);background:var(--c-primary-light);color:var(--c-primary);margin-bottom:var(--sp-5);font-size:2.25rem}[data-theme=dark] .empty-state-icon{background:#6366f126;color:#a5b4fc}.empty-state h3{font-size:1.375rem;font-weight:700;color:var(--c-text);margin-bottom:var(--sp-2);letter-spacing:-.02em}.empty-state p{color:var(--c-text-muted);font-size:.9375rem;line-height:1.6;margin-bottom:var(--sp-2)}.empty-state p:last-of-type{margin-bottom:0}.error-container{padding:var(--sp-8) var(--sp-6);max-width:560px;margin:0 auto;animation:fadeInUp var(--t-slow) ease both}.error-card{display:flex;align-items:flex-start;gap:var(--sp-4);background:var(--c-error-bg);border:1px solid var(--c-error-border);border-radius:var(--r-lg);padding:var(--sp-5)}.error-icon-wrap{flex-shrink:0;width:42px;height:42px;display:flex;align-items:center;justify-content:center;background:#ef44441f;border-radius:var(--r-md);color:var(--c-error)}.error-body{flex:1}.error-body h4{font-size:.9375rem;font-weight:700;color:#991b1b;margin-bottom:var(--sp-1)}[data-theme=dark] .error-body h4{color:#fca5a5}.error-message{font-size:.875rem;color:#b91c1c}[data-theme=dark] .error-message{color:#f87171}.pagination{display:flex;align-items:center;justify-content:center;gap:var(--sp-3);margin:var(--sp-10) 0 var(--sp-6);flex-wrap:wrap}.btn-page{display:inline-flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-5);background:var(--c-surface);color:var(--c-text);font-family:var(--font);font-size:.875rem;font-weight:600;border-radius:var(--r-full);border:1.5px solid var(--c-border);cursor:pointer;transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast),transform var(--t-fast),box-shadow var(--t-fast);box-shadow:var(--shadow-sm)}.btn-page:hover:not(:disabled){background:var(--c-primary);border-color:var(--c-primary);color:#fff;transform:translateY(-1px);box-shadow:0 4px 12px #6366f159}.btn-page:active:not(:disabled){transform:translateY(0)}.btn-page:disabled{opacity:.38;cursor:not-allowed}.page-info{font-size:.875rem;font-weight:600;color:var(--c-text-muted);min-width:96px;text-align:center}.footer{background:var(--c-surface);border-top:1px solid var(--c-border);padding:var(--sp-6);margin-top:auto}.footer-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-4);max-width:var(--container);margin:0 auto}.footer-copy{font-size:.875rem;color:var(--c-text-muted)}.footer-copy strong{color:var(--c-text);font-weight:600}.footer-links{display:flex;align-items:center;gap:var(--sp-4)}.footer-link{display:flex;align-items:center;gap:5px;font-size:.8125rem;color:var(--c-text-subtle);font-weight:500;transition:color var(--t-fast)}.footer-link:hover{color:var(--c-primary)}.footer-badge{font-size:.8125rem;color:var(--c-text-subtle);font-style:italic}@keyframes fadeInUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.card-grid .card-style:nth-child(1){animation-delay:0ms}.card-grid .card-style:nth-child(2){animation-delay:40ms}.card-grid .card-style:nth-child(3){animation-delay:80ms}.card-grid .card-style:nth-child(4){animation-delay:.12s}.card-grid .card-style:nth-child(5){animation-delay:.16s}.card-grid .card-style:nth-child(6){animation-delay:.2s}.card-grid .card-style:nth-child(7){animation-delay:.24s}.card-grid .card-style:nth-child(8){animation-delay:.28s}.card-grid .card-style:nth-child(9){animation-delay:.32s}.card-grid .card-style:nth-child(10){animation-delay:.36s}.card-grid .card-style:nth-child(11){animation-delay:.4s}.card-grid .card-style:nth-child(12){animation-delay:.44s}@media(max-width:640px){.header-inner{padding:var(--sp-3) var(--sp-4);height:auto;gap:var(--sp-2)}.search-form{order:3;width:100%;max-width:none;margin:0;padding-bottom:var(--sp-3)}.header-actions{margin-left:auto}.logo-version{display:none}.main-content{padding:var(--sp-5) var(--sp-4)}.card-grid,.skeleton-grid{grid-template-columns:1fr}.footer-inner{flex-direction:column;align-items:flex-start;gap:var(--sp-3)}.results-header{flex-direction:column;align-items:flex-start}}@media(min-width:641px)and (max-width:1024px){.card-grid,.skeleton-grid{grid-template-columns:repeat(2,1fr)}}@media(min-width:1025px){.card-grid,.skeleton-grid{grid-template-columns:repeat(3,1fr)}}@media(min-width:1400px){.card-grid,.skeleton-grid{grid-template-columns:repeat(4,1fr)}}