body{font-family:Arial,sans-serif;margin:0;padding:0;background-color:#1a1a1a;height:100vh;overflow:hidden;color:#e0e0e0;touch-action:manipulation;-webkit-user-select:none;user-select:none}.container{width:100%;height:100vh;display:flex;align-items:center;justify-content:center;position:relative;touch-action:manipulation;overflow:hidden}.pet-viewer{position:relative;width:98%;max-width:1000px;height:650px;display:flex;flex-direction:column;align-items:center;justify-content:center;touch-action:manipulation;overflow:hidden}.pet-card{border-radius:24px;box-shadow:0 8px 32px #00000080;text-align:left;width:100%;height:100%;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;border:1px solid #404040;position:relative;background-size:contain;background:#2d2d2d no-repeat center;touch-action:manipulation;overflow:hidden}.pet-card:before{content:"";position:absolute;bottom:0;left:0;right:0;height:40%;background:linear-gradient(transparent,#000c);border-radius:0 0 24px 24px;pointer-events:none}.pet-content{position:relative;z-index:2;padding:30px;text-align:left;width:100%}.qr-code{position:absolute;bottom:20px;right:20px;width:200px;height:200px;background:#fff;padding:10px;border-radius:8px;box-shadow:0 4px 8px #0000004d;transition:transform .3s ease}.qr-code:hover{transform:scale(1.1)}.qr-code img{width:100%;height:100%;display:block}.action-button{position:absolute;bottom:30px;right:30px;z-index:3}.btn-view-details{display:inline-block;padding:12px 28px;background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;text-decoration:none;border-radius:8px;font-weight:600;font-size:16px;border:none;cursor:pointer;box-shadow:0 4px 12px #2563eb4d;transition:all .3s ease;white-space:nowrap}.btn-view-details:hover{background:linear-gradient(135deg,#1d4ed8,#1e40af);transform:translateY(-2px);box-shadow:0 6px 20px #2563eb66}.btn-view-details:active{transform:translateY(0);box-shadow:0 2px 8px #2563eb4d}.no-image-card{background:#404040;display:flex;align-items:center;justify-content:center;color:#999;font-size:24px}.pet-name{font-size:32px;font-weight:700;margin-bottom:15px;color:#f0f0f0;text-shadow:2px 2px 4px rgba(0,0,0,.8)}.pet-info{display:flex;flex-direction:column;gap:8px;margin-bottom:20px;font-size:14px}.pet-info-item{color:silver;text-shadow:1px 1px 2px rgba(0,0,0,.8)}.pet-info-label{font-weight:700;color:#e0e0e0}.nav-button{position:absolute;top:50%;transform:translateY(-50%);background:#3d3d3d;border:1px solid #555;border-radius:50%;width:60px;height:60px;font-size:24px;cursor:pointer;box-shadow:0 4px 16px #0006;transition:all .3s ease;z-index:10;color:#e0e0e0}.nav-button:hover{background-color:#4d4d4d;transform:translateY(-50%) scale(1.1);border-color:#666}.nav-button:disabled{opacity:.3;cursor:not-allowed}.nav-button:disabled:hover{transform:translateY(-50%) scale(1)}.nav-prev{left:20px}.nav-next{right:20px}.pet-counter{position:absolute;top:20px;left:50%;transform:translate(-50%);background:#000c;color:#e0e0e0;padding:10px 20px;border-radius:20px;font-size:16px;z-index:10;border:1px solid #555}.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}.keyboard-hint{position:absolute;bottom:20px;left:50%;transform:translate(-50%);color:#999;font-size:14px;text-align:center}.watermark{position:fixed;top:20px;right:20px;z-index:1000;opacity:.7;transition:opacity .3s ease}.watermark img{height:40px;width:auto}.watermark:hover{opacity:1}@media(max-width:768px){.pet-image,.no-image{width:300px;height:300px}.pet-name{font-size:36px}.pet-info{font-size:16px}.nav-button{width:50px;height:50px;font-size:20px;background:#3d3d3d;border:1px solid #555}.nav-button:hover{background-color:#4d4d4d}.pet-card{background:#2d2d2d;border:1px solid #404040}.action-button{bottom:20px;right:20px}.btn-view-details{padding:10px 20px;font-size:14px}}