:root{--text:#283532;--text-h:#071412;--muted:#66736f;--bg:#f7faf8;--panel:#fff;--soft:#eef5f2;--border:#dce7e2;--accent:#1f7a6e;--shadow:0 20px 60px #14282414;--sans:Inter, ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial, sans-serif;font:16px/1.5 var(--sans);color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{min-width:320px;margin:0}button,input,textarea,select{font:inherit}button:focus-visible,a:focus-visible,label:focus-within{outline-offset:3px;outline:3px solid #1f7a6e52}h1,h2,p{margin-block:0}h1,h2{color:var(--text-h);letter-spacing:0}h1{margin-bottom:22px;font-size:clamp(42px,7vw,82px);line-height:.96}h2{font-size:clamp(24px,3vw,36px);line-height:1.08}#root{min-height:100svh}
.app-shell{background:linear-gradient(180deg, #1f7a6e14, transparent 34%), var(--bg);grid-template-rows:auto 1fr auto;min-height:100svh;display:grid}.topbar,.statusbar{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:16px;padding:18px clamp(20px,4vw,48px);display:flex}.statusbar{border-top:1px solid var(--border);min-height:58px;color:var(--muted);border-bottom:0}.brand{color:var(--text-h);font:700 18px/1 var(--sans);cursor:pointer;background:0 0;border:0;align-items:center;gap:10px;display:inline-flex}.brand-mark{color:#fff;background:#1f7a6e;border-radius:8px;place-items:center;width:36px;height:36px;font-size:13px;display:inline-grid}.home-view,.workspace{width:min(1120px,100% - 40px);margin:0 auto}.home-view{grid-template-columns:minmax(0,1fr) minmax(320px,460px);align-items:center;gap:clamp(28px,6vw,72px);padding:clamp(48px,8vw,96px) 0;display:grid}.intro{text-align:left}.intro h1{max-width:780px}.intro p:not(.eyebrow){max-width:650px;color:var(--muted);font-size:20px}.eyebrow{color:var(--accent);letter-spacing:0;text-transform:uppercase;margin-bottom:10px;font-size:13px;font-weight:800}.role-grid{gap:14px;display:grid}.role-button{border:1px solid var(--border);background:var(--panel);min-height:128px;color:var(--text-h);text-align:left;cursor:pointer;box-shadow:var(--shadow);border-radius:8px;grid-template-columns:56px 1fr;align-items:center;gap:16px;padding:22px;display:grid}.role-button:hover,.role-button:focus-visible,.primary-button:hover,.secondary-button:hover,.ghost-button:hover{transform:translateY(-1px)}.role-icon{border-radius:8px;place-items:center;width:56px;height:56px;font-size:16px;font-weight:800;display:grid}.send .role-icon{color:#15645b;background:#e5f4f1}.receive .role-icon{color:#845600;background:#fdeecf}.role-button strong,.flow-step strong,.file-list strong{color:var(--text-h);display:block}.role-button small,.file-list small,.helper-text{color:var(--muted)}.workspace{grid-template-columns:280px minmax(0,1fr);align-items:start;gap:28px;padding:32px 0;display:grid}.flow-rail{gap:10px;display:grid;position:sticky;top:24px}.flow-step{border:1px solid var(--border);background:var(--panel);opacity:.52;border-radius:8px;grid-template-columns:36px 1fr;align-items:center;gap:12px;min-height:58px;padding:10px 12px;display:grid}.flow-step span{background:var(--soft);width:36px;height:36px;color:var(--text-h);border-radius:999px;place-items:center;font-size:14px;font-weight:800;display:grid}.flow-step.active{opacity:1;border-color:#1f7a6e66}.panel{border:1px solid var(--border);background:var(--panel);min-height:620px;box-shadow:var(--shadow);border-radius:8px}.file-picker,.waiting-card,.discovery-card,.request-card,.transfer-card{text-align:left;gap:24px;padding:clamp(22px,4vw,40px);display:grid}.drop-zone{cursor:pointer;background:linear-gradient(#1f7a6e14,#f3b23b0f);border:2px dashed #1f7a6e59;border-radius:8px;align-content:center;place-items:center;gap:10px;min-height:360px;display:grid}.drop-zone input{clip:rect(0, 0, 0, 0);block-size:1px;inline-size:1px;position:absolute;overflow:hidden}.drop-icon{color:#fff;background:#1f7a6e;border-radius:999px;place-items:center;width:72px;height:72px;font-size:42px;line-height:1;display:grid}.file-summary{background:var(--soft);border-radius:8px;justify-content:space-between;align-items:center;gap:12px;padding:16px 18px;display:flex}.qr-frame,.video-frame{aspect-ratio:1;border:1px solid var(--border);background:#fff;border-radius:8px;place-items:center;width:min(100%,420px);display:grid;overflow:hidden}.qr-frame img{width:min(100%,360px);height:auto}.qr-frame span,.camera-state{color:var(--muted);font-size:14px}.video-frame{background:#0b1110}.video-frame video{object-fit:cover;width:100%;height:100%}.action-row{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.primary-button,.secondary-button,.ghost-button,.text-button{font:800 15px/1 var(--sans);cursor:pointer;border:1px solid #0000;border-radius:8px;transition:transform .14s,border-color .14s,background .14s}.primary-button,.secondary-button{min-height:44px;padding:0 18px}.primary-button{color:#fff;background:#1f7a6e}.secondary-button,.ghost-button{background:var(--soft);color:var(--text-h);border-color:var(--border)}.ghost-button{min-height:40px;padding:0 14px}.text-button{color:var(--accent);background:0 0;padding:0}.request-card p:not(.eyebrow),.helper-text{max-width:640px;margin:0}.waiting-card p:not(.eyebrow),.request-card p:not(.eyebrow){color:var(--muted)}.room-badge{background:#e5f4f1;border:1px solid #1f7a6e4d;border-radius:8px;gap:2px;width:fit-content;min-width:172px;padding:14px 16px;display:inline-grid}.room-badge span{color:var(--muted);font-size:13px;font-weight:700}.room-badge strong{color:var(--text-h);letter-spacing:0;font-size:24px}.room-badge small{color:var(--muted);font-size:13px;font-weight:700}.section-head{justify-content:space-between;align-items:start;gap:16px;display:flex}.empty-state{background:var(--soft);text-align:center;border:1px dashed #1f7a6e59;border-radius:8px;align-content:center;place-items:center;gap:6px;min-height:260px;display:grid}.empty-state strong{color:var(--text-h)}.empty-state span{color:var(--muted)}.room-list{gap:10px;margin:0;padding:0;list-style:none;display:grid}.room-list button{border:1px solid var(--border);background:var(--panel);width:100%;min-height:76px;color:var(--text);text-align:left;cursor:pointer;border-radius:8px;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;padding:14px 16px;display:grid}.room-list button:hover,.room-list button:focus-visible{border-color:#1f7a6e80}.room-list strong,.room-list small,.room-list em{display:block}.room-list strong{color:var(--text-h)}.room-list small,.room-list em{color:var(--muted)}.room-list em{font-style:normal;font-weight:700}.meter{background:var(--soft);border-radius:999px;height:14px;overflow:hidden}.transfer-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;display:grid}.transfer-stats span{border:1px solid var(--border);background:var(--soft);border-radius:8px;min-height:76px;padding:14px}.transfer-stats strong,.transfer-stats small{display:block}.transfer-stats strong{color:var(--text-h);overflow-wrap:anywhere;font-size:18px}.transfer-stats small{color:var(--muted);font-weight:700}.meter span{border-radius:inherit;background:linear-gradient(90deg,#1f7a6e,#f3b23b);height:100%;transition:width .16s;display:block}.file-list{gap:10px;margin:0;padding:0;list-style:none;display:grid}.file-list li{border:1px solid var(--border);border-radius:8px;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;min-height:62px;padding:12px 14px;display:grid}.file-list.compact li{grid-template-columns:1fr}.file-list strong{overflow-wrap:anywhere}.file-list a,.file-list em{color:var(--accent);font-size:14px;font-style:normal;font-weight:800;text-decoration:none}@media (max-width:800px){.topbar,.statusbar{padding-inline:16px}.home-view,.workspace{grid-template-columns:1fr;width:min(100% - 24px,1120px)}.home-view{padding:28px 0}.intro p:not(.eyebrow){font-size:17px}.flow-rail{padding-bottom:4px;display:flex;position:static;overflow-x:auto}.flow-step{min-width:196px}.panel{min-height:auto}.drop-zone{min-height:300px}.transfer-stats{grid-template-columns:1fr}}