*{margin:0;padding:0;box-sizing:border-box}body{font-family:Arial,sans-serif;background-color:#1a1a1a;color:#e0e0e0;transition:background-color .3s ease,color .3s ease}.container{max-width:1400px;margin:0 auto;padding:20px}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;flex-wrap:wrap;gap:20px}.header h1{font-size:32px;color:#f0f0f0;flex:1;min-width:200px}.view-toggle{display:flex;gap:10px;align-items:center}.view-toggle a,.view-toggle button{padding:10px 20px;border-radius:8px;border:1px solid #555;background:#3d3d3d;color:#e0e0e0;cursor:pointer;text-decoration:none;transition:all .3s ease;font-size:14px;font-weight:700}.view-toggle a:hover,.view-toggle button:hover{background:#555;border-color:#777}.view-toggle .active{background:#0d6efd;border-color:#0d6efd;color:#fff}.filter-toggle-container{margin-bottom:20px;display:flex;justify-content:flex-start}.filter-toggle-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid #555;border-radius:8px;background:#3d3d3d;color:#e0e0e0;cursor:pointer;font-weight:700;font-size:14px;transition:all .3s ease}.filter-toggle-btn:hover{background:#555;border-color:#777}.filter-icon{width:20px;height:20px}.filters{background:#2d2d2d;padding:20px;border-radius:12px;margin-bottom:30px;border:1px solid #404040;max-height:1000px;overflow:hidden;transition:max-height .3s ease,opacity .3s ease,margin-bottom .3s ease;opacity:1}.filters.hidden{max-height:0;opacity:0;margin-bottom:0;padding:0;border:none}.filters h3{margin-bottom:15px;color:#f0f0f0;font-size:16px}.filter-group{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px;margin-bottom:15px}.filter-group:last-child{margin-bottom:0}.filter-item{display:flex;flex-direction:column;gap:5px}.filter-item label{font-size:12px;font-weight:700;color:silver;text-transform:uppercase}.filter-item select,.filter-item input{padding:8px 12px;border:1px solid #555;border-radius:6px;background:#3d3d3d;color:#e0e0e0;font-size:14px}.filter-item select:focus,.filter-item input:focus{outline:none;border-color:#0d6efd;box-shadow:0 0 0 2px #0d6efd40}.filter-buttons{display:flex;gap:10px;margin-top:15px}.filter-buttons button{padding:10px 20px;border:none;border-radius:6px;cursor:pointer;font-weight:700;font-size:14px;transition:all .3s ease}.btn-apply{background:#0d6efd;color:#fff}.btn-apply:hover{background:#0b5ed7}.btn-reset{background:#6c757d;color:#fff}.btn-reset:hover{background:#5c636a}.pets-grid{margin-bottom:40px;display:flex;flex-wrap:wrap;gap:25px}.pet-card{background:#2d2d2d;border-radius:12px;overflow:hidden;border:1px solid #404040;box-shadow:0 4px 16px #0000004d;transition:all .3s ease;cursor:pointer;display:flex;flex-direction:column;height:100%;width:calc(50% - 12.5px)}.pet-card:hover{transform:translateY(-8px);box-shadow:0 8px 32px #0d6efd4d;border-color:#0d6efd}.pet-image-container{position:relative;width:100%;height:375px;background:#404040;overflow:hidden;display:flex;align-items:center;justify-content:center}.pet-image{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .3s ease}.pet-card:hover .pet-image{transform:scale(1.05)}.no-photo{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#999;font-size:18px;font-weight:700}.pet-info{padding:20px;flex-grow:1;display:flex;flex-direction:column;justify-content:space-between}.pet-header{margin-bottom:15px}.pet-name{font-size:22px;font-weight:700;color:#f0f0f0;margin-bottom:5px}.pet-id{font-size:12px;color:#999;font-weight:700}.pet-details{display:flex;flex-direction:column;gap:8px;margin-bottom:15px;font-size:13px}.pet-detail-item{color:silver}.pet-detail-item strong{color:#e0e0e0;font-weight:700}.pet-action{padding-top:15px;border-top:1px solid #404040}.btn-view-details{width:100%;padding:10px;background:linear-gradient(135deg,#0d6efd,#0b5ed7);color:#fff;border:none;border-radius:6px;cursor:pointer;font-weight:700;font-size:14px;transition:all .3s ease}.btn-view-details:hover{background:linear-gradient(135deg,#0b5ed7,#0a58ca);transform:scale(1.02)}.no-pets{text-align:center;padding:60px 20px;color:#b0b0b0}.no-pets h3{font-size:32px;margin-bottom:20px;color:#e0e0e0}.no-pets code{background-color:#333;color:#f8f8f2;padding:4px 8px;border-radius:4px;font-family:Courier New,monospace}.modal{display:none;position:fixed;z-index:2000;left:0;top:0;width:100%;height:100%;background-color:#000c;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);overflow-y:auto}.modal.show{display:block}.modal-content{background-color:#2d2d2d;margin:20px auto;padding:30px;border-radius:16px;width:90%;max-width:1000px;position:relative;border:1px solid #404040;box-shadow:0 8px 32px #00000080;max-height:95vh;overflow-y:auto}.modal-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:30px;padding-bottom:20px;border-bottom:2px solid #404040}.close{color:#999;font-size:28px;font-weight:700;cursor:pointer;transition:color .3s;background:none;border:none;padding:0}.close:hover{color:#fff}.modal-images-full{display:flex;flex-direction:column;gap:15px;margin-bottom:30px;width:100%}.slideshow-container{position:relative;width:100%;height:500px;background:#404040;border-radius:12px;overflow:hidden}.modal-body{display:grid;grid-template-columns:1fr;gap:30px;margin-bottom:30px}.slide{display:none;position:absolute;width:100%;height:100%}.slide.active{display:block}.slide img{width:100%;height:100%;object-fit:contain;object-position:center}.slide img.clickable-image{cursor:pointer}.slide-counter{position:absolute;top:10px;right:10px;background:#000c;color:#fff;padding:5px 10px;border-radius:15px;font-size:12px;z-index:10}.slide-nav{position:absolute;top:50%;transform:translateY(-50%);background:#00000080;color:#fff;border:none;padding:10px 20px;cursor:pointer;border-radius:50%;transition:background-color .3s;z-index:10}.slide-nav:hover{background:#000c}.slide-nav.prev{left:10px}.slide-nav.next{right:10px}.slide-dots{text-align:center;padding:10px 0}.dot{cursor:pointer;height:12px;width:12px;margin:0 5px;background-color:#666;border-radius:50%;display:inline-block;transition:background-color .3s}.dot.active,.dot:hover{background-color:#0d6efd}.modal-pet-name{font-size:28px;font-weight:700;color:#f0f0f0;margin-bottom:5px}.modal-pet-id{color:#999;font-size:12px}.info-section{background-color:#3d3d3d;padding:20px;border-radius:12px;border:1px solid #555}.info-section h4{color:#f0f0f0;font-size:18px;margin:0 0 15px;border-bottom:2px solid #0d6efd;padding-bottom:10px}.info-grid-two-col{display:grid;grid-template-columns:1fr 1fr;gap:15px}.info-item{display:flex;justify-content:space-between;padding:10px 0;font-size:14px;border-bottom:1px solid #555}.info-item:last-child{border-bottom:none}.info-label{font-weight:700;color:silver}.info-value{color:#e0e0e0;text-align:right}.modal-description{background-color:#3d3d3d;padding:20px;border-radius:12px;border:1px solid #555}.modal-description h4{color:#f0f0f0;font-size:18px;margin:0 0 15px;border-bottom:2px solid #0d6efd;padding-bottom:10px}.description-text{line-height:1.8;color:#d0d0d0;font-size:14px;white-space:pre-wrap;word-wrap:break-word}.modal-footer{border-top:2px solid #404040;padding-top:30px}.contact-form{background:#3d3d3d;padding:20px;border-radius:8px;border:1px solid #555}.contact-form h4{color:#f0f0f0;font-size:16px;margin-bottom:15px;border-bottom:2px solid #0d6efd;padding-bottom:10px}.contact-form form{display:grid;grid-template-columns:1fr;gap:15px}@media(min-width:701px){.contact-form form{grid-template-columns:1fr 1fr}.contact-form form #contactHomeType,.form-buttons,.form-message{grid-column:1 / -1}}.form-group{margin-bottom:0}.form-group label{display:block;margin-bottom:6px;color:#e0e0e0;font-weight:700;font-size:14px}.form-group input{width:100%;padding:10px 35px 10px 10px;border:2px solid #666;border-radius:6px;background:#2d2d2d;color:#f0f0f0;font-size:15px;font-weight:500;transition:all .2s ease}.form-group input:focus{outline:none;border-color:#0d6efd;box-shadow:0 0 0 3px #0d6efd4d;background:#353535}.form-group select{width:100%;padding:10px;border:2px solid #666;border-radius:6px;background:#2d2d2d;color:#f0f0f0;font-size:15px;font-weight:500;cursor:pointer}.form-group select:focus{outline:none;border-color:#0d6efd;box-shadow:0 0 0 3px #0d6efd4d}.form-group select option{background:#2d2d2d;color:#f0f0f0;padding:8px;font-size:15px;font-weight:500;line-height:1.5}.form-group select option:checked{background:#0d6efd;color:#fff}.form-buttons{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}.btn-cancel{padding:10px 20px;background:#666;color:#fff;border:none;border-radius:6px;cursor:pointer;font-weight:700;font-size:14px;transition:background .3s}.btn-cancel:hover{background:#777}.btn-submit{padding:10px 20px;background:#0d6efd;color:#fff;border:none;border-radius:6px;cursor:pointer;font-weight:700;font-size:14px;transition:background .3s}.btn-submit:hover{background:#0b5ed7}.btn-submit:disabled{background:#666;cursor:not-allowed}.form-message{margin-top:15px;padding:12px;border-radius:6px;text-align:center;font-weight:700;font-size:14px;display:none}.form-message.success{background:#19875433;color:#198754;border:1px solid #198754}.form-message.error{background:#dc354533;color:#dc3545;border:1px solid #dc3545}.fullscreen-image-viewer{display:none;position:fixed;z-index:3000;top:0;left:0;width:100%;height:100%;background-color:#000000f2}.fullscreen-image-viewer.show{display:flex;align-items:center;justify-content:center}.fullscreen-content{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.fullscreen-image{width:100vw;height:100vh;object-fit:contain}.fullscreen-close{position:absolute;top:20px;right:20px;background:#00000080;color:#fff;border:none;font-size:40px;cursor:pointer;padding:10px 20px;border-radius:8px;transition:background .3s;z-index:3001}.fullscreen-close:hover{background:#000c}.fullscreen-nav-buttons{position:absolute;width:100%;height:100%;top:0;left:0;pointer-events:none}.fullscreen-nav{position:absolute;top:50%;transform:translateY(-50%);background:#00000080;color:#fff;border:none;padding:15px 20px;cursor:pointer;font-size:24px;border-radius:8px;transition:background .3s;pointer-events:all;z-index:3002}.fullscreen-nav:hover{background:#000c}.fullscreen-nav.prev{left:20px}.fullscreen-nav.next{right:20px}.fullscreen-counter{position:absolute;bottom:20px;left:50%;transform:translate(-50%);background:#000c;color:#fff;padding:10px 15px;border-radius:20px;font-size:14px;z-index:3001}.watermark{position:fixed;bottom:20px;right:20px;z-index:1000;opacity:.7;transition:opacity .3s ease}.watermark img{height:40px;width:auto}.watermark:hover{opacity:1}.theme-toggle-container{position:fixed;top:20px;right:20px;z-index:1500}.theme-toggle-btn{width:44px;height:44px;border-radius:50%;border:2px solid #555;background:#3d3d3d;color:#e0e0e0;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;padding:0}.theme-toggle-btn:hover{background:#555;border-color:#777}body.light-mode .theme-toggle-btn{background:#e0e0e0;border-color:#999;color:#333}body.light-mode .theme-toggle-btn:hover{background:#ccc;border-color:#666}.sun-icon,.moon-icon{width:24px;height:24px;transition:transform .3s ease}.theme-toggle-btn:hover .sun-icon,.theme-toggle-btn:hover .moon-icon{transform:rotate(20deg)}@media(max-width:700px){.pet-card{width:100%}}@media(max-width:1024px){.pets-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}.modal-body{grid-template-columns:1fr}.header{flex-direction:column;align-items:flex-start}.view-toggle{align-self:flex-start}.slideshow-container{height:400px}.info-grid-two-col{grid-template-columns:1fr}}@media(max-width:768px){.container{padding:15px}.header h1{font-size:24px}.pets-grid,.filter-group{grid-template-columns:1fr}.modal-content{width:95%;padding:20px;margin:10px auto}.slideshow-container{height:300px}.slide img{height:300px;object-fit:contain;object-position:center;background-repeat:no-repeat}.info-grid-two-col{grid-template-columns:1fr}.modal-pet-name{font-size:24px}}body.light-mode{background-color:#f5f5f5;color:#333}body.light-mode .container{background-color:#f5f5f5}body.light-mode .header h1{color:#1a1a1a}body.light-mode .view-toggle a,body.light-mode .view-toggle button{border-color:#ccc;background:#fff;color:#333}body.light-mode .view-toggle a:hover,body.light-mode .view-toggle button:hover{background:#e8e8e8;border-color:#999}body.light-mode .filter-toggle-btn{border-color:#ccc;background:#fff;color:#333}body.light-mode .filter-toggle-btn:hover{background:#e8e8e8;border-color:#999}body.light-mode .filters{background:#fff;border-color:#ddd}body.light-mode .filters h3{color:#1a1a1a}body.light-mode .filter-item label{color:#666}body.light-mode .filter-item select,body.light-mode .filter-item input{border-color:#ccc;background:#fff;color:#333}body.light-mode .filter-item select:focus,body.light-mode .filter-item input:focus{border-color:#0d6efd;box-shadow:0 0 0 2px #0d6efd40}body.light-mode .btn-reset{background:#6c757d;color:#fff}body.light-mode .btn-reset:hover{background:#5c636a}body.light-mode .pet-card{background:#fff;border-color:#ddd;box-shadow:0 4px 16px #0000001a}body.light-mode .pet-card:hover{box-shadow:0 8px 32px #0d6efd33;border-color:#0d6efd}body.light-mode .pet-image-container{background:#f0f0f0}body.light-mode .no-photo{color:#999}body.light-mode .pet-name{color:#1a1a1a}body.light-mode .pet-id{color:#999}body.light-mode .pet-detail-item{color:#666}body.light-mode .pet-detail-item strong{color:#333}body.light-mode .no-pets{color:#999}body.light-mode .no-pets h3{color:#333}body.light-mode .no-pets code{background-color:#f0f0f0;color:#333}body.light-mode .modal-content{background-color:#fff;border-color:#ddd}body.light-mode .modal-header{border-color:#ddd}body.light-mode .close{color:#666}body.light-mode .close:hover{color:#1a1a1a}body.light-mode .slideshow-container{background:#f0f0f0}body.light-mode .modal-pet-name{color:#1a1a1a}body.light-mode .modal-pet-id{color:#999}body.light-mode .info-section{background-color:#f9f9f9;border-color:#ddd}body.light-mode .info-section h4{color:#1a1a1a}body.light-mode .info-item{border-color:#ddd}body.light-mode .info-label{color:#666}body.light-mode .info-value{color:#333}body.light-mode .modal-description{background-color:#f9f9f9;border-color:#ddd}body.light-mode .modal-description h4{color:#1a1a1a}body.light-mode .description-text{color:#333}body.light-mode .modal-footer{border-color:#ddd}body.light-mode .contact-form{background:#f9f9f9;border-color:#ddd}body.light-mode .contact-form h4{color:#1a1a1a}body.light-mode .form-group label{color:#333}body.light-mode .form-group input,body.light-mode .form-group select{border-color:#999;background:#fff;color:#333;font-weight:500}body.light-mode .form-group input:focus,body.light-mode .form-group select:focus{border-color:#0d6efd;background:#f9f9f9;box-shadow:0 0 0 3px #0d6efd4d}body.light-mode .form-group select{border-color:#999;background:#fff;color:#333;font-weight:500}body.light-mode .form-group select option{background:#fff;color:#333;padding:8px;font-size:15px;font-weight:500}body.light-mode .form-group select option:checked{background:#0d6efd;color:#fff}body.light-mode .btn-cancel{background:#6c757d;color:#fff}body.light-mode .btn-cancel:hover{background:#5c636a}.image-enlarge-hint{font-size:x-large!important;color:#999!important;text-align:center;word-wrap:break-word;display:block;margin-top:8px}