:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#0f0f23;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:linear-gradient(135deg,#0f0f23,#1a1a3a);display:flex;align-items:center;justify-content:center;padding:1rem}#app{width:100%;max-width:500px}.app-container{background:#fffffff2;border-radius:16px;box-shadow:0 20px 40px #0000004d;overflow:hidden;color:#333}.app-header{background:linear-gradient(135deg,#646cff,#535bf2);color:#fff;padding:2rem;text-align:center}.app-header h1{margin:0 0 .5rem;font-size:2rem;font-weight:700}.app-header p{margin:0;opacity:.9;font-size:1rem}.app-main{padding:2rem}.step-card{text-align:center;transition:all .3s ease}.step-card.hidden{display:none}.step-card.active{animation:slideIn .4s ease-out}.step-number{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#646cff,#535bf2);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:700;margin:0 auto 1.5rem}.step-card h2{margin:0 0 .5rem;font-size:1.5rem;color:#333}.step-card p{margin:0 0 2rem;color:#666;font-size:1rem}.primary-button{background:linear-gradient(135deg,#646cff,#535bf2);color:#fff;border:none;padding:10px 20px;border-radius:8px;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .3s ease;min-width:80px}.primary-button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #646cff4d}.primary-button:disabled{background:#ccc;cursor:not-allowed;transform:none;box-shadow:none}.copy-button{background:#fff;color:#28a745;border:1px solid #28a745;padding:8px 16px;border-radius:6px;font-size:.85rem;font-weight:500;cursor:pointer;transition:all .2s ease}.copy-button:hover{background:#28a745;color:#fff;transform:translateY(-1px)}.link-share{display:flex;gap:12px;margin:1.5rem 0;align-items:stretch}.link-share input{flex:1;padding:12px;border:2px solid #e9ecef;border-radius:8px;font-family:monospace;font-size:.9rem;background:#f8f9fa;color:#333;transition:border-color .2s ease}.link-share input:focus{outline:none;border-color:#646cff}.connection-status{display:flex;align-items:center;justify-content:center;gap:12px;margin:1.5rem 0;padding:16px;background:#f8f9fa;border-radius:12px;transition:all .3s ease}.status-dot{width:12px;height:12px;border-radius:50%;transition:all .3s ease}.status-dot.connecting{background:#ffc107;animation:pulse 2s infinite}.status-dot.waiting{background:#17a2b8}.status-dot.connected{background:#28a745;box-shadow:0 0 0 3px #28a7454d}.status-dot.sending{background:#6c757d;animation:pulse 1s infinite}.status-dot.error{background:#dc3545}#status-text{font-weight:500;color:#495057}.password-exchange{text-align:left;background:#fff;border-radius:8px;border:1px solid #e9ecef;overflow:hidden;position:relative}.send-password{display:flex;gap:8px;position:sticky;bottom:0;background:#fff;padding:1rem;border-top:1px solid #e9ecef;margin:.5rem -.75rem -.75rem}.send-password input{flex:1;padding:10px 12px;border:1px solid #ced4da;border-radius:8px;font-size:.95rem;background:#fff;color:#333;transition:border-color .2s ease}.send-password input:focus{outline:none;border-color:#646cff;box-shadow:0 0 0 3px #646cff1a}.send-password input:disabled{background:#f5f5f5;opacity:.6}.received-passwords{max-height:250px;overflow-y:auto;overflow-x:hidden;padding:.75rem;background:#fafbfc}.no-passwords{text-align:center;color:#6c757d;font-style:italic;padding:1rem;font-size:.9rem}.password-item{background:#fff;border:1px solid #e9ecef;border-radius:8px;padding:10px;margin-bottom:8px;transition:all .2s ease;position:relative}.password-item.unread{border-left:4px solid #646cff;background:linear-gradient(90deg,#646cff0d,#f8f9fa 20%);box-shadow:0 2px 8px #646cff26}.password-item.unread .password-label:after{content:"•";color:#646cff;font-size:1.2rem;margin-left:8px;animation:pulse 2s infinite}.password-item:hover{box-shadow:0 4px 12px #0000001a;transform:translateY(-1px)}.password-item.unread:hover{box-shadow:0 4px 16px #646cff33}.password-item.sent{background:#f0f8ff;border-left:3px solid #2196f3}.password-item.received{background:#faf5ff;border-left:3px solid #9c27b0}.password-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:.85rem}.password-label{font-weight:600;color:#495057}.password-time{color:#6c757d;font-size:.8rem}.remove-btn{background:transparent;color:#6c757d;border:none;border-radius:50%;width:20px;height:20px;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;line-height:1}.remove-btn:hover{color:#dc3545;background:#dc35451a}.password-content{display:flex;gap:8px;align-items:stretch}.password-value{flex:1;padding:8px;border:1px solid #ced4da;border-radius:6px;font-family:monospace;font-size:.85rem;background:#fff;color:#333}@media (prefers-color-scheme: dark){.password-value{background:#2a2a3a;color:#e9ecef;border-color:#495057}.password-item{background:#2a2a3a;border-color:#495057}.password-item.unread{background:linear-gradient(90deg,#646cff1a,#2a2a3a 20%);box-shadow:0 2px 8px #646cff40}.password-item.unread:hover{box-shadow:0 4px 16px #646cff59}.password-item.sent{background:linear-gradient(135deg,#2196f31a,#2a2a3a);border-left-color:#2196f3}.password-item.received{background:linear-gradient(135deg,#9c27b01a,#2a2a3a);border-left-color:#9c27b0}.link-share input{background:#2a2a3a;color:#e9ecef;border-color:#495057}.send-password{background:#2a2a3a;border-top-color:#495057}.send-password input{background:#1a1a2e;color:#e9ecef;border-color:#495057}.send-password input:disabled{background:#1a1a2e;opacity:.6}.password-exchange{background:#2a2a3a;border-color:#495057}.received-passwords{background:#1a1a2e}.fingerprint-verification{background:#2a2a3a;border-color:#ffc107}.fingerprint-verification p{color:#e9ecef}.fingerprint-comparison{background:#1a1a2e}.fingerprint-item{background:#2a2a3a}.fingerprint-item strong{color:#e9ecef}.fingerprint-item code{background:#1a1a2e;color:#e9ecef;border-color:#495057}}.copy-btn,.show-btn{background:#fff;color:#495057;border:1px solid #ced4da;border-radius:6px;padding:6px 10px;font-size:.8rem;font-weight:500;cursor:pointer;transition:all .2s ease;white-space:nowrap}.copy-btn:hover{background:#f8f9fa;border-color:#adb5bd}.show-btn{min-width:32px;padding:6px}.show-btn:hover{background:#f8f9fa;border-color:#adb5bd}.fingerprint-verification{background:#fff8e1;border:2px solid #ffc107;border-radius:12px;padding:20px;margin-bottom:24px}.fingerprint-verification h3{margin:0 0 12px;color:#f57c00;font-size:1.2rem}.fingerprint-verification p{margin:0 0 16px;color:#666;font-size:.95rem}.fingerprint-comparison{background:#fff;border-radius:8px;padding:16px;margin-bottom:16px}.fingerprint-item{margin-bottom:12px;padding:8px;background:#f8f9fa;border-radius:6px}.fingerprint-item:last-child{margin-bottom:0}.fingerprint-item strong{display:block;margin-bottom:4px;color:#495057;font-size:.9rem}.fingerprint-item code{font-family:Courier New,monospace;font-size:1rem;color:#333;background:#fff;padding:8px;border-radius:4px;border:1px solid #dee2e6;display:block;word-break:break-all}.verification-status{display:flex;gap:12px;justify-content:center}.secondary-button{background:#6c757d;color:#fff;border:none;padding:12px 20px;border-radius:8px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s ease}.secondary-button:hover{background:#5a6268;transform:translateY(-1px)}@keyframes slideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInFromBottom{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@media (max-width: 600px){body{padding:.5rem}.app-header{padding:1.5rem}.app-header h1{font-size:1.5rem}.app-main{padding:1.5rem}.link-share,.password-content{flex-direction:column}.password-header{flex-direction:column;align-items:flex-start;gap:8px}}.fingerprint-details{border:1px solid #e1e5e9;border-radius:8px;margin:12px 0}.fingerprint-details summary{padding:8px 12px;cursor:pointer;background:#f8f9fa;border-radius:8px 8px 0 0;font-weight:500;-webkit-user-select:none;user-select:none;transition:background-color .2s}.fingerprint-details summary:hover{background:#e9ecef}.fingerprint-details[open] summary{border-radius:8px 8px 0 0;border-bottom:1px solid #e1e5e9}.fingerprint-help{font-size:.9em;color:#6c757d;margin:8px 12px 12px}.fingerprint-comparison{padding:0 12px 12px}.fingerprint-row{display:flex;align-items:center;gap:8px;margin:4px 0}.fingerprint-label{font-weight:500;min-width:45px;font-size:.9em}.fingerprint-code{font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.85em;background:#f1f3f4;padding:4px 6px;border-radius:4px;letter-spacing:.5px;word-break:break-all;flex:1}@media (prefers-color-scheme: dark){.fingerprint-details{border-color:#495057}.fingerprint-details summary{background:#343a40;color:#f8f9fa}.fingerprint-details summary:hover{background:#495057}.fingerprint-details[open] summary{border-bottom-color:#495057}.fingerprint-help{color:#adb5bd}.fingerprint-code{background:#495057;color:#f8f9fa}}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}body{background:linear-gradient(135deg,#f0f2ff,#e6e9ff)}}