:root{--font-primary: system-ui, Avenir, Helvetica, Arial, sans-serif;--color-primary: #3b82f6;--color-primary-dark: #2563eb;--color-secondary: #10b981;--color-danger: #ef4444;--color-warning: #fecb1a;--color-text-primary: #1f2937;--color-text-secondary: #4b5563;--color-text-light: #f9fafb;--color-background: #f9fafb;--color-card-background: #ffffff;--color-border: #e5e7eb;--border-radius-sm: .25rem;--border-radius-md: .5rem;--border-radius-lg: .75rem;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--spacing-1: .25rem;--spacing-2: .5rem;--spacing-3: .75rem;--spacing-4: 1rem;--spacing-5: 1.25rem;--spacing-6: 1.5rem;--spacing-8: 2rem;--spacing-10: 2.5rem;font-family:var(--font-primary);line-height:1.5;font-weight:400;color:#333;background-color:#fff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background-color:var(--color-background);color:var(--color-text-primary);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;min-width:320px;min-height:100vh}a{font-weight:500;color:var(--color-primary);text-decoration:inherit}a:hover{color:var(--color-primary-dark)}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:var(--color-primary);cursor:pointer;transition:border-color .25s}button:hover{border-color:var(--color-primary-dark)}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}img{max-width:100%;height:auto;display:block}:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.search-bar-container{margin-bottom:var(--spacing-6);display:flex;justify-content:center;position:relative}.search-input{padding:var(--spacing-3) var(--spacing-4);width:100%;max-width:500px;border:1px solid var(--color-border);border-radius:var(--border-radius-md);font-size:1rem;transition:border-color .2s ease,box-shadow .2s ease;color:var(--color-text-primary)}.search-input::placeholder{color:var(--color-text-secondary);opacity:.8}.search-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #3b82f64d}.search-input::-webkit-search-cancel-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:1rem;width:1rem;margin-left:.5rem;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%239CA3AF'><path fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z' clip-rule='evenodd' /></svg>");cursor:pointer}.dog-card{background-color:var(--color-card-background);border:1px solid var(--color-border);border-radius:var(--border-radius-lg);padding:var(--spacing-4);cursor:pointer;transition:all .3s ease;box-shadow:var(--shadow-sm);width:100%;text-align:center;display:flex;flex-direction:column;gap:var(--spacing-3);height:280px;font-family:inherit}.dog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--color-primary)}.dog-card:focus{outline:2px solid var(--color-primary);outline-offset:2px}.dog-card-image-container{flex:1;display:flex;align-items:center;justify-content:center;background-color:var(--color-background);border-radius:var(--border-radius-md);overflow:hidden;position:relative;min-height:180px}.dog-card-image{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.dog-card:hover .dog-card-image{transform:scale(1.05)}.dog-card-content{padding:var(--spacing-2) 0}.dog-card-title{font-size:1.1rem;font-weight:600;color:var(--color-text-primary);margin:0 0 var(--spacing-1) 0;text-transform:capitalize}.dog-card-subbreeds{font-size:.875rem;color:var(--color-text-secondary);margin:0;font-style:italic}.spinner{border:4px solid rgba(0,0,0,.1);border-radius:50%;border-left-color:var(--color-primary);animation:spin 1s linear infinite}.spinner.large{width:48px;height:48px;border-width:5px}@keyframes spin{to{transform:rotate(360deg)}}.error-text{font-size:.8em;color:var(--color-danger);font-weight:500}.image-placeholder{font-size:3rem;color:var(--color-text-secondary);opacity:.5;font-weight:700}@media screen and (max-width: 480px){.dog-card{height:240px}.dog-card-image-container{min-height:140px}.dog-card-title{font-size:1rem}.dog-card-subbreeds{font-size:.8rem}}.dog-grid-container{width:100%;max-width:1600px;margin:0 auto;padding:var(--spacing-4);display:flex;justify-content:center;align-items:flex-start}.dog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--spacing-6);justify-content:center;justify-items:center;width:100%;max-width:1400px}.loading-message,.no-results-message{text-align:center;padding:var(--spacing-8) var(--spacing-4);font-size:1.1rem;color:var(--color-text-secondary);min-height:200px;display:flex;justify-content:center;align-items:center;background-color:var(--color-background);border-radius:var(--border-radius-lg);margin:var(--spacing-4) 0}@media screen and (max-width: 768px){.dog-grid-container{padding:var(--spacing-3)}.dog-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--spacing-4);max-width:100%}}@media screen and (max-width: 580px){.dog-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--spacing-3)}}@media screen and (max-width: 480px){.dog-grid-container{padding:var(--spacing-2)}.dog-grid{grid-template-columns:1fr;gap:var(--spacing-3);justify-items:center}}.pagination-container{display:flex;justify-content:center;align-items:center;padding:var(--spacing-6) 0;gap:var(--spacing-3)}.pagination-button{background-color:var(--color-card-background);color:var(--color-primary);border:1px solid var(--color-primary);padding:var(--spacing-2) var(--spacing-4);border-radius:var(--border-radius-md);font-size:.9rem;font-weight:500;transition:background-color .2s ease,color .2s ease,box-shadow .2s ease;line-height:1}.pagination-button:hover:not(:disabled){background-color:var(--color-primary);color:var(--color-text-light);box-shadow:var(--shadow-sm)}.pagination-button:focus-visible{outline-offset:1px}.pagination-button:disabled{background-color:var(--color-background);color:var(--color-text-secondary);border-color:var(--color-border);cursor:not-allowed;opacity:.7}.pagination-info{font-size:.95rem;color:var(--color-text-secondary);font-weight:500;white-space:nowrap}@media screen and (max-width: 480px){.pagination-container{gap:var(--spacing-2)}.pagination-button{padding:var(--spacing-2) var(--spacing-3);font-size:.85rem}.pagination-info{font-size:.9rem}}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#1f2937cc;display:flex;justify-content:center;align-items:center;z-index:1000;padding:var(--spacing-4);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:fadeInOverlay .3s ease-out}@keyframes fadeInOverlay{0%{opacity:0}to{opacity:1}}.modal-content{background-color:var(--color-card-background);padding:var(--spacing-6);border-radius:var(--border-radius-lg);position:relative;max-width:700px;width:90%;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-xl);animation:fadeInModal .3s ease-out .1s;animation-fill-mode:backwards;transform-origin:center;margin:auto}@keyframes fadeInModal{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.modal-close-button{position:absolute;top:var(--spacing-3);right:var(--spacing-4);background:none;border:none;font-size:2rem;cursor:pointer;color:var(--color-text-secondary);line-height:1;padding:var(--spacing-1);transition:color .2s ease,transform .2s ease}.modal-close-button:hover{color:var(--color-text-primary);transform:rotate(90deg)}.modal-title{margin:0 0 var(--spacing-5) 0;text-align:center;color:var(--color-text-primary);font-size:1.8rem;font-weight:600;text-transform:capitalize}.modal-body{display:grid;grid-template-columns:150px 1fr;gap:var(--spacing-6);align-items:start}.modal-image-section{display:flex;justify-content:center;align-items:center;background-color:var(--color-background);border-radius:var(--border-radius-md);padding:var(--spacing-2)}.modal-dog-image{object-fit:contain}.modal-details-section p{margin-bottom:var(--spacing-3);line-height:1.5;color:var(--color-text-secondary)}.modal-details-section p strong{color:var(--color-text-primary);font-weight:600}.abilities-section{margin-top:var(--spacing-4)}.abilities-section strong{display:block;margin-bottom:var(--spacing-2);color:var(--color-text-primary);font-weight:600}.abilities-list{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:var(--spacing-2);margin-bottom:var(--spacing-4)}.ability-button{background-color:var(--color-background);border:1px solid var(--color-border);padding:var(--spacing-1) var(--spacing-3);color:var(--color-primary);cursor:pointer;font-size:.9em;font-weight:500;text-transform:capitalize;border-radius:var(--border-radius-md);transition:all .2s ease;display:inline-flex;align-items:center;gap:var(--spacing-1)}.ability-button:hover:not(:disabled){background-color:var(--color-primary);color:var(--color-text-light);border-color:var(--color-primary)}.ability-button.active{background-color:var(--color-primary);color:var(--color-text-light);border-color:var(--color-primary);font-weight:600}.ability-button:disabled{color:var(--color-text-secondary);cursor:not-allowed;opacity:.7}.button-spinner{width:12px;height:12px;border:2px solid currentColor;border-bottom-color:transparent;border-radius:50%;display:inline-block;animation:spin .6s linear infinite;margin-left:var(--spacing-1)}.modal-loading,.modal-error{text-align:center;padding:var(--spacing-10) var(--spacing-4);min-height:250px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--spacing-4)}.modal-loading p,.modal-error p{font-size:1.1rem;color:var(--color-text-secondary)}.modal-error p.error-message-detail{color:var(--color-danger);font-weight:500;font-size:.95rem;background-color:#fee2e2;padding:var(--spacing-2) var(--spacing-3);border-radius:var(--border-radius-sm);border:1px solid #fca5a5}.ability-detail-wrapper{margin-top:var(--spacing-4);min-height:70px;transition:min-height .2s ease-out}@media screen and (max-width: 600px){.modal-overlay{padding:var(--spacing-2)}.modal-content{padding:var(--spacing-4);max-height:85vh;width:95%}.modal-title{font-size:1.5rem;margin-bottom:var(--spacing-4)}.modal-body{grid-template-columns:1fr;gap:var(--spacing-4)}.modal-image-section{margin-bottom:0}.modal-dog-image{width:120px;height:120px}.modal-details-section{text-align:left}.abilities-list{justify-content:center}}.app-container{min-height:100vh;width:100%;max-width:100vw;margin:0 auto;padding:var(--spacing-4);background-color:var(--color-card-background);display:flex;flex-direction:column;align-items:center}.app-header{text-align:center;margin-bottom:var(--spacing-6);flex-shrink:0}main{flex:1;display:flex;flex-direction:column;width:100%;max-width:100vw;margin:0 auto;align-items:center;justify-content:center}.app-header h1{font-size:2.5rem;font-weight:700;color:var(--color-warning);text-shadow:rgb(59,130,246) 6px 0px 0px,rgb(59,130,246) 5.91686px .995377px 0px,rgb(59,130,246) 5.66974px 1.96317px 0px,rgb(59,130,246) 5.2655px 2.87655px 0px,rgb(59,130,246) 4.71532px 3.71022px 0px,rgb(59,130,246) 4.03447px 4.44106px 0px,rgb(59,130,246) 3.24181px 5.04883px 0px,rgb(59,130,246) 2.35931px 5.51667px 0px,rgb(59,130,246) 1.41143px 5.83163px 0px,rgb(59,130,246) .424423px 5.98497px 0px,rgb(59,130,246) -.574341px 5.97245px 0px,rgb(59,130,246) -1.55719px 5.79441px 0px,rgb(59,130,246) -2.49688px 5.45578px 0px,rgb(59,130,246) -3.36738px 4.96596px 0px,rgb(59,130,246) -4.14455px 4.33852px 0px,rgb(59,130,246) -4.80686px 3.59083px 0px,rgb(59,130,246) -5.33596px 2.74364px 0px,rgb(59,130,246) -5.71718px 1.8204px 0px,rgb(59,130,246) -5.93996px .84672px 0px,rgb(59,130,246) -5.99811px -.150428px 0px,rgb(59,130,246) -5.89004px -1.14341px 0px,rgb(59,130,246) -5.61874px -2.1047px 0px,rgb(59,130,246) -5.19172px -3.00766px 0px,rgb(59,130,246) -4.62082px -3.82727px 0px,rgb(59,130,246) -3.92186px -4.54081px 0px,rgb(59,130,246) -3.11421px -5.12852px 0px,rgb(59,130,246) -2.22026px -5.57409px 0px,rgb(59,130,246) -1.26477px -5.86518px 0px,rgb(59,130,246) -.274238px -5.99373px 0px,rgb(59,130,246) .723898px -5.95617px 0px,rgb(59,130,246) 1.70197px -5.75355px 0px,rgb(59,130,246) 2.63288px -5.39147px 0px,rgb(59,130,246) 3.49082px -4.87998px 0px,rgb(59,130,246) 4.25202px -4.23324px 0px,rgb(59,130,246) 4.89538px -3.46919px 0px,rgb(59,130,246) 5.40307px -2.60899px 0px,rgb(59,130,246) 5.76102px -1.67649px 0px,rgb(59,130,246) 5.95932px -.697531px 0px;letter-spacing:-.5px}.error-message{background-color:#fee2e2;color:#b91c1c;border:1px solid #fca5a5;padding:var(--spacing-3) var(--spacing-4);border-radius:var(--border-radius-md);margin:var(--spacing-4) 0;text-align:center;font-weight:500}@media screen and (max-width: 768px){.app-container{padding:var(--spacing-2)}.app-header{margin-bottom:var(--spacing-4)}.app-header h1{font-size:2rem}}@media screen and (max-width: 480px){.app-container{padding:var(--spacing-1)}.app-header h1{font-size:1.75rem}}