: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:480px}.app-container{background:#fffffff7;border-radius:16px;box-shadow:0 8px 32px #00000040;overflow:hidden;color:#333}.app-header{background:linear-gradient(135deg,#646cff,#535bf2);color:#fff;padding:1.25rem 1.5rem;text-align:center}.app-header h1{margin:0 0 .25rem;font-size:1.5rem;font-weight:700}.app-header p{margin:0;opacity:.85;font-size:.9rem}.app-main{padding:1.5rem}.step-card{text-align:center;transition:all .3s ease}.step-card.hidden{display:none}.step-card.active{animation:slideIn .3s ease-out}.step-number{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#646cff,#535bf2);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:700;margin:0 auto 1rem}.step-card h2{margin:0 0 .25rem;font-size:1.25rem;color:#333;font-weight:600}.step-card p{margin:0 0 1.25rem;color:#666;font-size:.9rem}.primary-button{background:linear-gradient(135deg,#646cff,#535bf2);color:#fff;border:none;padding:12px 28px;border-radius:10px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease}.primary-button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #646cff66}.primary-button:disabled{background:#ccc;cursor:not-allowed;transform:none;box-shadow:none}.copy-button{background:#fff;color:#646cff;border:1.5px solid #646cff;padding:8px 16px;border-radius:8px;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .2s ease}.copy-button:hover{background:#646cff;color:#fff}.link-share{display:flex;gap:10px;margin:1.25rem 0;align-items:stretch}.link-share input{flex:1;padding:10px 12px;border:1.5px solid #dee2e6;border-radius:8px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.8rem;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:10px;margin:1rem 0;padding:10px 16px;background:#f8f9fa;border-radius:8px}.status-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;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 #28a74533}.status-dot.sending{background:#6c757d;animation:pulse 1s infinite}.status-dot.error{background:#dc3545}#status-text{font-weight:500;font-size:.85rem;color:#495057}.password-exchange{text-align:left;background:#fff;border-radius:10px;border:1px solid #e9ecef;overflow:hidden;display:flex;flex-direction:column}.received-passwords{max-height:320px;overflow-y:auto;overflow-x:hidden;padding:.75rem;background:#fafbfc;flex:1}.no-passwords{text-align:center;color:#adb5bd;font-style:italic;padding:2rem 1rem;font-size:.85rem}.send-password{display:flex;gap:8px;padding:.75rem;border-top:1px solid #e9ecef;background:#fff}.send-password-input-wrapper{flex:1;display:flex;align-items:stretch;position:relative}.send-password-input-wrapper input{flex:1;padding:10px 36px 10px 12px;border:1.5px solid #dee2e6;border-radius:8px;font-size:.9rem;background:#fff;color:#333;transition:border-color .2s ease}.send-password-input-wrapper input:focus{outline:none;border-color:#646cff;box-shadow:0 0 0 3px #646cff1a}.send-password-input-wrapper input:disabled{background:#f5f5f5;opacity:.6}.toggle-input-visibility{position:absolute;right:4px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;font-size:.9rem;opacity:.4;transition:opacity .2s ease}.toggle-input-visibility:hover{opacity:1}.password-item{background:#fff;border:1px solid #e9ecef;border-radius:8px;padding:10px;margin-bottom:6px;transition:box-shadow .2s ease}.password-item:last-child{margin-bottom:0}.password-item:hover{box-shadow:0 2px 8px #00000014}.password-item.sent{background:#f0f7ff;border-left:3px solid #2196f3}.password-item.received{background:#faf5ff;border-left:3px solid #9c27b0}.password-item.unread{border-left:3px solid #646cff;background:linear-gradient(90deg,#646cff0f,#fff 30%);box-shadow:0 1px 6px #646cff1f}.password-item.unread .password-label:after{content:" new";color:#646cff;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px}.password-item.just-arrived{animation:shimmer 1.5s ease-out}@keyframes shimmer{0%{box-shadow:0 0 #646cff66}40%{box-shadow:0 0 12px 2px #646cff40}to{box-shadow:none}}.password-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font-size:.8rem}.password-label{font-weight:600;color:#6c757d}.password-content{display:flex;gap:6px;align-items:stretch}.password-value{flex:1;padding:6px 8px;border:1px solid #dee2e6;border-radius:6px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.85rem;background:#f8f9fa;color:#333}.copy-btn,.show-btn{background:#fff;color:#6c757d;border:1px solid #dee2e6;border-radius:6px;padding:4px 8px;font-size:.8rem;font-weight:500;cursor:pointer;transition:all .15s ease;white-space:nowrap}.copy-btn:hover,.show-btn:hover{background:#f8f9fa;border-color:#adb5bd;color:#333}.show-btn{min-width:30px;padding:4px 6px}.remove-btn{background:transparent;color:#ced4da;border:none;border-radius:50%;width:20px;height:20px;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s ease;line-height:1}.remove-btn:hover{color:#dc3545;background:#dc354514}.fingerprint-verification{background:#f8f9fa;border:1px solid #e1e5e9;border-radius:8px;padding:10px 12px;margin-bottom:12px}.fingerprint-verification .fingerprint-help{margin:0 0 6px;color:#6c757d;font-size:.8rem;text-align:center}.fingerprint-comparison{display:flex;flex-direction:column;gap:2px}.fingerprint-row{display:flex;align-items:center;gap:8px}.fingerprint-label{font-weight:500;min-width:40px;font-size:.8rem;color:#6c757d}.fingerprint-emoji{font-size:1.15rem;letter-spacing:2px}.fingerprint-code{font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.9rem;font-weight:600;background:#fff;padding:1px 6px;border-radius:4px;border:1px solid #e1e5e9;letter-spacing:1px}.wire-log-section{margin-top:12px;text-align:center}.wire-log-toggle{background:none;border:none;color:#888;font-size:.75rem;cursor:pointer;padding:4px 8px;transition:color .15s ease}.wire-log-toggle:hover{color:#646cff}.wire-log{margin-top:8px;background:#1a1a2e;border-radius:8px;padding:8px;max-height:200px;overflow-y:auto;text-align:left}.wire-log-empty{color:#6c757d;font-size:.75rem;text-align:center;margin:.5rem 0}.wire-entry{padding:4px 6px;margin-bottom:4px;border-radius:4px;font-size:.7rem;line-height:1.4}.wire-entry.wire-sent{background:#2196f31a;border-left:2px solid #2196f3}.wire-entry.wire-received{background:#9c27b01a;border-left:2px solid #9c27b0}.wire-meta{color:#adb5bd;display:block;margin-bottom:2px}.wire-meta strong{color:#e9ecef}.wire-data{display:block;color:#6c757d;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.65rem;word-break:break-all;white-space:pre-wrap}.how-it-works{text-align:left;margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid #e9ecef}.how-it-works h3{margin:0 0 .75rem;font-size:.9rem;font-weight:600;color:#495057;text-transform:uppercase;letter-spacing:.5px;text-align:center}.how-it-works ol{margin:0 0 .75rem;padding-left:1.5rem;font-size:.85rem;color:#555}.how-it-works li{margin-bottom:.35rem}.how-it-works li strong{color:#333}.how-it-works-note{margin:0;font-size:.8rem;color:#888;text-align:center}.how-it-works-note a{color:#646cff;text-decoration:none}.how-it-works-note a:hover{text-decoration:underline}.trust-approval-prompt{background:#fff3cd;border:1.5px solid #ffc107;border-radius:10px;padding:16px;margin-bottom:12px;text-align:center}.trust-approval-title{margin:0 0 4px;font-weight:700;font-size:.95rem;color:#856404}.trust-approval-description{margin:0 0 12px;font-size:.8rem;color:#856404}.trust-approval-comparison{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:12px}.trust-identity{display:flex;flex-direction:column;align-items:center;gap:2px}.trust-label{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:#856404}.trust-emoji{font-size:1.5rem;letter-spacing:2px}.trust-arrow{font-size:1.25rem;color:#856404}.trust-approval-actions{display:flex;gap:8px;justify-content:center}.danger-button{background:#dc3545;color:#fff;border:none;padding:8px 20px;border-radius:8px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s ease}.danger-button:hover{background:#c82333;transform:translateY(-1px);box-shadow:0 4px 12px #dc35454d}@keyframes slideIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}@media (max-width: 600px){body{padding:0;align-items:flex-start}#app{max-width:100%}.app-container{border-radius:0;min-height:100vh}.link-share,.password-content{flex-direction:column}}@media (prefers-color-scheme: dark){.app-container{background:#1e1e2e;color:#e9ecef}.step-card h2{color:#e9ecef}.step-card p{color:#adb5bd}.password-value{background:#2a2a3a;color:#e9ecef;border-color:#495057}.password-item{background:#2a2a3a;border-color:#3a3a4a}.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}.password-item.unread{background:linear-gradient(90deg,#646cff1a,#2a2a3a 20%);box-shadow:0 1px 6px #646cff33}.link-share input{background:#2a2a3a;color:#e9ecef;border-color:#495057}.send-password{background:#1e1e2e;border-top-color:#3a3a4a}.send-password-input-wrapper input{background:#2a2a3a;color:#e9ecef;border-color:#495057}.send-password-input-wrapper input:disabled{background:#2a2a3a;opacity:.5}.password-exchange{background:#1e1e2e;border-color:#3a3a4a}.received-passwords{background:#161625}.no-passwords{color:#6c757d}.connection-status{background:#2a2a3a}#status-text{color:#adb5bd}.copy-btn,.show-btn{background:#2a2a3a;color:#adb5bd;border-color:#495057}.copy-btn:hover,.show-btn:hover{background:#3a3a4a;color:#e9ecef}.remove-btn{color:#495057}.remove-btn:hover{color:#dc3545;background:#dc35451a}.fingerprint-verification{background:#2a2a3a;border-color:#3a3a4a}.fingerprint-verification .fingerprint-help,.fingerprint-label{color:#adb5bd}.fingerprint-code{background:#1e1e2e;color:#f8f9fa;border-color:#495057}.how-it-works{border-top-color:#3a3a4a}.how-it-works h3,.how-it-works ol{color:#adb5bd}.how-it-works li strong{color:#e9ecef}.how-it-works-note{color:#6c757d}.how-it-works-note a{color:#818cf8}.trust-approval-prompt{background:#ffc1071a;border-color:#ffc107}.trust-approval-title,.trust-approval-description,.trust-label,.trust-arrow{color:#ffc107}.copy-button{background:transparent;color:#818cf8;border-color:#818cf8}.copy-button:hover{background:#818cf8;color:#fff}.password-header,.password-label{color:#adb5bd}}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}body{background:linear-gradient(135deg,#f0f2ff,#e6e9ff)}}
