*,*:before,*:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;min-height:100vh}#root{min-height:100vh}*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,SF Pro Text,Helvetica Neue,sans-serif;background:linear-gradient(180deg,#f5f5f7,#e8e8ed);min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.app{min-height:100vh;display:flex;flex-direction:column;align-items:center}.header{padding:48px 20px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}.brand{display:flex;flex-direction:column;align-items:center;gap:12px}.brand-icon{width:64px;height:64px;border-radius:16px;box-shadow:0 4px 12px #00000014}.brand-title{font-size:1.5rem;font-weight:600;color:#1d1d1f;letter-spacing:-.02em}.brand-subtitle{font-size:.875rem;color:#6e6e73;font-weight:400}.timer{margin-top:8px;font-size:.8125rem;font-weight:500;color:#6e6e73;background:#0000000a;padding:6px 14px;border-radius:100px}.main{flex:1;display:flex;justify-content:center;align-items:flex-start;padding:24px 20px 40px;width:100%;max-width:480px}.enter-code-section,.waiting-section,.connected-section,.expired-section,.error-section{background:#ffffffb8;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:20px;padding:40px;width:100%;text-align:center;box-shadow:0 0 0 1px #0000000a,0 4px 24px #0000000f}.enter-code-section h2,.waiting-section h2,.expired-section h2,.error-section h2{font-size:1.25rem;font-weight:600;color:#1d1d1f;margin-bottom:6px;letter-spacing:-.01em}.subtitle{color:#6e6e73;font-size:.9375rem;margin-bottom:28px;line-height:1.4}.code-input-container{display:flex;flex-direction:column;gap:16px;align-items:center}.code-input{font-size:2rem;text-align:center;letter-spacing:12px;padding:16px 24px;border:1.5px solid rgba(0,0,0,.1);border-radius:12px;width:200px;font-weight:500;color:#1d1d1f;background:#fff9;transition:all .2s ease}.code-input::placeholder{color:#c7c7cc;letter-spacing:12px}.code-input:focus{outline:none;border-color:#0071e3;box-shadow:0 0 0 3px #0071e326}.join-btn{background:linear-gradient(135deg,#00d4aa,#7b61ff,#ff6b9d);color:#fff;border:none;padding:14px 40px;font-size:1rem;font-weight:600;border-radius:12px;cursor:pointer;transition:all .2s ease;letter-spacing:-.01em}.join-btn:hover:not(:disabled){transform:scale(1.02);box-shadow:0 8px 24px #7b61ff4d}.join-btn:active:not(:disabled){transform:scale(.98)}.join-btn:disabled{opacity:.4;cursor:not-allowed}.qr-container{margin:24px 0;display:flex;flex-direction:column;align-items:center}.qr-wrapper{background:#fff;padding:16px;border-radius:16px;box-shadow:0 2px 12px #0000000f}.qr-container svg{display:block}.qr-instruction{margin-top:16px;color:#6e6e73;font-size:.875rem}.connection-code{margin-top:20px;padding:12px 20px;background:#00000008;border-radius:10px;font-size:.875rem;color:#6e6e73}.connection-code strong{color:#1d1d1f;font-size:1rem;letter-spacing:3px;font-weight:600}.connected-section{text-align:left}.connected-badge{display:inline-flex;align-items:center;gap:8px;background:#34c7591a;color:#248a3d;padding:8px 16px;border-radius:100px;font-size:.875rem;font-weight:500;margin-bottom:24px}.connected-dot{width:8px;height:8px;background:#34c759;border-radius:50%;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.9)}}.file-transfer{width:100%}.upload-success-notification,.new-file-notification{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;margin-bottom:16px;animation:slideIn .3s ease-out;font-size:.875rem}.upload-success-notification{background:#0071e314;color:#0071e3}.new-file-notification{background:#34c75914;color:#248a3d}.notification-icon{font-size:1rem}.notification-close{background:#0000000f;border:none;color:inherit;width:22px;height:22px;border-radius:50%;cursor:pointer;margin-left:auto;display:flex;align-items:center;justify-content:center;font-size:11px;transition:background .15s ease}.notification-close:hover{background:#0000001a}@keyframes slideIn{0%{transform:translateY(-10px);opacity:0}to{transform:translateY(0);opacity:1}}.drop-zone{border:2px dashed rgba(0,0,0,.12);border-radius:16px;padding:36px;text-align:center;transition:all .2s ease;margin-bottom:24px;background:#fff6}.drop-zone.drag-over{border-color:#0071e3;background:#0071e30a}.drop-label{display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;color:#6e6e73;font-size:.9375rem}.drop-icon{font-size:2.5rem;opacity:.6}.drop-hint{font-size:.8125rem;color:#8e8e93;margin-top:4px}.files-section h3{font-size:.8125rem;font-weight:600;color:#6e6e73;text-transform:uppercase;letter-spacing:.04em;margin-bottom:12px}.no-files{color:#8e8e93;font-size:.875rem;text-align:center;padding:24px;background:#00000005;border-radius:12px}.file-list{list-style:none}.file-item{display:flex;align-items:center;gap:12px;padding:14px 16px;background:#fff9;border-radius:12px;margin-bottom:8px;border:1px solid rgba(0,0,0,.04)}.file-icon{font-size:1.5rem;opacity:.7}.file-info{flex:1;min-width:0}.file-name{font-weight:500;color:#1d1d1f;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.9375rem}.file-size{color:#8e8e93;font-size:.8125rem;margin-top:2px}.download-btn{background:#0071e3;color:#fff;border:none;padding:8px 18px;font-size:.8125rem;font-weight:600;border-radius:8px;cursor:pointer;transition:all .15s ease}.download-btn:hover:not(:disabled){background:#0077ed}.download-btn:active:not(:disabled){transform:scale(.96)}.download-btn:disabled{opacity:.5;cursor:not-allowed}.error{background:#ff3b3014;color:#d70015;padding:12px 16px;border-radius:10px;margin-bottom:16px;font-size:.875rem}.reset-btn{background:linear-gradient(135deg,#00d4aa,#7b61ff,#ff6b9d);color:#fff;border:none;padding:14px 36px;font-size:1rem;font-weight:600;border-radius:12px;cursor:pointer;margin-top:24px;transition:all .2s ease}.reset-btn:hover{transform:scale(1.02);box-shadow:0 8px 24px #7b61ff4d}.reset-btn:active{transform:scale(.98)}.footer{padding:24px 20px 32px;text-align:center}.footer p{color:#8e8e93;font-size:.8125rem;line-height:1.5}.footer-brand{color:#6e6e73;font-weight:500}@media (max-width: 520px){.enter-code-section,.waiting-section,.connected-section,.expired-section,.error-section{padding:28px 24px;border-radius:16px}.header{padding:32px 20px 20px}.brand-icon{width:56px;height:56px}.brand-title{font-size:1.25rem}.code-input,.join-btn,.reset-btn{width:100%;max-width:200px}}