:root{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;line-height:1.5;font-weight:400;color-scheme:light;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--color-primary: #d2691e;--color-primary-dark: #b8570f;--color-primary-light: #f4a460;--color-secondary: #228b22;--color-secondary-dark: #006400;--color-secondary-light: #90ee90;--color-accent: #cd853f;--color-accent-light: #deb887;--color-background: #fff8dc;--color-surface: #ffffff;--color-surface-variant: #f5f5dc;--color-text-primary: #2f4f2f;--color-text-secondary: #8b4513;--color-text-muted: #696969;--color-text-on-primary: #ffffff;--color-border: #ddd3c0;--color-border-light: #f0e68c;--color-border-focus: var(--color-primary);--color-success: #32cd32;--color-success-bg: #f0fff0;--color-warning: #ff8c00;--color-warning-bg: #fff8dc;--color-error: #dc143c;--color-error-bg: #ffe4e1;--toast-z-index: 10000;--toast-max-width: 400px;--toast-min-width: 300px;--toast-gap: 12px;--toast-inset-top: 20px;--toast-inset-bottom: 20px;--toast-inset-left: 20px;--toast-inset-right: 20px;--toast-border-radius: 12px;--toast-padding: 16px 20px;--toast-shadow: var(--shadow-lg);--toast-border: 1px solid var(--color-border);--toast-font-size: 14px;--toast-font-weight: 500;--toast-icon-size: 20px;--toast-close-size: 18px;--toast-progress-height: 3px;--toast-transition: all .4s cubic-bezier(.32, .72, 0, 1);--toast-stack-offset-1: 8px;--toast-stack-offset-2: 16px;--toast-stack-offset-3: 24px;--toast-stack-scale-1: .96;--toast-stack-scale-2: .92;--toast-stack-scale-3: .88;--toast-stack-opacity-1: .92;--toast-stack-opacity-2: .8;--toast-stack-opacity-3: .6;--toast-stack-total-offset: 32px;--toast-height: 72px;--color-primary-bg: color-mix(in srgb, var(--color-primary) 10%, transparent);--shadow-sm: 0 2px 4px rgba(139, 69, 19, .1);--shadow-md: 0 4px 6px rgba(139, 69, 19, .15);--shadow-lg: 0 8px 25px rgba(139, 69, 19, .2);--shadow-hover: 0 8px 25px rgba(210, 105, 30, .25);--transition-fast: .2s ease;--transition-normal: .3s ease;color:var(--color-text-primary);background-color:var(--color-background)}*{box-sizing:border-box}html,body{margin:0;padding:0;min-height:100vh}#app{min-height:100vh;width:100%}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.2}p{line-height:1.5}button{font-family:inherit}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--color-surface-variant)}::-webkit-scrollbar-thumb{background:var(--color-primary);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--color-primary-dark)}img{max-width:100%;height:auto}.btn{padding:.5rem 1rem;border:none;border-radius:6px;font-size:.875rem;font-weight:500;cursor:pointer;transition:var(--transition-fast);font-family:inherit;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-primary{background:var(--color-primary);color:var(--color-text-on-primary)}.btn-primary:hover:not(:disabled){background:var(--color-primary-dark)}.btn-secondary{background:var(--color-secondary);color:var(--color-text-on-primary)}.btn-secondary:hover:not(:disabled){background:var(--color-secondary-dark)}.btn-danger{background:var(--color-error);color:var(--color-text-on-primary)}.btn-danger:hover:not(:disabled){background:#b91c2c}.btn-small{padding:.25rem .5rem;font-size:.75rem;min-height:32px}.btn-outline{background:transparent;border:2px solid var(--color-primary);color:var(--color-primary)}.btn-outline:hover:not(:disabled){background:var(--color-primary);color:var(--color-text-on-primary)}.tag{display:inline-block;padding:.25rem .5rem;border-radius:12px;font-size:.75rem;font-weight:500;text-align:center}.tag-primary{background:var(--color-accent-light);color:var(--color-text-secondary)}.tag-success{background:var(--color-success-bg);color:var(--color-secondary-dark)}.tag-info{background:var(--color-primary);color:var(--color-text-on-primary)}.tag-large{padding:.5rem .75rem;font-size:.875rem;font-weight:600}.input,.select{padding:.75rem;border:2px solid var(--color-border);border-radius:8px;font-size:1rem;transition:var(--transition-fast);background:var(--color-surface);color:var(--color-text-primary);font-family:inherit;width:100%}.input:focus,.select:focus{outline:none;border-color:var(--color-border-focus)}.input::placeholder{color:var(--color-text-muted)}.card{background:var(--color-surface);border-radius:12px;overflow:hidden;box-shadow:var(--shadow-md);transition:var(--transition-normal)}.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}.card-clickable{cursor:pointer}.card-content{padding:1.5rem}.card-header{padding:1rem 1.5rem;border-bottom:1px solid var(--color-border);background:var(--color-surface-variant)}.card-title{margin:0;font-size:1.25rem;font-weight:600;color:var(--color-text-primary)}.card-actions{display:flex;gap:.75rem;margin-top:1rem;flex-wrap:wrap}@media (max-width: 768px){.card-content{padding:1rem}.card-header{padding:.75rem 1rem}.card-actions{flex-direction:column}.btn{width:100%}}.dog-breed-card{display:block}.card-image{width:100%;height:200px;object-fit:cover;background:var(--color-surface-variant)}.breed-name{font-size:1.25rem;font-weight:600;color:var(--color-text-primary);margin:0 0 .5rem}.breed-info{display:flex;gap:1rem;margin-bottom:1rem;font-size:.875rem;color:var(--color-text-muted);flex-wrap:wrap}.info-item{display:flex;align-items:center;gap:.25rem}.breed-group{margin-bottom:1rem}.sighting-info{background:var(--color-success-bg);color:var(--color-secondary-dark);padding:.75rem;border-radius:6px;margin-bottom:1rem;font-size:.875rem}.logged-badge{background:var(--color-primary);color:var(--color-text-on-primary);padding:.5rem .75rem;border-radius:6px;font-weight:600;font-size:.875rem;margin-bottom:1rem;display:flex;align-items:center;justify-content:space-between}.logged-count{font-size:1.25rem;font-weight:700}.logged-details{font-size:.75rem;opacity:.9;margin-top:.25rem}.sighting-count{font-weight:600}@media (max-width: 768px){.breed-info{flex-direction:column;gap:.5rem}}.filter-controls{display:block}.filters{display:flex;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap}.search-input{flex:1;min-width:250px}.filter-select{min-width:140px}@media (max-width: 768px){.filters{flex-direction:column}.search-input{min-width:100%}}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}login-view{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:1rem;background:var(--color-background)}.login-container{background:var(--color-surface);padding:2rem;border-radius:12px;box-shadow:var(--shadow-md);max-width:400px;width:100%;text-align:center}.login-logo{font-size:2.5rem;color:var(--color-primary);margin-bottom:1rem}.login-container h1{color:var(--color-text-primary);margin-bottom:1rem;font-size:1.5rem}.login-description{color:var(--color-text-secondary);margin-bottom:2rem;line-height:1.6}.login-button{width:100%}.login-back-button{margin-top:1rem}.login-divider{display:flex;align-items:center;margin:1.5rem 0;text-align:center;color:var(--color-text-muted)}.login-divider:before,.login-divider:after{content:"";flex:1;height:1px;background:var(--color-border)}.login-divider span{margin:0 1rem;font-size:.9rem}.login-info-text{font-size:.85rem;color:var(--color-text-muted);line-height:1.5;margin-top:1.5rem;text-align:left;background:var(--color-surface-variant);padding:1rem;border-radius:8px}.login-message{margin-top:1rem;padding:1rem;border-radius:8px;font-size:.9rem}.login-message.success{background:var(--color-success);color:#fff}.login-message.error{background:var(--color-error);color:#fff}.loading-spinner{display:inline-block;width:16px;height:16px;border:2px solid transparent;border-top:2px solid currentColor;border-radius:50%;animation:spin 1s linear infinite;margin-right:.5rem}.form-group{margin-bottom:1.5rem;text-align:left}.form-label{display:block;margin-bottom:.5rem;font-weight:600;color:var(--color-text-primary)}.form-input,.form-textarea{width:100%;padding:.75rem;border:2px solid var(--color-border);border-radius:8px;font-size:1rem;transition:var(--transition-fast);background:var(--color-surface);color:var(--color-text-primary);font-family:inherit;box-sizing:border-box}.form-input:focus,.form-textarea:focus{outline:none;border-color:var(--color-border-focus)}.form-input::placeholder{color:var(--color-text-muted)}.form-textarea{resize:vertical;min-height:100px}.upgrade-info{background:var(--color-success-bg);border-left:4px solid var(--color-secondary);padding:1rem;border-radius:8px;margin-bottom:1.5rem}.upgrade-info h4{margin:0 0 .75rem;color:var(--color-text-primary);font-size:1rem;font-weight:600}.benefits-list{list-style:none;padding:0;margin:0}.benefits-list li{padding:.5rem 0;display:flex;align-items:center;color:var(--color-text-secondary);font-size:.875rem}.benefits-list li:before{content:"✓";color:var(--color-secondary);font-weight:700;margin-right:.5rem}.upgrade-actions{display:flex;gap:.75rem;margin-top:1.5rem}.upgrade-actions .btn{flex:1}.upgrade-message{margin-top:1rem;padding:1rem;border-radius:8px;font-size:.875rem}.upgrade-message.success{background:var(--color-success);color:#fff}.upgrade-message.error{background:var(--color-error);color:#fff}