:root{--background:#f6f7f6;--surface:#fff;--text:#1b2422;--muted:#68736f;--border:#dde2df;--border-strong:#c9d0cc;--primary:#176b5b;--primary-hover:#12594c;--primary-soft:#edf7f3;--danger:#a63a3a;--danger-soft:#fff3f2;--shadow:0 1px 2px #121f1c0a, 0 8px 28px #121f1c0d}*{box-sizing:border-box}html{background:var(--background)}body{color:var(--text);background:var(--background);-webkit-font-smoothing:antialiased;margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}.app-shell{flex-direction:column;min-height:100vh;display:flex}.topbar{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;width:min(100% - 40px,960px);height:68px;margin:0 auto;display:flex}.wordmark{color:var(--text);letter-spacing:-.02em;background:0 0;border:0;align-items:center;gap:10px;padding:0;font-size:16px;font-weight:700;display:flex}.wordmark-icon{color:#fff;background:var(--primary);border-radius:7px;place-items:center;width:28px;height:28px;font-size:12px;font-weight:800;display:grid}.privacy-status{color:var(--muted);align-items:center;gap:7px;font-size:12px;display:flex}.content{flex:1;width:min(100% - 40px,760px);margin:0 auto;padding:64px 0 48px}h1{letter-spacing:-.04em;margin:0;font-size:clamp(28px,5vw,38px);font-weight:680;line-height:1.15}p{color:var(--muted);line-height:1.55}.start-card{text-align:center;max-width:560px;margin:70px auto 0}.start-card>p{margin:12px 0 26px}.session-heading{justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:24px;display:flex}.status{color:var(--muted);align-items:center;gap:8px;margin-top:10px;font-size:13px;display:flex}.dot{background:#c49338;border-radius:50%;flex:none;width:8px;height:8px}.dot.online{background:#23936f}.button{border:1px solid #0000;border-radius:8px;min-height:42px;padding:0 16px;font-size:13px;font-weight:650;transition:background .15s,border-color .15s}.button.primary{color:#fff;background:var(--primary)}.button.primary:hover:not(:disabled){background:var(--primary-hover)}.button.secondary{color:var(--text);border-color:var(--border-strong);background:#fff}.button.secondary:hover:not(:disabled),.button.subtle:hover:not(:disabled){background:#f2f4f3}.button.subtle{color:var(--text);border-color:var(--border);background:0 0}.button.danger{color:var(--danger)}.button.full{width:100%;margin-top:10px}.text-button{color:var(--primary);background:0 0;border:0;padding:12px;font-size:13px;font-weight:650}.text-button:hover{text-decoration:underline}.button-row{gap:8px;display:flex}input{border:1px solid var(--border-strong);width:100%;min-width:0;height:44px;color:var(--text);background:#fff;border-radius:8px;outline:none;padding:0 13px;font-size:14px}input:focus{border-color:var(--primary);box-shadow:0 0 0 3px #176b5b1f}.input-action{grid-template-columns:minmax(0,1fr) auto;gap:8px;display:grid}.input-action.compact{margin-top:14px}.connect-card,.transfer-card,.request-card{border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow);border-radius:12px}.connect-card{padding:32px}.label{color:var(--muted);font-size:12px;font-weight:650;display:block}.connection-code{letter-spacing:.08em;margin:12px 0 8px;font:650 clamp(34px,8vw,52px)/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.code-section p{margin:0;font-size:13px}.divider{text-align:center;margin:28px 0;position:relative}.divider:before{content:"";background:var(--border);height:1px;position:absolute;top:50%;left:0;right:0}.divider span{color:#8b9591;background:#fff;padding:0 10px;font-size:11px;position:relative}.copy-row{grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:10px;display:grid}.copy-row input{color:var(--muted);background:#f8f9f8}.join-existing{border-top:1px solid var(--border);margin-top:24px;padding-top:20px}.join-existing summary{width:fit-content;color:var(--primary);cursor:pointer;font-size:13px;font-weight:650}.request-card{border-color:#bad7cd;justify-content:space-between;align-items:center;gap:20px;margin-top:12px;padding:18px 20px;display:flex}.request-card strong{font-size:14px}.request-card p{margin:4px 0 0;font-size:12px}.transfer-card{padding:28px}.verification{border-bottom:1px solid var(--border);color:var(--muted);justify-content:space-between;align-items:center;gap:16px;padding-bottom:20px;font-size:12px;display:flex}.verification>span{align-items:center;gap:7px;display:flex}.verification strong{color:var(--text);letter-spacing:.04em;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.safety-note{color:#785d21;background:#fff8e8;border-radius:7px;margin:14px 0 0;padding:10px 12px;font-size:12px}.file-picker{text-align:center;cursor:pointer;background:#fafbfa;border:1px dashed #aeb8b4;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;gap:7px;min-height:170px;margin-top:20px;display:flex}.file-picker:hover{border-color:var(--primary);background:var(--primary-soft)}.file-picker input{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute}.file-picker strong{overflow-wrap:anywhere;max-width:90%;font-size:14px}.file-picker span{color:var(--muted);font-size:12px}.file-offer{background:var(--primary-soft);border:1px solid #bad7cd;border-radius:9px;justify-content:space-between;align-items:center;gap:16px;margin-top:14px;padding:16px;display:flex}.file-offer strong,.file-offer span{overflow-wrap:anywhere;max-width:360px;display:block}.file-offer strong{font-size:13px}.file-offer span{color:var(--muted);margin-top:3px;font-size:12px}.progress{border:1px solid var(--border);border-radius:9px;margin-top:14px;padding:16px}.progress>div:first-child{justify-content:space-between;gap:16px;font-size:12px;display:flex}.progress strong{overflow-wrap:anywhere;max-width:80%}.progress-track{appearance:none;background:#e8ecea;border:0;border-radius:99px;width:100%;height:6px;margin:12px 0 8px;overflow:hidden}.progress-track::-webkit-progress-bar{background:#e8ecea;border-radius:99px}.progress-track::-webkit-progress-value{background:var(--primary);border-radius:99px;min-width:2px;transition:width .15s linear}.progress-track::-moz-progress-bar{background:var(--primary);border-radius:99px;min-width:2px}.progress small{color:var(--muted);font-size:11px}.notice{border:1px solid var(--border);text-align:left;border-radius:8px;margin:16px 0;padding:11px 13px;font-size:13px}.notice.error{color:#842f2f;background:var(--danger-soft);border-color:#edcfcb}footer{border-top:1px solid var(--border);color:#87908d;text-align:center;width:min(100% - 40px,960px);margin:0 auto;padding:20px 0 28px;font-size:11px}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (max-width:640px){.topbar,.content,footer{width:min(100% - 28px,760px)}.topbar{height:60px}.privacy-status{font-size:11px}.content{padding-top:36px}.start-card{margin-top:36px}.session-heading{align-items:flex-start}.session-heading .button{min-height:36px;padding-inline:11px}.connect-card,.transfer-card{padding:20px}.input-action,.copy-row{grid-template-columns:1fr}.request-card,.file-offer,.verification{flex-direction:column;align-items:stretch}.request-card .button-row,.file-offer .button-row{width:100%}.request-card .button,.file-offer .button{flex:1}.verification{gap:10px}.connection-code{font-size:clamp(29px,11vw,42px)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important}}
