:root{--bg: #0f1117;--surface: #1a1d27;--surface-2: #242736;--border: #2e3247;--accent: #6c63ff;--accent-hover: #8a83ff;--text: #e8e9f0;--text-muted: #8b8fa8;--success: #4ade80;--error: #f87171;--warning: #fbbf24;--radius: 12px;--transition: .18s ease}@media (prefers-color-scheme: light){:root{--bg: #f5f5f7;--surface: #ffffff;--surface-2: #f0f0f5;--border: #d1d5db;--text: #111827;--text-muted: #6b7280}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;scroll-behavior:smooth}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);min-height:100dvh;display:flex;flex-direction:column;align-items:center;padding:1.5rem 1rem}#app{width:100%;max-width:560px;display:flex;flex-direction:column;gap:1.5rem}header{text-align:center;padding:1rem 0}.logo{display:flex;align-items:center;justify-content:center;gap:.5rem}.lock-icon{font-size:1.75rem}h1{font-size:1.75rem;font-weight:700;letter-spacing:-.02em}.tagline{margin-top:.4rem;color:var(--text-muted);font-size:.875rem}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;display:flex;flex-direction:column;gap:1rem}.card h2{font-size:1.1rem;font-weight:600}.status{padding:.75rem 1rem;border-radius:8px;font-size:.9rem;font-weight:500;display:flex;align-items:center;gap:.5rem}.status.loading{background:var(--surface-2);color:var(--text-muted)}.status.ok{background:#4ade801a;color:var(--success);border:1px solid rgba(74,222,128,.25)}.status.error{background:#f871711a;color:var(--error);border:1px solid rgba(248,113,113,.25)}.result{background:var(--surface-2);border-radius:8px;padding:.75rem 1rem;font-family:monospace;font-size:.85rem;color:var(--text-muted);white-space:pre-wrap;word-break:break-all}.drop-zone{border:2px dashed var(--border);border-radius:var(--radius);padding:2.5rem 1rem;text-align:center;cursor:pointer;transition:border-color var(--transition),background var(--transition)}.drop-zone:hover,.drop-zone:focus-visible,.drop-zone.dragover{border-color:var(--accent);background:#6c63ff0d;outline:none}.drop-zone-inner{display:flex;flex-direction:column;align-items:center;gap:.5rem;pointer-events:none}.drop-icon{font-size:2.5rem}.drop-hint{font-size:.8rem;color:var(--text-muted)}.share-code{font-size:2.5rem;font-weight:700;letter-spacing:.15em;font-family:monospace;color:var(--accent);text-align:center;padding:1rem;background:var(--surface-2);border-radius:8px;cursor:pointer;user-select:all}#code-input{width:100%;padding:.75rem 1rem;border:1px solid var(--border);border-radius:8px;background:var(--surface-2);color:var(--text);font-size:1.25rem;font-family:monospace;text-align:center;letter-spacing:.15em;text-transform:lowercase;transition:border-color var(--transition)}#code-input:focus{outline:none;border-color:var(--accent)}button{padding:.75rem 1.5rem;background:var(--accent);color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:background var(--transition),transform var(--transition)}button:hover{background:var(--accent-hover)}button:active{transform:scale(.98)}button:disabled{opacity:.5;cursor:not-allowed}.progress-bar-wrap{background:var(--surface-2);border-radius:999px;height:8px;overflow:hidden}.progress-bar{height:100%;width:0%;background:var(--accent);border-radius:999px;transition:width .2s ease}#progress-label{text-align:center;font-size:.875rem;color:var(--text-muted)}footer{text-align:center;color:var(--text-muted);font-size:.8rem;padding:1rem 0}.mode-buttons{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.mode-btn{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1.5rem 1rem;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-size:.95rem;font-weight:500;cursor:pointer;transition:border-color var(--transition),background var(--transition)}.mode-btn:hover{border-color:var(--accent);background:#6c63ff14}.mode-icon{font-size:2rem}.card-header{display:flex;align-items:center;justify-content:space-between}.back-btn{padding:.35rem .75rem;background:transparent;border:1px solid var(--border);color:var(--text-muted);font-size:.85rem;font-weight:400}.back-btn:hover{background:var(--surface-2);color:var(--text)}.step-label{font-size:.9rem;color:var(--text-muted)}#file-list{display:flex;flex-direction:column;gap:.4rem}.file-item{display:flex;justify-content:space-between;align-items:center;padding:.5rem .75rem;background:var(--surface-2);border-radius:6px;font-size:.875rem}.file-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:70%}.file-size{color:var(--text-muted);flex-shrink:0}button.primary{background:var(--accent);width:100%}#download-area{display:flex;flex-direction:column;gap:.5rem}.download-row{display:flex;align-items:center;justify-content:space-between;padding:.6rem .75rem;background:var(--surface-2);border-radius:8px}.download-btn{padding:.4rem .9rem;background:var(--success);color:#000;border-radius:6px;text-decoration:none;font-size:.875rem;font-weight:600;white-space:nowrap;transition:opacity var(--transition)}.download-btn:hover{opacity:.85}@keyframes spin{to{transform:rotate(360deg)}}.status.loading:before{content:"";display:inline-block;width:.75em;height:.75em;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:spin .75s linear infinite;margin-right:.5em;vertical-align:middle;flex-shrink:0}.qr-wrap{display:flex;flex-direction:column;align-items:center;gap:.6rem;padding:.5rem 0}.copy-link-btn{font-size:.85rem;padding:.35rem .9rem;background:transparent;border:1px solid var(--border);border-radius:6px;color:var(--text-muted);cursor:pointer;transition:background .15s,color .15s}.copy-link-btn:hover{background:var(--surface2);color:var(--text)}.qr-wrap canvas{border-radius:8px;box-shadow:0 2px 8px #0000004d}.sas-box{background:#6c63ff12;border:1px solid rgba(108,99,255,.25);border-radius:8px;padding:.75rem 1rem;text-align:center}.sas-label{display:block;font-size:.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.4rem}.sas-emoji{font-size:1.75rem;letter-spacing:.25em;padding:.2rem 0;line-height:1.4}.sas-hint{font-size:.75rem;color:var(--text-muted);margin-top:.35rem}.cancel-btn{background:transparent;border:1px solid var(--border);color:var(--text-muted);font-size:.875rem;font-weight:400;width:100%;margin-top:.25rem}.cancel-btn:hover{background:#f8717114;border-color:var(--error);color:var(--error)}.file-total{font-size:.8rem;color:var(--text-muted);text-align:right;padding:.15rem .75rem 0}#receiver-confirm{display:flex;flex-direction:column;gap:.75rem}@keyframes pulse-border{0%,to{box-shadow:0 0 #4ade8000}50%{box-shadow:0 0 0 4px #4ade802e}}.status.ok.connecting{animation:pulse-border 1.6s ease-in-out infinite}@media (max-width: 480px){h1{font-size:1.4rem}.share-code{font-size:2rem}.mode-buttons{grid-template-columns:1fr}.sas-emoji{font-size:1.5rem}}[hidden]{display:none!important}