:root,:root[data-theme=dark]{color-scheme:dark;--bg: #0d1017;--bg-glow: radial-gradient(1200px 600px at 50% -10%, rgba(79, 140, 255, .1), transparent 70%);--surface: #161a22;--surface-2: #1d222c;--border: #272d39;--text: #e8eaed;--muted: #969ca9;--primary: #4f8cff;--primary-hover: #6fa1ff;--primary-soft: rgba(79, 140, 255, .14);--on-primary: #ffffff;--green: #4ade80;--green-soft: rgba(74, 222, 128, .14);--amber: #fbbf24;--amber-soft: rgba(251, 191, 36, .14);--red: #f87171;--red-soft: rgba(248, 113, 113, .14);--shadow-1: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 8px rgba(0, 0, 0, .3);--shadow-2: 0 8px 30px rgba(0, 0, 0, .5)}:root[data-theme=light]{color-scheme:light;--bg: #f6f8fc;--bg-glow: radial-gradient(1200px 600px at 50% -10%, rgba(26, 115, 232, .1), transparent 70%);--surface: #ffffff;--surface-2: #f1f4f9;--border: #dfe3eb;--text: #1a1f29;--muted: #5f6573;--primary: #1a73e8;--primary-hover: #1765cc;--primary-soft: rgba(26, 115, 232, .08);--on-primary: #ffffff;--green: #188038;--green-soft: #e6f4ea;--amber: #b06000;--amber-soft: #fef7e0;--red: #d93025;--red-soft: #fce8e6;--shadow-1: 0 1px 2px rgba(60, 64, 67, .2), 0 1px 3px 1px rgba(60, 64, 67, .12);--shadow-2: 0 4px 24px rgba(60, 64, 67, .18)}:root{font-family:ui-sans-serif,Segoe UI Variable,Segoe UI,system-ui,Helvetica Neue,sans-serif;--mono: ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-size:14px;background-image:var(--bg-glow);background-repeat:no-repeat;background-attachment:fixed;transition:background-color .25s,color .25s}#app{max-width:780px;margin:0 auto;padding:1.1rem 1rem 3rem}a{color:var(--primary);text-decoration:none}a:hover{text-decoration:underline}.icon{flex-shrink:0;vertical-align:-3px}.logo{display:inline-flex;align-items:center;gap:.55rem;-webkit-user-select:none;user-select:none;cursor:pointer;text-decoration:none}.logo:hover{text-decoration:none}.logo:hover .logo-mark{box-shadow:0 4px 18px var(--primary-soft)}.logo-mark{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--primary),var(--primary-hover));color:#fff;border-radius:9px;box-shadow:0 4px 14px var(--primary-soft)}.logo.sm .logo-mark{width:30px;height:30px}.logo.lg .logo-mark{width:52px;height:52px;border-radius:14px}.logo-text{font-weight:650;letter-spacing:-.02em;color:var(--text)}.logo.sm .logo-text{font-size:1.2rem}.logo.lg .logo-text{font-size:2.5rem}.logo-accent{color:var(--primary)}button{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:10px;padding:.5rem .95rem;cursor:pointer;font:inherit;font-weight:550;transition:background .15s,border-color .15s,box-shadow .15s,transform .05s}button:hover{border-color:var(--primary);background:var(--primary-soft)}button:active{transform:translateY(1px)}button:disabled{opacity:.45;cursor:default;background:var(--surface);border-color:var(--border)}button.primary{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}button.primary:hover:not(:disabled){background:var(--primary-hover);border-color:var(--primary-hover);box-shadow:0 6px 18px var(--primary-soft)}button.subtle{border-color:transparent;background:none;color:var(--muted)}button.subtle:hover{background:var(--surface-2);border-color:transparent;color:var(--text)}.theme-toggle,.lang-switch{padding:.45rem;width:36px;height:36px;border-radius:10px;border-color:transparent;background:var(--surface-2);color:var(--muted)}.lang-switch{width:auto;padding:.45rem .7rem;font-size:.8rem;gap:.3rem}.theme-toggle:hover,.lang-switch:hover{color:var(--text);background:var(--surface-2);border-color:var(--primary)}textarea,input{background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:10px;padding:.7rem .9rem;font:inherit;transition:border-color .15s,box-shadow .15s}textarea:focus,input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}textarea::placeholder,input::placeholder{color:var(--muted)}header{display:flex;justify-content:space-between;align-items:center;gap:.75rem;margin-bottom:.8rem;flex-wrap:wrap}.room-info{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.room-code{font-family:var(--mono);font-size:1rem;letter-spacing:.2em;color:var(--text);background:var(--surface-2);border:1px solid var(--border);padding:.4rem .75rem;border-radius:10px}.badge{display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;padding:.3rem .75rem;border-radius:999px;border:1px solid var(--border);color:var(--muted);background:var(--surface-2)}.badge:before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}.badge.connected{color:var(--green);background:var(--green-soft);border-color:transparent}.badge.connected:before{animation:pulse 2s ease-in-out infinite}.badge.waiting{color:var(--amber);background:var(--amber-soft);border-color:transparent}.badge.disconnected,.badge.error{color:var(--red);background:var(--red-soft);border-color:transparent}@keyframes pulse{50%{opacity:.35}}.conn-error{display:flex;align-items:center;gap:.7rem;background:var(--red-soft);border:1px solid transparent;border-radius:12px;padding:.8rem 1rem;margin-bottom:1rem}.conn-error-icon{color:var(--red);flex-shrink:0}.conn-error p{margin:0;flex:1;color:var(--text);font-size:.88rem;line-height:1.5}.conn-error .primary{flex-shrink:0}.peers{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin-bottom:1rem}.peers-icon{color:var(--muted)}.peer{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--mono);font-size:.76rem;background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:999px;padding:.25rem .7rem;cursor:default}.peer.you{background:var(--primary-soft);border-color:transparent;color:var(--primary)}.peer .via{color:var(--muted)}.peer.via-p2p .via{color:var(--green)}.peer.via-relay .via{color:var(--amber)}.peer-empty{color:var(--muted);font-size:.8rem}.composer-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:.4rem .9rem .9rem;margin-bottom:1.4rem;box-shadow:var(--shadow-1)}.tabs{display:flex;align-items:center;gap:.3rem;margin-bottom:.8rem}.tabs .tab{border:1px solid transparent;background:none;color:var(--muted);padding:.5rem .9rem;border-radius:9px;font-weight:550}.tabs .tab:hover{background:var(--surface-2);border-color:transparent;color:var(--text)}.tabs .tab.active{color:var(--primary);background:var(--primary-soft);border-color:transparent}.composer{display:flex;flex-direction:column;gap:.7rem}.composer textarea{width:100%;min-height:7.5rem;resize:vertical}.composer .send-row{display:flex;justify-content:flex-end}.dropzone{border:2px dashed var(--border);border-radius:14px;padding:1.6rem;text-align:center;color:var(--muted);cursor:pointer;transition:border-color .15s,background .15s,transform .15s,color .15s;background:var(--surface-2)}.dropzone:hover{border-color:var(--primary);color:var(--primary)}.dropzone.dragging{border-color:var(--primary);color:var(--primary);background:var(--primary-soft);transform:scale(1.01)}.dropzone p{margin:.4rem 0 0}.dropzone .icon{width:30px;height:30px}.history-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.7rem}.history-head h2{display:flex;align-items:center;gap:.45rem;font-size:.95rem;font-weight:600;color:var(--muted);margin:0}.empty{color:var(--muted);text-align:center;padding:1.75rem 0}.item{display:flex;gap:.75rem;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:.65rem .85rem;margin-bottom:.5rem;transition:box-shadow .15s,border-color .15s;animation:item-in .25s ease both}.item:hover{box-shadow:var(--shadow-1);border-color:var(--primary)}@keyframes item-in{0%{opacity:0;transform:translateY(5px)}}.item .dir{display:inline-flex;padding:.3rem;border-radius:8px;background:var(--surface-2)}.item.sent .dir{color:var(--primary)}.item.received .dir{color:var(--green)}.item .body{flex:1;min-width:0}.item .text-body{margin:0;white-space:pre-wrap;word-break:break-word}.item strong{font-weight:600}.item small{color:var(--muted);display:block;margin-top:.15rem}.item.failed{border-color:var(--red);background:var(--red-soft)}.failed-note{color:var(--red)}.item progress{width:100%;accent-color:var(--primary);height:6px;margin-top:.3rem}.actions{display:flex;gap:.3rem}.actions button{padding:.4rem .75rem;font-size:.85rem;border-color:transparent;background:var(--surface-2)}.actions button:hover{border-color:var(--primary)}.landing{display:flex;flex-direction:column;align-items:center;gap:1.3rem;padding-top:15vh;text-align:center}.landing-tools{position:fixed;top:1rem;right:1rem;display:flex;gap:.5rem}.landing .logo{animation:rise .5s ease both}.landing p{color:var(--muted);margin:0;max-width:28rem;animation:rise .5s .08s ease both}.landing .primary{padding:.75rem 1.7rem;font-size:1rem;animation:rise .5s .16s ease both}.landing form{display:flex;gap:.5rem;animation:rise .5s .24s ease both}.landing input{text-transform:uppercase;letter-spacing:.18em;width:13.5rem;text-align:center;font-family:var(--mono)}.landing input::placeholder{letter-spacing:.01em}@keyframes rise{0%{opacity:0;transform:translateY(12px)}}.error{color:var(--red)}.room-footer{margin-top:2rem;padding-top:1rem;border-top:1px solid var(--border)}.data-controls{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}.delete-note{display:flex;align-items:flex-start;gap:.45rem;color:var(--muted);font-size:.82rem;line-height:1.45;margin:0;max-width:30rem}.delete-note .icon{color:var(--amber);margin-top:1px}button.danger{color:var(--red)}button.danger:hover{background:var(--red-soft);border-color:transparent;color:var(--red)}.landing-data{margin-top:1.5rem;opacity:.85;animation:rise .5s .4s ease both}.recent{width:100%;max-width:30rem;text-align:left;animation:rise .5s .3s ease both}.recent-head{display:flex;align-items:center;gap:.4rem;font-size:.78rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:.5rem}.recent-list{display:flex;flex-direction:column;gap:.4rem}.recent-room{display:flex;align-items:center;justify-content:space-between;width:100%;padding:.6rem .85rem;border-radius:10px}.recent-room code{font-family:var(--mono);font-size:.95rem;letter-spacing:.18em;color:var(--text)}.recent-room .icon{color:var(--muted)}.recent-room:hover .icon{color:var(--primary)}.notice{display:flex;align-items:flex-start;gap:.6rem;text-align:left;max-width:30rem;margin-top:.5rem;padding:.8rem 1rem;background:var(--amber-soft);border:1px solid transparent;border-radius:12px;animation:rise .5s .32s ease both}.notice-icon{color:var(--amber);margin-top:2px;flex-shrink:0}.notice p{margin:0;color:var(--text);font-size:.85rem;line-height:1.5}.remove-btn{color:var(--muted)}.remove-btn:hover{color:var(--red);background:var(--red-soft);border-color:transparent}.info-btn{padding:.45rem;width:36px;height:36px;border-radius:10px;border-color:transparent;background:var(--surface-2);color:var(--muted)}.info-btn:hover{color:var(--primary);background:var(--surface-2);border-color:var(--primary)}.icon-only{padding:.4rem;border-color:transparent;background:none}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;background:#0000008c;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:1rem;animation:fade .15s ease both}.modal{background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-2);width:100%;max-width:540px;max-height:88vh;display:flex;flex-direction:column;animation:pop .18s ease both}@keyframes fade{0%{opacity:0}}@keyframes pop{0%{opacity:0;transform:translateY(10px) scale(.98)}}.modal-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.1rem;border-bottom:1px solid var(--border)}.modal-head h2{display:flex;align-items:center;gap:.5rem;font-size:1.05rem;font-weight:650;margin:0}.modal-body{padding:.5rem 1.1rem;overflow-y:auto}.info-section{padding:.9rem 0;border-bottom:1px solid var(--border)}.info-section:last-child{border-bottom:none}.info-section h3{display:flex;align-items:center;gap:.5rem;font-size:.92rem;font-weight:600;margin:0 0 .35rem;color:var(--text)}.info-section p{margin:0;color:var(--muted);line-height:1.5}.info-section.warn h3{color:var(--amber)}.info-section.warn{background:var(--amber-soft);border:1px solid transparent;border-radius:10px;padding:.8rem .9rem;margin-top:.4rem}.modal-foot{padding:.9rem 1.1rem;border-top:1px solid var(--border);display:flex;justify-content:flex-end}