body{background-color:var(--white);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;width:100%} .tool-wrapper{background-color:var(--bg);width:100%;max-width:100%;margin:0;padding:0;overflow:hidden;display:flow-root} .tool-container{position:relative;max-width:var(--max-width);padding:var(--padding-vertical) var(--padding-horizontal)} .scanner{text-align:center;margin-bottom:40px} h1{font-size:2.5rem;margin-bottom:10px;color:var(--primary)} .description{font-size:1.1rem;color:var(--text-light);max-width:600px;margin:0 auto} .scanner-tabs{display:flex;position:relative;margin-bottom:30px} .scanner-tabs::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background-color:var(--border-light);z-index:1} .scanner-tabs{overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:thin} .scanner-tabs::-webkit-scrollbar{height:6px} .scanner-tabs::-webkit-scrollbar-thumb{background-color:var(--border-light);border-radius:3px} .tab{padding:16px 30px;font-size:1.1rem;font-weight:600;color:var(--text-light);cursor:pointer;display:flex;align-items:center;gap:10px;border:none;background:transparent;position:relative;z-index:2;transition:var(--transition)} .tab.active{color:var(--primary);border-top:0px solid var(--primary);border-left:0px solid var(--border-light);border-right:0px solid var(--border-light);border-bottom:2px solid var(--primary);background-color:transparent;border-radius:var(--radius-sm) var(--radius-sm) 0 0} .scanner-results-container{display:flex;flex-wrap:wrap;gap:30px;margin-bottom:30px;align-items:flex-start} .scanner-section,.results-section{flex:1;min-width:400px;background:var(--white);border-radius:var(--radius-md);padding:25px;box-shadow:var(--shadow-sm);border:1px solid var(--border-light);align-self:flex-start;height:auto;min-height:400px;contain:layout} .tab-content{height:100%;display:none;flex-direction:column} .tab-content.active{display:block} .panel-title{font-size:1.3rem;margin-bottom:20px;color:var(--text);display:flex;align-items:center;gap:10px} .svg-icon{color:inherit;fill:currentColor} .panel-title .svg-icon{width:24px;height:24px;color:var(--primary)} .camera-permission .svg-icon{width:48px;height:48px;color:var(--text-light)} .upload-icon .svg-icon{width:48px;height:48px;color:var(--text-light)} .svg-icon[href*="#icon-camera"],.svg-icon[href*="#icon-cloud-upload"],.svg-icon[href*="#icon-results"]{color:var(--primary)} .canvas-container{position:relative;width:100%;max-width:400px;height:400px;margin:0 auto 20px;flex-shrink:0} #scanner-canvas{position:absolute;width:100%;height:100%;object-fit:contain;border-radius:var(--radius-sm)} #scan-region{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:70%;height:70%;border:2px solid var(--white);border-radius:var(--radius-sm);box-shadow:0 0 0 4000px rgba(0,0,0,0.3);pointer-events:none} .scan-line{position:absolute;width:100%;height:2px;background:var(--primary);top:0;animation:scan 2s infinite linear;border-radius:var(--radius-sm)} @keyframes scan{0%{top:0} 100%{top:100%} } .upload-area{border:2px dashed var(--border);border-radius:var(--radius-sm);padding:40px 30px;text-align:center;margin-bottom:20px;cursor:pointer;transition:var(--transition);position:relative} .upload-area:hover{border-color:var(--primary);background:var(--primary-light)} .upload-icon{font-size:3rem;margin-bottom:15px;color:var(--text-light)} #file-input{display:none} .supported-formats{font-size:0.85rem;color:var(--text-light);margin-top:8px} .controls{display:flex;flex-wrap:wrap;gap:8px;justify-content:center} .controls .btn{display:flex;align-items:center;justify-content:center;min-width:fit-content;padding:15px 30px;white-space:nowrap} .controls .svg-icon{width:18px;height:18px;flex-shrink:0} .btn-text{margin-left:6px} @media (max-width:768px){.controls .btn{padding:15px 10px;font-size:1rem} } @media (max-width:480px){.controls{gap:12px !important} .controls .btn{padding:15px 8px;font-size:1rem} } .controls{display:flex;justify-content:center;gap:10px;margin:20px 0;flex-wrap:wrap} .controls.hidden{display:none} .btn{padding:12px 16px;border:none;border-radius:var(--radius-sm);font-weight:600;font-size:0.95rem;cursor:pointer;transition:var(--transition);display:flex;align-items:center;gap:8px;position:relative;overflow:hidden} .btn::after{content:'';position:absolute;top:50%;left:50%;width:5px;height:5px;background:rgba(255,255,255,0.5);opacity:0;border-radius:100%;transform:scale(1,1) translate(-50%);transform-origin:50% 50%} .btn:focus:not(:active)::after{animation:ripple 1s ease-out} @keyframes ripple{0%{transform:scale(0,0);opacity:1} 20%{transform:scale(20,20);opacity:1} 100%{transform:scale(50,50);opacity:0} } .btn-primary{padding:12px 24px;border:none;border-radius:var(--radius-md);font-weight:600;font-size:1rem;cursor:pointer;transition:all 0.2s ease;display:inline-flex;align-items:center;justify-content:center;gap:8px;position:relative;overflow:hidden;text-decoration:none;min-height:44px;max-width:250px} .btn-primary{background:var(--primary);color:var(--white);box-shadow:var(--shadow-sm)} .btn-primary:hover{background:var(--primary-dark);transform:translateY(-2px);box-shadow:var(--shadow-md)} .btn-primary::after{content:'';position:absolute;top:50%;left:50%;width:5px;height:5px;background:rgba(255,255,255,0.5);opacity:0;border-radius:100%;transform:scale(1,1) translate(-50%);transform-origin:50% 50%} .btn-primary:focus:not(:active)::after{animation:ripple 1s ease-out} @keyframes ripple{0%{transform:scale(0,0);opacity:0.5} 20%{transform:scale(20,20);opacity:0.3} 100%{transform:scale(50,50);opacity:0} } @media (max-width:768px){.btn-primary{padding:10px 20px;font-size:0.95rem;min-height:40px} .btn-primary .btn-text{font-size:1rem} } @media (max-width:480px){.btn-primary{padding:10px 16px;font-size:0.9rem;width:100%;max-width:200px;justify-content:center} .btn-primary .btn-text{font-size:1rem} } .btn-secondary{background:var(--bg-secondary);color:var(--text);box-shadow:var(--shadow-sm)} .btn-secondary:hover{background:var(--border-light);transform:translateY(-2px);box-shadow:var(--shadow-md)} .btn-success{background:#10B981;color:var(--white);box-shadow:var(--shadow-sm)} .btn-success:hover{background:#059669;transform:translateY(-2px);box-shadow:var(--shadow-md)} .btn:disabled{opacity:0.6;cursor:not-allowed;transform:none !important;box-shadow:none !important} .btn-sm{padding:10px 14px;font-size:0.9rem} .btn-icon{padding:10px;min-width:38px;justify-content:center} .btn-icon .svg-icon{margin:0} .status{text-align:center;margin:10px 0;font-weight:500;color:var(--text-light)} #result{padding:20px;background:var(--bg-secondary);border-radius:var(--radius-sm);min-height:200px;overflow-y:auto;font-size:1.1rem;margin-bottom:20px;transition:min-height 0.3s ease} @media (max-width:900px){.scanner-results-container{flex-direction:column} .scanner-section,.results-section{min-width:100%;min-height:auto} .canvas-container{height:300px} } .camera-permission{text-align:center;padding:20px;background:var(--primary-extra-light);border-radius:var(--radius-sm);margin-bottom:20px} .svg-icon{width:24px;height:24px;fill:currentColor} .rotate-45{transform:rotate(45deg)} .hidden{display:none !important} .image-preview-container{position:relative;display:inline-block;max-width:200px;margin-bottom:15px} .image-preview{max-width:100%;max-height:200px;border-radius:var(--radius-sm);display:block} .remove-image{position:absolute;top:-10px;right:-10px;background:var(--white);border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow-sm);border:1px solid var(--border)} .choose-another{display:block;margin-top:10px;color:var(--primary);font-weight:500;cursor:pointer} .vcard-container{background:var(--white);border-radius:var(--radius-md);padding:0;overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid var(--border-light);max-width:500px;margin:0 auto} .vcard-header{background:var(--white);color:var(--text);padding:20px;text-align:center;border-bottom:1px solid var(--border-light);display:flex;align-items:center;gap:15px} .profile-circle{width:60px;height:60px;border-radius:50%;background-color:var(--primary);color:var(--white);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:bold;flex-shrink:0} .vcard-header-content{text-align:left;flex:1} .vcard-header h3{margin:0;font-size:1.5rem;font-weight:600} .vcard-header p{margin:5px 0 0;color:var(--text-light)} .vcard-body{padding:20px} .vcard-field{display:flex;margin-bottom:15px;align-items:flex-start} .vcard-field:last-child{margin-bottom:0} .vcard-icon{width:24px;height:24px;margin-right:15px;color:var(--primary);flex-shrink:0} .vcard-content{flex:1} .vcard-label{font-size:0.85rem;color:var(--text-light);margin-bottom:3px} .vcard-value{font-size:1rem;color:var(--text);word-break:break-word} .vcard-value a{color:var(--primary);text-decoration:none} .vcard-value a:hover{text-decoration:underline} .vcard-actions{display:flex;padding:15px 20px;border-top:1px solid var(--border-light);gap:10px} .vcard-button{padding:8px 16px;background:var(--primary-light);color:var(--primary);border-radius:var(--radius-sm);font-size:0.9rem;font-weight:500;cursor:pointer;border:none;display:flex;align-items:center;gap:5px;transition:var(--transition)} .vcard-button:hover{background:var(--primary);color:var(--white)} .plain-result{background:var(--white);padding:20px;border-radius:var(--radius-sm);border:1px solid var(--border-light)} .plain-result pre{white-space:pre-wrap;word-break:break-word;font-family:inherit;margin:0;line-height:1.5} .result-actions{display:flex;justify-content:center;gap:10px;margin-top:15px} .wifi-details{background:var(--primary-extra-light);padding:15px;border-radius:var(--radius-sm);margin-top:10px} .wifi-field{display:flex;margin-bottom:8px} .wifi-field:last-child{margin-bottom:0} .wifi-icon{width:20px;height:20px;margin-right:10px;color:var(--primary);flex-shrink:0} .event-details{background:var(--primary-extra-light);padding:15px;border-radius:var(--radius-sm);margin-top:10px} .event-field{display:flex;margin-bottom:8px} .event-field:last-child{margin-bottom:0} .event-icon{width:20px;height:20px;margin-right:10px;color:var(--primary);flex-shrink:0} .toast{position:fixed;bottom:20px;right:20px;padding:12px 20px;background:var(--text);color:var(--white);border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);z-index:1000;opacity:0;transform:translateY(20px);transition:opacity 0.3s,transform 0.3s} .toast.show{opacity:1;transform:translateY(0)} @media (max-width:900px){.scanner-results-container{flex-direction:column} .scanner-section,.results-section{min-width:100%} h1{font-size:2rem} .controls{flex-wrap:wrap} .btn{flex:1;min-width:120px;justify-content:center} .tab{padding:12px 20px;font-size:1rem} .vcard-actions{flex-wrap:wrap} .vcard-button{justify-content:center} .vcard-header{text-align:left} .vcard-header-content{text-align:left} } @media (max-width:480px){.btn-icon{padding:10px} .btn{min-width:auto} } .dropdown-toggle{position:relative} .dropdown-menu{position:absolute;right:0;background:var(--white);border:1px solid var(--border-light);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);z-index:10;margin-top:5px;min-width:160px} .dropdown-item{width:100%;text-align:left;padding:10px 15px;border:none;background:none;color:var(--text);cursor:pointer;display:flex;align-items:center;font-size:0.9rem} .dropdown-item:hover{background:var(--primary-light);color:var(--primary)} @media (max-width:480px){.scanner-section,.results-section{padding:15px} #result{padding:15px} .result-actions{flex-wrap:wrap;gap:8px} .vcard-button{flex:1;min-width:120px} .dropdown-menu{position:static;width:100%;margin-top:10px} } .result-actions{display:flex;gap:10px;position:relative} #icon-more{} .file-types{font-size:0.85rem;color:var(--text-light);margin-top:8px} .upload-area.svg-file{border-color:#3498db;background-color:rgba(52,152,219,0.05)} .file-type-badge{position:absolute;top:10px;right:10px;padding:4px 8px;border-radius:12px;font-size:0.75rem;font-weight:600} .file-type-badge.svg{background-color:#3498db;color:white}