:root{             /* Vet Bisenzio brand colors */             --vet-primary: #5EBFD9;             --vet-primary-light: #7ECCE5;             --vet-primary-dark: #4BA7C1;             --vet-secondary: #4B9FC1;             --vet-tertiary: #6B5B95;                          /* UI colors */             --gray-50: #f9fafb;             --gray-100: #f3f4f6;             --gray-200: #e5e7eb;             --gray-300: #d1d5db;             --gray-400: #9ca3af;             --gray-500: #6b7280;             --gray-600: #4b5563;             --gray-700: #374151;             --gray-800: #1f2937;             --gray-900: #111827;                          /* Status colors */             --success-50: #f0fdf4;             --success-100: #dcfce7;             --success-500: #22c55e;             --success-600: #16a34a;             --success-700: #15803d;                          --warning-50: #fefce8;             --warning-100: #fef3c7;             --warning-500: #eab308;             --warning-700: #a16207;             --warning-800: #854d0e;                          --error-50: #fef2f2;             --error-100: #fee2e2;             --error-500: #ef4444;             --error-700: #b91c1c;             --error-800: #991b1b;                          --info-50: #eff6ff;             --info-100: #dbeafe;             --info-700: #1d4ed8;             --info-800: #1e40af;         }          .checklist-app *{             margin: 0;             padding: 0;             box-sizing: border-box;         }          .checklist-app body{             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;             background: #ffffff;             min-height: 100vh;             padding: 20px;             color: var(--gray-800);         }          .checklist-app .container{             max-width: 768px;             margin: 0 auto;             background: white;             border-radius: 20px;             box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);             overflow: hidden;             border: 1px solid var(--gray-200);         }          .checklist-app .header{             background: linear-gradient(135deg, var(--vet-primary) 0%, var(--vet-primary-dark) 100%);             color: white;             padding: 2.5rem 2rem;             text-align: center;             position: relative;         }          .checklist-app .header::before{             content: '';             position: absolute;             top: 0;             left: 0;             right: 0;             bottom: 0;             background: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;         }          .checklist-app .header-content{             display: flex;             align-items: center;             justify-content: center;             gap: 16px;             margin-bottom: 1rem;             position: relative;             z-index: 1;         }          .checklist-app .logo-icon{             width: 48px;             height: 48px;             background: white;             border-radius: 50%;             display: flex;             align-items: center;             justify-content: center;             box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);         }          .checklist-app .paw-icon{             width: 28px;             height: 28px;             fill: var(--vet-primary);         }          .checklist-app .header h1{             font-size: 1.875rem;             font-weight: 700;             margin: 0;             text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);         }          .checklist-app .badge{             display: inline-block;             background: rgba(255, 255, 255, 0.2);             color: white;             font-size: 0.75rem;             font-weight: 500;             padding: 0.5rem 1.25rem;             border-radius: 9999px;             backdrop-filter: blur(10px);             border: 1px solid rgba(255, 255, 255, 0.3);             position: relative;             z-index: 1;         }          .checklist-app .content{             padding: 2rem;         }          .checklist-app .tabs{             display: flex;             border-bottom: 2px solid var(--gray-200);             margin-bottom: 2rem;             overflow-x: auto;             gap: 0.5rem;         }          .checklist-app .tab{             background: none;             border: none;             padding: 1rem 1.5rem;             font-size: 0.875rem;             font-weight: 500;             color: var(--gray-500);             cursor: pointer;             border-bottom: 3px solid transparent;             transition: all 0.3s ease;             white-space: nowrap;             border-radius: 8px 8px 0 0;         }          .checklist-app .tab.active{             color: var(--vet-primary);             border-bottom-color: var(--vet-primary);             background: var(--info-50);         }          .checklist-app .tab:hover{             color: var(--vet-primary);             background: var(--gray-50);         }          .checklist-app .form-group{             margin-bottom: 1.75rem;         }          .checklist-app .form-label{             display: block;             font-size: 0.875rem;             font-weight: 600;             color: var(--gray-700);             margin-bottom: 0.75rem;         }          .checklist-app .form-select{             width: 100%;             padding: 0.875rem 1rem;             border: 2px solid var(--gray-200);             border-radius: 12px;             font-size: 0.875rem;             background: white;             transition: all 0.3s ease;             color: var(--gray-700);         }          .checklist-app .form-select:hover{             border-color: var(--gray-300);         }          .checklist-app .form-select:focus{             outline: none;             border-color: var(--vet-primary);             box-shadow: 0 0 0 3px rgba(94, 191, 217, 0.1);         }          .checklist-app .radio-grid{             display: grid;             gap: 0.75rem;         }          .checklist-app .radio-grid.grid-2{ grid-template-columns: repeat(2, 1fr); }         .checklist-app .radio-grid.grid-3{ grid-template-columns: repeat(3, 1fr); }          .checklist-app .radio-option{             position: relative;         }          .checklist-app .radio-option input[type="radio"]{             position: absolute;             opacity: 0;         }          .checklist-app .radio-label{             display: flex;             align-items: center;             padding: 0.875rem 1rem;             border: 2px solid var(--gray-200);             border-radius: 12px;             cursor: pointer;             transition: all 0.3s ease;             background: white;             font-size: 0.875rem;             font-weight: 500;         }          .checklist-app .radio-label:hover{             background: var(--gray-50);             border-color: var(--vet-primary-light);         }          .checklist-app .radio-option input[type="radio"]:checked + .radio-label{             background: var(--info-50);             border-color: var(--vet-primary);             color: var(--vet-primary-dark);         }          .checklist-app .radio-dot{             width: 18px;             height: 18px;             border: 2px solid var(--gray-300);             border-radius: 50%;             margin-right: 0.75rem;             position: relative;             transition: all 0.3s ease;         }          .checklist-app .radio-option input[type="radio"]:checked + .radio-label .radio-dot{             border-color: var(--vet-primary);         }          .checklist-app .radio-option input[type="radio"]:checked + .radio-label .radio-dot::after{             content: '';             position: absolute;             top: 50%;             left: 50%;             transform: translate(-50%, -50%);             width: 10px;             height: 10px;             background: var(--vet-primary);             border-radius: 50%;         }          .checklist-app .button{             width: 100%;             padding: 1rem 1.5rem;             font-weight: 600;             border-radius: 12px;             cursor: pointer;             transition: all 0.3s ease;             border: none;             font-size: 0.875rem;             display: flex;             align-items: center;             justify-content: center;             gap: 0.5rem;         }          .checklist-app .button-primary{             background: linear-gradient(135deg, var(--vet-primary) 0%, var(--vet-primary-dark) 100%);             color: white;             box-shadow: 0 4px 12px rgba(94, 191, 217, 0.3);         }          .checklist-app .button-primary:hover:not(:disabled){             background: linear-gradient(135deg, var(--vet-primary-light) 0%, var(--vet-primary) 100%);             transform: translateY(-1px);             box-shadow: 0 6px 16px rgba(94, 191, 217, 0.4);         }          .checklist-app .button:disabled{             background: var(--gray-200);             color: var(--gray-400);             cursor: not-allowed;             box-shadow: none;         }          .checklist-app .alert{             padding: 1rem 1.25rem;             border-radius: 12px;             margin: 1rem 0;             border: 1px solid;             position: relative;             overflow: hidden;         }          .checklist-app .alert::before{             content: '';             position: absolute;             top: 0;             left: 0;             width: 4px;             height: 100%;             background: currentColor;         }          .checklist-app .alert-warning{             background: var(--warning-50);             border-color: var(--warning-100);             color: var(--warning-800);         }          .checklist-app .alert-error{             background: var(--error-50);             border-color: var(--error-100);             color: var(--error-800);         }          .checklist-app .alert-info{             background: var(--info-50);             border-color: var(--info-100);             color: var(--info-800);         }          .checklist-app .alert-success{             background: var(--success-50);             border-color: var(--success-100);             color: var(--success-700);         }          .checklist-app .progress-bar{             width: 100%;             height: 12px;             background: var(--gray-200);             border-radius: 6px;             overflow: hidden;             margin-bottom: 0.75rem;             box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);         }          .checklist-app .progress-fill{             height: 100%;             background: linear-gradient(90deg, var(--vet-primary) 0%, var(--vet-primary-dark) 100%);             transition: width 0.5s ease;             border-radius: 6px;             box-shadow: 0 2px 4px rgba(94, 191, 217, 0.3);         }          .checklist-app .progress-text{             text-align: right;             font-size: 0.875rem;             color: var(--gray-600);             font-weight: 500;         }          .checklist-app .checklist-item{             display: flex;             align-items: flex-start;             padding: 1.25rem;             border: 2px solid var(--gray-200);             border-radius: 12px;             margin-bottom: 0.875rem;             cursor: pointer;             transition: all 0.3s ease;             background: white;         }          .checklist-app .checklist-item:hover{             background: var(--gray-50);             border-color: var(--vet-primary-light);             transform: translateX(2px);         }          .checklist-app .checklist-item.checked{             background: var(--success-50);             border-color: var(--success-100);         }          .checklist-app .checkbox{             width: 26px;             height: 26px;             border: 2px solid var(--gray-300);             border-radius: 8px;             margin-right: 1rem;             margin-top: 2px;             display: flex;             align-items: center;             justify-content: center;             transition: all 0.3s ease;             flex-shrink: 0;         }          .checklist-app .checklist-item.checked .checkbox{             background: var(--vet-primary);             border-color: var(--vet-primary);         }          .checklist-app .check-icon{             width: 18px;             height: 18px;             stroke: white;             stroke-width: 3;             opacity: 0;             transition: opacity 0.3s ease;         }          .checklist-app .checklist-item.checked .check-icon{             opacity: 1;         }          .checklist-app .checklist-text{             font-size: 0.875rem;             color: var(--gray-700);             line-height: 1.6;         }          .checklist-app .checklist-item.checked .checklist-text{             color: var(--gray-600);             text-decoration: line-through;             opacity: 0.8;         }          .checklist-app .requirements-section{             margin: 3rem 0 0;             padding: 2rem 0;             border-top: 2px solid var(--gray-200);         }          .checklist-app .requirements-header{             display: flex;             align-items: center;             margin-bottom: 2rem;         }          .checklist-app .requirements-header h2{             font-size: 1.375rem;             font-weight: 700;             color: var(--gray-800);             margin-left: 0.75rem;         }          .checklist-app .requirement-card{             background: linear-gradient(135deg, var(--gray-50) 0%, white 100%);             padding: 1.75rem;             border-radius: 16px;             border: 1px solid var(--gray-200);             margin-bottom: 1.5rem;             box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);         }          .checklist-app .requirement-card h3{             display: flex;             align-items: center;             font-size: 1.125rem;             font-weight: 600;             color: var(--gray-800);             margin-bottom: 1.25rem;         }          .checklist-app .requirement-list{             list-style: none;         }          .checklist-app .requirement-item{             display: flex;             align-items: flex-start;             margin-bottom: 1.25rem;             font-size: 0.875rem;         }          .checklist-app .requirement-number{             width: 24px;             height: 24px;             background: var(--vet-primary);             color: white;             border-radius: 50%;             display: flex;             align-items: center;             justify-content: center;             font-size: 0.75rem;             font-weight: bold;             margin-right: 1rem;             margin-top: 2px;             flex-shrink: 0;         }          .checklist-app .requirement-content{             flex: 1;         }          .checklist-app .requirement-title{             font-weight: 600;             color: var(--gray-800);             margin-bottom: 0.375rem;         }          .checklist-app .requirement-description{             font-size: 0.875rem;             color: var(--gray-600);             line-height: 1.6;         }          .checklist-app .external-link{             color: var(--vet-primary);             text-decoration: none;             font-size: 0.875rem;             display: inline-flex;             align-items: center;             margin-top: 0.5rem;             font-weight: 500;         }          .checklist-app .external-link:hover{             text-decoration: underline;             color: var(--vet-primary-dark);         }          .checklist-app .passport-guide{             background: white;             padding: 2rem;             border-radius: 16px;             border: 2px solid var(--gray-200);             margin-bottom: 1.5rem;             box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);         }          .checklist-app .passport-guide h3{             font-size: 1.125rem;             font-weight: 700;             color: var(--gray-800);             margin-bottom: 1.25rem;         }          .checklist-app .guide-section{             margin-bottom: 1.75rem;             padding-left: 1.25rem;             border-left: 4px solid var(--vet-primary);             padding-top: 0.5rem;             padding-bottom: 0.5rem;         }          .checklist-app .guide-section h4{             font-size: 0.9375rem;             font-weight: 600;             color: var(--gray-800);             margin-bottom: 0.75rem;         }          .checklist-app .guide-section p, .checklist-app .guide-section ul{             font-size: 0.875rem;             color: var(--gray-600);             line-height: 1.6;         }          .checklist-app .guide-section ul{             margin-left: 1.5rem;             margin-top: 0.5rem;         }          .checklist-app .guide-section li{             margin-bottom: 0.5rem;         }          .checklist-app .service-buttons{             display: flex;             flex-direction: column;             gap: 0.75rem;             margin-top: 1rem;         }          .checklist-app .service-button{             display: inline-flex;             align-items: center;             font-size: 0.875rem;             background: white;             color: var(--vet-primary-dark);             padding: 0.75rem 1rem;             border-radius: 8px;             border: 2px solid var(--vet-primary-light);             text-decoration: none;             transition: all 0.3s ease;             font-weight: 500;         }          .checklist-app .service-button:hover{             background: var(--info-50);             border-color: var(--vet-primary);             transform: translateX(2px);         }          .checklist-app .service-dot{             width: 8px;             height: 8px;             background: var(--vet-primary);             border-radius: 50%;             margin-right: 0.5rem;         }          .checklist-app .hidden{             display: none;         }          .checklist-app .icon{             width: 24px;             height: 24px;             margin-right: 0.5rem;             color: var(--vet-primary);         }          .checklist-app .vet-logo{             display: flex;             align-items: center;             justify-content: center;             gap: 0.5rem;             margin-top: 2rem;             padding-top: 2rem;             border-top: 1px solid var(--gray-200);         }          .checklist-app .vet-logo svg{             width: 32px;             height: 32px;         }          .checklist-app .vet-logo span{             font-size: 0.875rem;             color: var(--gray-500);             font-weight: 500;         }          @media (max-width: 640px) {             .checklist-app .radio-grid.grid-3{                 grid-template-columns: 1fr;             }                          .checklist-app .radio-grid.grid-2{                 grid-template-columns: 1fr;             }                          .checklist-app .content{                 padding: 1.5rem;             }                          .checklist-app .header{                 padding: 2.5rem 1.5rem;             }                          .checklist-app .header h1{                 font-size: 1.5rem;             }                          .checklist-app .tabs{                 gap: 0.25rem;             }                          .checklist-app .tab{                 padding: 0.75rem 1rem;                 font-size: 0.8125rem;             }         }