.logs-container{background:#1f1f2e;color:#fff;border-radius:12px;padding:20px;box-shadow:0 4px 12px #0000004d;margin-top:20px;display:flex;flex-direction:column;height:300px}.logs-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.1)}.logs-title{display:flex;align-items:center;gap:10px}.logs-title h3{margin:0;font-size:18px}.log-count{background:#ffffff1a;padding:4px 8px;border-radius:12px;font-size:12px;color:#a0a0a0}.btn{padding:8px 14px;border:none;border-radius:8px;cursor:pointer;display:flex;align-items:center;gap:6px;font-size:14px;transition:all .2s ease}.clear-btn{background:#ef4444;color:#fff}.clear-btn:disabled{opacity:.5;cursor:not-allowed}.clear-btn:not(:disabled):hover{background:#dc2626}.log-window{flex:1;overflow-y:auto;background:#0003;border-radius:8px;padding:10px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:13px;line-height:1.5}.log-entry{display:flex;align-items:flex-start;gap:8px;padding:8px;border-radius:4px;margin-bottom:4px;transition:background-color .2s ease}.log-entry:hover{background:#ffffff0d}.log-icon{flex-shrink:0;margin-top:2px}.log-timestamp{color:#a0a0a0;font-size:11px;flex-shrink:0}.log-message{flex:1;word-break:break-word}.log-info{color:#3b82f6}.log-success{color:#10b981}.log-warning{color:#f59e0b}.log-error{color:#ef4444}.log-window::-webkit-scrollbar{width:8px}.log-window::-webkit-scrollbar-track{background:#ffffff0d;border-radius:4px}.log-window::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}.log-window::-webkit-scrollbar-thumb:hover{background:#ffffff4d}@media (max-width: 768px){.logs-header{flex-direction:column;align-items:flex-start;gap:10px}.logs-title{width:100%;justify-content:space-between}.clear-btn{width:100%;justify-content:center}}@media (max-width: 480px){.logs-container{padding:15px;height:250px}.log-entry{flex-direction:column;gap:4px}.log-timestamp{align-self:flex-start}}.role-selection-container{display:flex;justify-content:center;align-items:center;min-height:100vh;background:linear-gradient(135deg,#0a0e17,#0f172a);padding:20px}.role-selection-card{background:#0f172af2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px;padding:40px;text-align:center;box-shadow:0 20px 40px #0000004d;border:1px solid rgba(255,255,255,.1);max-width:600px;width:100%}.role-header{margin-bottom:40px}.role-header-icon{font-size:48px;color:#3b82f6;margin-bottom:16px}.role-header h1{margin:0 0 8px;font-size:32px;font-weight:700;background:linear-gradient(135deg,#3b82f6,#8b5cf6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.role-header p{color:#94a3b8;font-size:16px;margin:0}.role-buttons{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px;margin-bottom:40px}.role-card{background:#1e293b99;border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:32px 24px;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden}.role-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,transparent,currentColor,transparent);opacity:0;transition:opacity .3s ease}.role-card:hover:before{opacity:1}.role-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px #0003;border-color:#3b82f64d}.role-card.sender:hover{border-color:#22c55e4d}.role-card.receiver:hover{border-color:#8b5cf64d}.role-icon{width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;font-size:32px;transition:all .3s ease}.role-card:hover .role-icon{transform:scale(1.1)}.role-icon.sender{background:#22c55e1a;color:#22c55e;border:2px solid rgba(34,197,94,.2)}.role-icon.receiver{background:#8b5cf61a;color:#8b5cf6;border:2px solid rgba(139,92,246,.2)}.role-card h3{margin:0 0 12px;font-size:20px;font-weight:600;color:#e1e7ff}.role-card p{color:#94a3b8;margin:0 0 20px;font-size:14px;line-height:1.5}.role-select-btn{background:#3b82f61a;color:#3b82f6;border:1px solid rgba(59,130,246,.2);padding:10px 20px;border-radius:8px;font-weight:500;transition:all .3s ease;cursor:pointer}.role-card.sender .role-select-btn{background:#22c55e1a;color:#22c55e;border-color:#22c55e33}.role-card.receiver .role-select-btn{background:#8b5cf61a;color:#8b5cf6;border-color:#8b5cf633}.role-select-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px #0003}.role-footer{border-top:1px solid rgba(255,255,255,.1);padding-top:24px}.role-footer p{color:#64748b;font-size:14px;margin:0}@media (max-width: 768px){.role-selection-card{padding:24px;margin:16px}.role-buttons{grid-template-columns:1fr}.role-header h1{font-size:24px}}.sender-container{display:flex;flex-direction:column;gap:20px;width:100%;height:100%;padding:20px;box-sizing:border-box}.status-card,.sender-form{background:#1f1f2e;color:#fff;border-radius:12px;padding:20px;display:flex;flex-direction:column;box-shadow:0 4px 12px #0000004d}.send-btn{background:#22c55e;color:#fff;margin-top:15px;align-self:flex-start}.sender-form h3{margin-top:0;margin-bottom:20px}@media (min-width: 768px){.sender-container{flex-direction:row}.status-card{min-width:280px;max-width:320px}.sender-form{flex:1}}@media (max-width: 767px){.status-actions{flex-direction:column}.btn,.send-btn{width:100%;justify-content:center}}@media (max-width: 480px){.sender-container,.status-card,.sender-form{padding:15px}.status-header h3{font-size:16px}.sender-form h3{font-size:18px}}.receiver-container-horizontal{display:flex;flex-direction:column;gap:20px;width:100%;height:100%;padding:20px;box-sizing:border-box}.status-card,.receiver-content{background:#1f1f2e;color:#fff;border-radius:12px;padding:20px;display:flex;flex-direction:column;box-shadow:0 4px 12px #0000004d}.status-info{display:flex;align-items:center;gap:8px;margin:10px 0}.receiver-content h3{margin-top:0;margin-bottom:20px}.transfer-info{margin-bottom:15px;padding:10px;background:#ffffff0d;border-radius:8px}.ip-address{font-family:monospace;background:#ffffff1a;padding:2px 6px;border-radius:4px}@media (min-width: 768px){.receiver-container-horizontal{flex-direction:row}.status-card{min-width:280px;max-width:320px}.receiver-content{flex:1}}@media (max-width: 767px){.status-actions{flex-direction:column}.btn,.download-btn{width:100%;justify-content:center}}@media (max-width: 480px){.receiver-container-horizontal,.status-card,.receiver-content{padding:15px}.status-header h3{font-size:16px}.receiver-content h3{font-size:18px}.file-transfer-info,.file-info{flex-direction:column;align-items:flex-start;gap:5px}}.session-sender-container-horizontal{display:flex;flex-direction:column;gap:20px;width:100%;height:100%;padding:20px;box-sizing:border-box}.status-card,.session-sender-content{background:#1f1f2e;color:#fff;border-radius:12px;padding:20px;display:flex;flex-direction:column;box-shadow:0 4px 12px #0000004d}.create-session-btn{background:#8b5cf6;color:#fff;margin-bottom:20px}.send-file-btn{background:#22c55e;color:#fff;margin-top:15px}.session-sender-content h3{margin-top:0;margin-bottom:20px}.session-id-container{margin-top:15px;padding:15px;background:#ffffff0d;border-radius:8px;border-left:4px solid #8b5cf6}.session-id-container label{display:block;margin-bottom:8px;font-weight:500}.session-id-display{display:flex;align-items:center;gap:10px;margin-bottom:10px}.session-id-value{flex:1;font-family:monospace;background:#ffffff1a;padding:8px 12px;border-radius:6px;overflow:hidden;text-overflow:ellipsis}.icon-btn{background:transparent;border:none;color:#a0a0a0;cursor:pointer;padding:6px;border-radius:4px;display:flex;align-items:center;justify-content:center}.icon-btn:hover{background:#ffffff1a;color:#fff}.session-help{font-size:.9em;color:#a0a0a0;margin:0;font-style:italic}.file-controls{margin-top:20px}.form-group{margin-bottom:20px}.file-input-container{position:relative}.file-input-container input[type=file]{position:absolute;left:-9999px}.file-input-label{display:inline-flex;align-items:center;gap:6px;padding:10px 16px;background:#3b82f6;color:#fff;border-radius:8px;cursor:pointer;transition:background .2s ease}.file-input-label:hover{background:#2563eb}.file-info{display:flex;align-items:center;gap:8px;margin-top:10px;padding:10px;background:#ffffff1a;border-radius:8px}@media (min-width: 768px){.session-sender-container-horizontal{flex-direction:row}.status-card{min-width:280px;max-width:320px}.session-sender-content{flex:1}}@media (max-width: 767px){.status-actions{flex-direction:column}.btn,.send-file-btn{width:100%;justify-content:center}.session-id-display{flex-direction:column;align-items:stretch;gap:8px}.icon-btn{align-self:flex-end}}@media (max-width: 480px){.session-sender-container-horizontal,.status-card,.session-sender-content{padding:15px}.status-header h3{font-size:16px}.session-sender-content h3{font-size:18px}.file-info{flex-direction:column;align-items:flex-start;gap:5px}}.session-receiver-container-horizontal{display:flex;flex-direction:column;gap:20px;width:100%;height:100%;padding:20px;box-sizing:border-box}.status-card,.session-receiver-content{background:#1f1f2e;color:#fff;border-radius:12px;padding:20px;display:flex;flex-direction:column;box-shadow:0 4px 12px #0000004d}.status-header{display:flex;align-items:center;gap:10px;margin-bottom:15px}.status-dot{width:12px;height:12px;border-radius:50%}.status-dot.connected{background:#4ade80}.status-dot.disconnected{background:#f87171}.status-actions{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}.btn{padding:10px 16px;border:none;border-radius:8px;cursor:pointer;display:flex;align-items:center;gap:6px;font-size:14px;transition:all .2s ease}.btn:disabled{opacity:.6;cursor:not-allowed}.connect-btn{background:#3b82f6;color:#fff}.disconnect-btn{background:#ef4444;color:#fff}.join-btn{background:#8b5cf6;color:#fff;margin-top:10px}.download-btn{background:#22c55e;color:#fff;margin-top:15px}.session-receiver-content h3{margin-top:0;margin-bottom:20px}.session-join{margin-bottom:20px}.form-group{margin-bottom:15px}.form-group label{display:block;margin-bottom:8px;font-weight:500}.form-group input[type=text]{width:100%;padding:10px 12px;border-radius:8px;border:1px solid #444;background:#2d2d3d;color:#fff;box-sizing:border-box}.form-group input[type=text]:disabled{opacity:.6;cursor:not-allowed}.session-status{margin:15px 0;padding:15px;background:#ffffff0d;border-radius:8px;border-left:4px solid #8b5cf6}.session-info p{margin:5px 0}.session-id{font-family:monospace;background:#ffffff1a;padding:2px 6px;border-radius:4px}.session-help{font-size:.9em;color:#a0a0a0;font-style:italic}.progress-section{margin-bottom:20px}.file-transfer-info{display:flex;align-items:center;gap:8px;margin-bottom:10px}.file-name{font-weight:500}.file-size{color:#a0a0a0;font-size:.9em}.transfer-stats{text-align:center;margin-top:8px;font-size:.9em;color:#a0a0a0}.received-file{margin-top:20px}.received-file h4{margin-bottom:10px;color:#4ade80}.file-details{padding:15px;background:#ffffff0d;border-radius:8px;border-left:4px solid #22c55e}.file-info{display:flex;align-items:center;gap:8px;margin-bottom:15px}.no-file{text-align:center;padding:30px;color:#a0a0a0;font-style:italic}.icon-inline{margin-right:5px}@media (min-width: 768px){.session-receiver-container-horizontal{flex-direction:row}.status-card{min-width:280px;max-width:320px}.session-receiver-content{flex:1}}@media (max-width: 767px){.status-actions{flex-direction:column}.btn,.join-btn,.download-btn{width:100%;justify-content:center}.file-transfer-info,.file-info{flex-direction:column;align-items:flex-start;gap:5px}}@media (max-width: 480px){.session-receiver-container-horizontal,.status-card,.session-receiver-content{padding:15px}.status-header h3{font-size:16px}.session-receiver-content h3{font-size:18px}}body{background:linear-gradient(135deg,#0a0e17,#0f172a);margin:0;padding:0;min-height:100vh;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.app-container{padding:0;min-height:100vh;color:#e1e7ff;background:linear-gradient(135deg,#0a0e17,#0f172a)}.app-header{background:linear-gradient(135deg,#0f172af2,#1e293bf2);padding:24px 32px;margin-bottom:24px;border-bottom:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 8px 32px #0003}.header-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.header-brand{display:flex;align-items:center;gap:12px}.app-header h1{margin:0;font-size:28px;font-weight:700;background:linear-gradient(135deg,#3b82f6,#8b5cf6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.app-version{background:#3b82f633;color:#3b82f6;padding:4px 8px;border-radius:12px;font-size:12px;font-weight:600}.header-icon{font-size:32px;color:#3b82f6}.back-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;background:#ef444426;color:#ef4444;border:1px solid rgba(239,68,68,.3);border-radius:8px;cursor:pointer;transition:all .3s ease;font-weight:500}.back-btn:hover{background:#ef444440;transform:translateY(-1px);box-shadow:0 4px 12px #ef444433}.mode-selector{margin-bottom:20px}.mode-selector-header{display:flex;align-items:center;gap:8px;margin-bottom:12px;color:#94a3b8;font-weight:500}.mode-header-icon{font-size:18px}.mode-buttons{display:flex;gap:16px}.mode-btn{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:16px 20px;border:1px solid rgba(255,255,255,.1);background:#1e293b99;color:#cbd5e1;cursor:pointer;border-radius:12px;transition:all .3s ease;font-weight:500;text-align:left;flex:1;min-width:160px}.mode-btn:hover{background:#1e293bcc;border-color:#3b82f680;box-shadow:0 8px 24px #0003}.mode-btn.active{background:linear-gradient(135deg,#3b82f633,#8b5cf633);border-color:#3b82f680;color:#e1e7ff;box-shadow:0 8px 24px #3b82f633}.mode-description{font-size:12px;color:#94a3b8;font-weight:400}.role-indicator{display:flex;justify-content:center}.sender-indicator,.receiver-indicator{display:inline-flex;align-items:center;gap:12px;padding:12px 24px;border-radius:24px;font-weight:500;background:#1e293bcc;border:1px solid rgba(100,116,139,.3);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.sender-indicator{color:#22c55e;border-color:#22c55e4d;background:#22c55e1a}.receiver-indicator{color:#8b5cf6;border-color:#8b5cf64d;background:#8b5cf61a}.indicator-icon{font-size:20px}.indicator-text{display:flex;flex-direction:column;gap:2px}.indicator-label{font-size:12px;opacity:.8;font-weight:400}.indicator-role{font-size:16px;font-weight:600}.app-main{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:24px;padding:0 24px 40px}.app-content{border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:32px;background:#0f172acc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 20px 40px #0000004d}.content-header{margin-bottom:28px;text-align:center}.content-title{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:8px}.content-title h2{margin:0;font-size:24px;font-weight:600;color:#e1e7ff}.content-icon{font-size:28px;color:#3b82f6}.content-description{color:#94a3b8;font-size:16px;max-width:500px;margin:0 auto;line-height:1.5}.component-wrapper{position:relative}.logs-section{margin-top:8px}@media (max-width: 768px){.app-header{padding:20px}.header-top{flex-direction:column;gap:16px}.header-brand,.back-btn{justify-content:center}.mode-buttons{flex-direction:column}.mode-btn{min-width:auto}.app-content{padding:24px 20px}.content-title{flex-direction:column;gap:8px}.content-title h2{font-size:20px}}@media (max-width: 480px){.app-main{padding:0 16px 32px}.app-header{padding:16px}.app-header h1{font-size:24px}.sender-indicator,.receiver-indicator{padding:10px 20px;flex-direction:column;text-align:center}.app-content{padding:20px 16px}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.app-content{animation:fadeIn .5s ease-out}.mode-btn{animation:fadeIn .6s ease-out}.mode-btn:nth-child(2){animation-delay:.1s}