.fingerprint-container{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#fffffff2;border:1px solid #fff3;border-radius:24px;margin:2rem 0;padding:2rem;animation:.8s ease-out fadeInUp;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.fingerprint-test-btn{background:linear-gradient(135deg, var(--primary), var(--primary-dark));color:#fff;cursor:pointer;border:none;border-radius:12px;align-items:center;gap:.5rem;margin:1rem 0;padding:1rem 2rem;font-size:1.1rem;font-weight:600;transition:all .3s;display:inline-flex}.fingerprint-test-btn:hover{transform:translateY(-2px);box-shadow:0 8px 15px #6366f14d}.fingerprint-test-btn:active{transform:translateY(0)}.fingerprint-test-btn:disabled{opacity:.7;cursor:not-allowed;box-shadow:none;transform:none}.loading-spinner{border:3px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:1.5rem;height:1.5rem;animation:1s ease-in-out infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.fingerprint-progress{max-width:500px;margin:2rem auto}.progress-bar{background:#e2e8f0;border-radius:4px;height:8px;margin-bottom:.5rem;overflow:hidden}.progress-fill{background:linear-gradient(90deg, var(--primary), var(--primary-dark));width:0%;height:100%;transition:width .3s}.progress-text{color:var(--text-light);text-align:center;font-size:.9rem}.fingerprint-results{animation:.8s ease-out fadeInUp;display:none}.results-summary{background:var(--primary);color:#fff;border-radius:16px;margin-bottom:2rem;padding:2rem;position:relative;overflow:hidden}.results-summary:before{content:"";pointer-events:none;background:radial-gradient(circle at 20% 80%,#ffffff1a 0%,#0000 50%),radial-gradient(circle at 80% 20%,#ffffff1a 0%,#0000 50%);position:absolute;inset:0}.summary-title{background:var(--primary);margin-bottom:1rem;font-size:1.5rem;font-weight:700}.summary-score{background:var(--primary);margin-bottom:1rem;font-size:3rem;font-weight:800}.summary-description{opacity:.9;background:var(--primary);margin-bottom:1.5rem;font-size:1.1rem}.summary-details{background:var(--primary);flex-wrap:wrap;gap:1rem;margin-top:1.5rem;display:flex}.summary-detail{background:#ffffff1a;border-radius:8px;align-items:center;gap:.5rem;padding:.75rem 1rem;display:flex}.tabs{border-bottom:1px solid var(--border);scrollbar-width:none;margin:2rem 0 1rem;display:flex;overflow-x:auto}.tabs::-webkit-scrollbar{display:none}.tab{cursor:pointer;color:var(--text-light);white-space:nowrap;border-bottom:2px solid #0000;padding:.75rem 1.5rem;font-weight:500;transition:all .3s}.tab.active{color:var(--primary);border-bottom-color:var(--primary)}.tab-content{padding:1.5rem 0;display:none}.tab-content.active{animation:.5s ease-out fadeIn;display:block}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.canvas-display{flex-direction:column;align-items:center;gap:1.5rem;margin-bottom:2rem;display:flex}.canvas-container{background:var(--surface,white);border:1px solid var(--border);border-radius:16px;flex-direction:column;align-items:center;gap:1rem;padding:1.5rem;display:flex;box-shadow:0 1px 3px #0000001a}.canvas-wrapper{border:1px solid var(--border);border-radius:8px;overflow:hidden}.canvas-title{color:var(--text);font-size:1.25rem;font-weight:600}.fingerprint-hash{background:var(--surface-muted,#f8fafc);white-space:nowrap;border:1px solid #e2e8f0;border-radius:8px;width:100%;margin-top:.5rem;padding:1rem;font-family:monospace;font-size:.9rem;overflow-x:auto}.copy-btn{border:1px solid var(--primary);color:var(--primary);cursor:pointer;background:0 0;border-radius:8px;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.9rem;font-weight:500;transition:all .3s;display:inline-flex}.copy-btn:hover{background:var(--primary);color:#fff}.fingerprint-details{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;margin-bottom:2rem;display:grid}.detail-card{background:var(--surface,white);border:1px solid var(--border);border-radius:16px;padding:1.5rem;transition:all .3s;box-shadow:0 1px 3px #0000001a}.detail-card:hover{transform:translateY(-5px);box-shadow:0 10px 25px -5px #0000001a}.detail-header{align-items:center;gap:1rem;margin-bottom:1.5rem;display:flex}.detail-icon{width:48px;height:48px;color:var(--primary);background:#6366f11a;border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;display:flex}.detail-title{color:var(--text);font-size:1.25rem;font-weight:600}.detail-list{margin:0;padding:0;list-style:none}.detail-item{border-bottom:1px solid var(--border);flex-direction:column;padding:.75rem 0;display:flex}.detail-item:last-child{border-bottom:none}.detail-label{color:var(--text-light);margin-bottom:.25rem;font-size:.875rem}.detail-value{color:var(--text);word-break:break-word;font-size:1rem;font-weight:500}.raw-data{color:#d4d4d4;white-space:pre;background:#1e1e1e;border-radius:12px;margin:1.5rem 0;padding:1.5rem;font-family:monospace;overflow-x:auto}.protection-methods{margin-top:2rem}.protection-method{background:var(--surface,white);border:1px solid var(--border);border-radius:12px;align-items:flex-start;gap:1rem;margin-bottom:1rem;padding:1.5rem;display:flex;box-shadow:0 1px 3px #0000001a}.protection-icon{width:40px;height:40px;color:var(--primary);background:#6366f11a;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:flex}.protection-content h3{color:var(--text);margin-bottom:.5rem;font-size:1.1rem}.protection-content p{color:var(--text-light);margin-bottom:0}.notification{color:#fff;z-index:1000;border-radius:12px;padding:1rem 2rem;font-weight:500;transition:transform .3s;position:fixed;top:20px;right:20px;transform:translate(400px);box-shadow:0 8px 25px -8px #0000004d}.notification.success{background:#10b981}.notification.error{background:#ef4444}.fingerprint-explanation{background:var(--secondary);border-radius:16px;margin-top:3rem;padding:2rem}.fingerprint-explanation h2,.fingerprint-explanation p{margin-bottom:1rem}.fingerprint-explanation ul{margin-bottom:1.5rem;margin-left:1.5rem}.fingerprint-explanation li{margin-bottom:.5rem}.fingerprint-explanation table{border-collapse:collapse;width:100%;margin:1.5rem 0}.fingerprint-explanation th,.fingerprint-explanation td{text-align:left;border:1px solid #ddd;padding:.75rem}.fingerprint-explanation th{background-color:#f8f9fa;font-weight:600}.fingerprint-explanation tr:nth-child(2n){background-color:#f8f9fa}@media (width<=768px){.fingerprint-details{grid-template-columns:1fr}.summary-details{flex-direction:column;gap:.5rem}.tabs{white-space:nowrap;overflow-x:auto}.tab{padding:.75rem 1rem}}