.progress-tracker{background:var(--bg-primary);border:1px solid var(--border-color);box-shadow:var(--shadow-sm);border-radius:12px;margin:1.5rem 0;padding:1.5rem}.progress-steps{justify-content:space-between;align-items:center;margin-bottom:1rem;display:flex;position:relative}.progress-step{z-index:2;flex-direction:column;flex:1;align-items:center;display:flex;position:relative}.progress-step:not(:last-child):after{content:"";background:var(--border-color);z-index:1;height:2px;position:absolute;top:15px;left:calc(50% + 20px);right:calc(20px - 50%)}.progress-step.active:not(:last-child):after{background:var(--primary-color)}.step-number{background:var(--border-color);width:30px;height:30px;color:var(--text-secondary);border-radius:50%;justify-content:center;align-items:center;margin-bottom:.5rem;font-size:.9rem;font-weight:600;transition:all .3s;display:flex}.progress-step.active .step-number{background:var(--primary-color);color:#fff}.progress-step.completed .step-number{background:var(--success-color);color:#fff}.step-label{text-align:center;color:var(--text-secondary);font-size:.8rem;font-weight:500;transition:color .3s}.progress-step.active .step-label{color:var(--primary-color);font-weight:600}.progress-step.completed .step-label{color:var(--success-color)}.progress-step[data-step=connected].active .step-number{color:#fff;background:#16a34a;box-shadow:0 2px 4px #16a34a33}.progress-step[data-step=connected].active .step-label{color:#16a34a;font-weight:600}.progress-bar{background:var(--border-color);border-radius:2px;width:100%;height:4px;margin-top:.5rem;overflow:hidden}.progress-fill{background:linear-gradient(90deg, var(--primary-color), var(--success-color));border-radius:2px;width:0%;height:100%;transition:width .5s}@media (max-width:768px){.progress-steps{flex-wrap:wrap;gap:.5rem}.progress-step{flex:1;min-width:calc(50% - .25rem)}.progress-step:not(:last-child):after{display:none}.step-label{font-size:.75rem}}.connected-banner{color:#fff;box-shadow:var(--shadow-md);background:#16a34a;border:2px solid #16a34a;border-radius:12px;align-items:center;gap:1rem;margin-bottom:2rem;padding:1.5rem;display:flex}.connected-icon{background:#fff3;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:2.5rem;height:2.5rem;font-size:1.2rem;font-weight:700;display:flex}.connected-text h3{margin:0 0 .25rem;font-size:1.1rem;font-weight:600}.connected-text p{opacity:.9;margin:0;font-size:.9rem}.status-display{background:var(--bg-secondary);text-align:center;border:2px solid var(--border-color);border-radius:8px;margin-top:1rem;padding:1rem;transition:all .3s}.status-display.connecting{border-color:var(--primary-color);background:var(--bg-primary)}.status-display.connected{border-color:var(--success-color);color:#15803d;background:#f0fdf4}[data-theme=dark] .status-display.connected{color:var(--success-color);background:#0f1e13}.status-display.error{border-color:var(--error-color);color:var(--error-color);background:#fef2f2}[data-theme=dark] .status-display.error{background:#1f1113}.status-text{font-size:1rem;font-weight:500}.qr-container{text-align:center;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:12px;margin:1rem 0;padding:2rem;overflow:visible}#qr-canvas,#answer-qr-canvas{box-shadow:var(--shadow-md);background:0 0;border-radius:8px;max-width:100%;height:auto;margin:1rem auto;display:block}.security-info{background:var(--bg-primary);border:2px solid var(--primary-color);text-align:center;border-radius:8px;margin:1rem 0;padding:1rem}#security-code{color:var(--primary-color);letter-spacing:2px;font-family:Monaco,Courier New,monospace;font-size:1.2rem;font-weight:700}.file-drop-zone{border:2px dashed var(--border-color);text-align:center;cursor:pointer;background:var(--bg-secondary);border-radius:12px;padding:2rem;transition:all .3s}.file-drop-zone:hover{border-color:var(--primary-color);background:var(--bg-primary)}.file-drop-zone.drag-over{border-color:var(--primary-color);background:var(--bg-primary);transform:scale(1.005)}.message-feed{border:1px solid var(--border-color);background:var(--bg-secondary);border-radius:8px;max-height:400px;margin-top:.5rem;padding:1rem;overflow-y:auto}.message-item{background:var(--bg-primary);border-left:4px solid var(--primary-color);border-radius:8px;margin-bottom:.5rem;padding:1rem;position:relative}.message-item.sent{border-left-color:var(--success-color)}.message-item.received{border-left-color:var(--primary-color)}.message-item.file{border-left-color:#f59e0b}.message-header{justify-content:space-between;align-items:center;margin-bottom:.5rem;display:flex}.message-type{text-transform:uppercase;color:var(--text-secondary);font-size:.8rem;font-weight:600}.message-time{color:var(--text-secondary);font-size:.75rem}.message-content{word-wrap:break-word;white-space:pre-wrap;font-family:inherit}.message-content.clipboard-text{background:var(--bg-secondary);border-radius:6px;margin-top:.5rem;padding:.75rem;font-family:Monaco,Courier New,monospace;font-size:.9rem}.file-info{align-items:center;gap:1rem;margin-top:.5rem;display:flex}.file-icon{background:var(--primary-color);color:#fff;border-radius:4px;justify-content:center;align-items:center;width:2rem;height:2rem;font-size:.8rem;font-weight:700;display:flex}.file-details{flex:1}.file-name{margin-bottom:.25rem;font-weight:500}.file-size{color:var(--text-secondary);font-size:.8rem}.file-mime{color:var(--text-secondary);opacity:.8;margin-top:.25rem;font-family:Monaco,Courier New,monospace;font-size:.75rem}.file-actions{gap:.5rem;display:flex}.transfer-item{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:8px;margin-bottom:.5rem;padding:1rem}.transfer-header{justify-content:space-between;align-items:center;margin-bottom:.5rem;display:flex}.transfer-name{font-weight:500}.transfer-status{color:var(--text-secondary);font-size:.8rem}.progress-bar{background:var(--border-color);border-radius:4px;width:100%;height:8px;margin:.5rem 0;overflow:hidden}.progress-fill{background:var(--primary-color);height:100%;transition:width .3s}.transfer-controls{justify-content:space-between;align-items:center;margin-top:.5rem;display:flex}.transfer-speed{color:var(--text-secondary);font-size:.8rem}input[type=radio]{margin-right:.5rem}@media (max-width:768px){.qr-container{padding:1rem}#qr-canvas{max-width:100%;height:auto}.file-info{flex-direction:column;align-items:flex-start;gap:.5rem}.message-header{flex-direction:column;align-items:flex-start;gap:.25rem}}.status-display.connecting .status-text:after{content:"";animation:1.5s infinite pulse}@keyframes pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}.btn-copy.copied{transform:scale(.95);background:var(--success-color)!important}.btn-copy.copied:after{content:" ✓"}.btn-small{padding:.25rem .5rem;font-size:.75rem}.btn-paste{color:#fff;cursor:pointer;background:#3b82f6;border:none;border-radius:6px;margin:.25rem;padding:.75rem 1.5rem;font-size:.9rem;font-weight:500;transition:background-color .2s}.btn-paste:hover{background:#2563eb}.btn-disconnect{color:#fff;cursor:pointer;background:#dc2626;border:none;border-radius:6px;margin:.25rem;padding:.75rem 1.5rem;font-size:.9rem;font-weight:500;transition:background-color .2s}.btn-disconnect:hover{background:#b91c1c}.url-section{border-top:1px solid var(--border-color);margin-top:1.5rem;padding-top:1.5rem}.url-section label{color:var(--text-primary);margin-bottom:.5rem;font-weight:600;display:block}.url-input{width:100%;margin-bottom:.75rem;font-family:Monaco,Courier New,monospace;font-size:.85rem}.url-section .btn-copy{width:100%;max-width:200px;margin-bottom:1rem}.url-banner{background:linear-gradient(135deg, var(--primary-color), var(--primary-hover));color:#fff;text-align:center;box-shadow:var(--shadow-md);border:2px solid var(--primary-color);border-radius:12px;margin:1rem 0;padding:1.5rem;animation:.5s ease-out slideIn}.url-banner h3{margin:0 0 .5rem;font-size:1.2rem}.url-banner p{opacity:.9;margin:0}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.method-selection{flex-wrap:wrap;gap:.75rem}.method-description{background:var(--bg-secondary);border-left:3px solid var(--primary-color);border-radius:6px;margin-top:.75rem;padding:.75rem}.method-description span{color:var(--text-secondary);font-size:.9rem;font-style:italic}.otp-display{margin:1.5rem 0}.otp-instruction{margin-bottom:1.5rem}.otp-instruction p{color:var(--text-primary);margin-bottom:.75rem;font-size:1rem}.otp-instruction ol{color:var(--text-secondary);margin:.5rem 0 0 1.5rem}.otp-instruction ol li{margin-bottom:.5rem;line-height:1.4}.otp-code-display{text-align:center;margin:2rem 0}.otp-code{color:var(--primary-color);background:var(--bg-primary);border:2px solid var(--primary-color);letter-spacing:2px;text-transform:lowercase;box-shadow:var(--shadow-sm);border-radius:8px;min-width:200px;margin-bottom:1rem;padding:1rem 2rem;font-family:Monaco,Courier New,monospace;font-size:1.4rem;font-weight:700;display:inline-block}.otp-input-group{flex-wrap:wrap;justify-content:center;align-items:center;gap:.75rem;margin:1.5rem 0;display:flex}.otp-input{border:2px solid var(--border-color);background:var(--bg-primary);color:var(--text-primary);text-align:center;text-transform:lowercase;border-radius:6px;min-width:250px;padding:.75rem 1rem;font-family:Monaco,Courier New,monospace;font-size:1.1rem;transition:border-color .3s}.otp-input:focus{border-color:var(--primary-color);outline:none;box-shadow:0 0 0 3px #3b82f61a}.otp-input::placeholder{color:var(--text-secondary);opacity:.7}.otp-status{text-align:center;margin-top:1.5rem}.otp-status p{color:var(--text-secondary);font-style:italic}.otp-mode #connection-type-group{display:none}@media (max-width:768px){.otp-input-group{flex-direction:column;align-items:stretch}.otp-input{width:100%;min-width:auto}.otp-code{letter-spacing:1px;min-width:auto;padding:.75rem 1rem;font-size:1.2rem}.method-selection{flex-direction:column}}.otp-code{animation:.2s ease-out otpAppear}@keyframes otpAppear{0%{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:translateY(0)}}.image-preview{text-align:center;margin:1rem 0}.image-preview img{border:1px solid var(--border-color);box-shadow:var(--shadow-sm);margin:0 auto .75rem;transition:all .2s;display:block}.image-preview img:hover{box-shadow:var(--shadow-md)}.image-actions{justify-content:center;gap:.5rem;display:flex}.method-selection{margin:1rem 0;gap:1.5rem!important}.method-selection input[type=radio]{display:none}.method-selection label{background:var(--bg-secondary);border:2px solid var(--border-color);cursor:pointer;text-align:left;border-radius:12px;align-items:center;min-width:180px;padding:1rem 1.25rem 1rem 3rem;font-weight:500;transition:all .3s;display:flex;position:relative}.method-selection label:before{content:"";border:2px solid var(--border-color);background:var(--bg-primary);border-radius:50%;width:20px;height:20px;transition:all .3s;position:absolute;top:50%;left:1rem;transform:translateY(-50%)}.method-selection label:after{content:"";background:var(--bg-primary);border-radius:50%;width:10px;height:10px;transition:all .3s;position:absolute;top:50%;left:1.25rem;transform:translateY(-50%)scale(0)}.method-selection input[type=radio]:checked+label{background:var(--primary-light,#3b82f61a);border-color:var(--primary-color);color:var(--primary-color);transform:translateY(-2px);box-shadow:0 4px 12px #3b82f633}.method-selection input[type=radio]:checked+label:before{border-color:var(--primary-color);background:var(--primary-color)}.method-selection input[type=radio]:checked+label:after{background:var(--bg-primary);transform:translateY(-50%)scale(1)}.method-selection label:hover{border-color:var(--primary-color);transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}[data-theme=dark] .method-selection input[type=radio]:checked+label:after{background:var(--bg-primary)}[data-theme=dark] .method-selection label:hover{box-shadow:0 2px 8px #ffffff1a}@media (max-width:768px){.method-selection{flex-direction:column;gap:1rem!important}.method-selection label{width:100%;min-width:auto}}.browser-warning{background:var(--warning-light,#fff3cd);border:1px solid var(--warning-color,#ffc107);border-radius:8px;margin:1rem 0;padding:1rem}.browser-warning p{color:var(--warning-dark,#856404);margin:0;font-size:.9rem;line-height:1.4}[data-theme=dark] .browser-warning{background:#ffc1071a;border-color:#ffc1074d}[data-theme=dark] .browser-warning p{color:var(--warning-color)}@media (max-width:768px){.image-preview img{max-width:100%!important;height:auto!important}}