:root{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#0f172a;color:#0f172a}html,body,#root{height:100%}*{box-sizing:border-box}body{margin:0;background:#0f172a;overflow-y:auto}.app-shell{min-height:100vh;padding:clamp(1rem,1vw,3.5rem);background:radial-gradient(circle at top left,#1e3a8a,#0f172a);color:#0f172a;display:flex;flex-direction:column;gap:1.5rem}.tool-shell{min-height:100vh;display:flex;background:radial-gradient(circle at top left,#050c1c,#030712);color:#f8fafc}.tool-sidebar{width:25%;max-width:90vw;padding:1.5rem;background:#020617e6;border-right:1px solid rgba(99,102,241,.25);display:flex;flex-direction:column;gap:1.25rem}.sidebar-brand{display:flex;gap:.75rem;align-items:center;padding-bottom:1rem;border-bottom:1px solid rgba(148,163,184,.3)}.sidebar-brand strong{font-size:1.3rem}.sidebar-brand small{text-transform:uppercase;letter-spacing:.2em;font-size:.65rem;color:#e2e8f0b3}.sidebar-section{background:#0f172abf;border-radius:18px;padding:1rem;box-shadow:inset 0 0 0 1px #94a3b81a;display:flex;flex-direction:column;gap:.75rem}.sidebar-heading{font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:#e2e8f08c;margin:0}.sidebar-steps{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.75rem}.sidebar-steps li{display:flex;gap:.6rem;align-items:flex-start}.sidebar-steps li strong{display:block}.sidebar-steps li small{color:#e2e8f0a6}.sidebar-room-code{display:flex;justify-content:space-between;align-items:center;font-size:1.3rem;font-weight:700;letter-spacing:.2em}.sidebar-room-code em{font-size:.8rem;color:#fcd34d}.sidebar-room-actions{display:flex;flex-direction:column;gap:.5rem}.tool-sidebar input{width:100%;padding:.5rem .75rem;border-radius:12px;border:none;background:#0f172a99;color:#f8fafc}.block-btn{width:100%;justify-content:center}.roster-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem}.roster-list li{padding:.45rem .6rem;border-radius:12px;background:#0f172ad9;box-shadow:inset 0 0 0 1px #94a3b833}.roster-list strong{display:block}.roster-list span{color:#e2e8f099;font-size:.8rem}.tool-main{width:75%;flex:1;padding:2rem;display:flex;flex-direction:column;gap:1.5rem}.stack-form{display:flex;flex-direction:column;gap:.55rem}.stack-form input{width:100%;padding:.5rem .75rem;border-radius:12px;border:1px solid rgba(148,163,184,.4);background:#0f172a66;color:#f8fafc}.sidebar-mobile{display:none;flex-direction:column;gap:1rem;margin-bottom:1rem}.mobile-sections{display:flex;flex-direction:column;gap:1rem}.mobile-card{background:#0f172abf;border-radius:18px;padding:1rem;box-shadow:inset 0 0 0 1px #94a3b81a}.mobile-heading{text-transform:uppercase;letter-spacing:.15em;font-size:.75rem;color:#e2e8f08c;margin:0 0 .4rem}.mobile-card-brand .sidebar-brand{border-bottom:none;padding-bottom:0}.tool-header{display:flex;justify-content:space-between;align-items:flex-start;background:#0f172abf;border-radius:24px;padding:1.5rem;box-shadow:0 20px 60px #02061799}.tool-header h1{margin:.1rem 0;font-size:clamp(1.5rem,4vw,2.4rem)}.tool-header-actions{display:flex;gap:1.5rem;align-items:center}.tool-header-actions>div{text-align:right}.tool-header-actions strong{display:block;font-size:1.4rem}.tool-header-actions .ghost-btn{min-width:auto}.panel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.25rem}.panel{background:#0f172abf;border-radius:22px;padding:1.25rem;box-shadow:0 20px 55px #03071273;display:flex;flex-direction:column;min-height:0}.panel.span-2{grid-column:span 2}.workspace-panel{min-height:240px}.transfer-status{margin-top:1rem;padding-top:1rem;border-top:1px solid rgba(148,163,184,.2)}.queue-list li{background:#1e293bcc}.signal-log{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.45rem;font-family:JetBrains Mono,SFMono-Regular,Consolas,monospace;font-size:.8rem;color:#a5b4fc}.tool-main .panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.dashboard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.5rem;flex:1;min-height:0;overflow:hidden}.card.span-2{grid-column:span 2}header{display:flex;justify-content:space-between;align-items:center;color:#f8fafc;gap:1rem;flex-wrap:wrap;flex-shrink:0}header h1{margin:0;font-size:clamp(1.75rem,4vw,2.75rem)}.status-line{position:sticky;top:0;z-index:20;display:flex;flex-wrap:wrap;align-items:center;gap:1rem;padding:.85rem 1.25rem;border-radius:24px;background:#0f172abf;box-shadow:0 15px 35px #0f172a59;color:#f8fafc;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.status-pill{display:inline-flex;align-items:center;gap:.6rem;background:#f8fafc26;border-radius:999px;padding:.4rem 1rem;font-size:.95rem}.status-dot{width:10px;height:10px;border-radius:999px;background:#94a3b8}.status-dot.status-active{background:#34d399}.status-dot.status-linking{background:#fbbf24;animation:status-blink 1.2s infinite}.status-dot.status-online{background:#60a5fa}.status-dot.status-idle{background:#f87171}.status-line-steps{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}.status-mini{padding:.25rem .75rem;border-radius:999px;border:1px solid rgba(248,250,252,.25);font-size:.8rem;color:#e2e8f0;position:relative}.status-mini.mini-on{background:#34d39940;border-color:#34d39980}.status-mini[data-tooltip]:hover:after{content:attr(data-tooltip);position:absolute;top:calc(100% + 6px);left:50%;transform:translate(-50%);background:#0f172ad9;color:#f8fafc;padding:.35rem .65rem;border-radius:8px;font-size:.75rem;white-space:nowrap;box-shadow:0 10px 30px #0f172a66;z-index:10}.status-line-events{display:flex;flex-wrap:wrap;gap:.5rem;margin-left:auto}.panel{border-radius:28px;padding:clamp(1.25rem,3vw,2rem);box-shadow:0 35px 65px #0f172a33;display:flex;flex-direction:column;min-height:0;color:#fff}.panel-header{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}.panel h2{margin:.1rem 0 .2rem}.panel-body{flex:1;min-height:0;margin-top:1rem;overflow:auto;display:flex;flex-direction:column;gap:1rem}button,input,label{font:inherit}button{border:none;cursor:pointer;padding:.85rem 1.5rem;border-radius:999px;transition:opacity .2s ease}button:disabled{opacity:.6;cursor:not-allowed}.primary-btn{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff}.ghost-btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;min-width:120px}.danger-btn{background:#ef444429;color:#fecaca;border:1px solid rgba(239,68,68,.4)}.join-form{display:flex;gap:.75rem;align-items:center}.join-form input{padding:.75rem;border-radius:16px;border:1px solid rgba(15,23,42,.15);flex:1;text-transform:uppercase}.room-code{font-size:clamp(2rem,6vw,3rem);font-weight:700;letter-spacing:.2em}.code-row{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.upload{margin-top:1.25rem;display:inline-flex;align-items:center;gap:1rem;cursor:pointer;color:#2563eb;font-weight:600}.upload input{display:none}.file-list{list-style:none;padding:0;margin:1rem 0 0;display:flex;flex-direction:column;gap:.75rem}.file-card{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:.85rem 1rem;border-radius:18px;background:#0f172a0d;color:#fff}.file-card p{margin:.3rem 0 0;color:#475569;font-size:.9rem}.card-body{flex:1;min-height:0;margin-top:.75rem;overflow:auto}.scrollable-content{max-height:100%}.empty-state{margin:0;color:#64748b;font-style:italic}.copy-field{display:flex;gap:.5rem;align-items:center;width:100%}.copy-field input{flex:1;border:1px solid rgba(15,23,42,.15);border-radius:12px;padding:.65rem .75rem;font-size:.9rem;background:#fff;color:#0f172a}.pill-list{list-style:none;margin:1rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.65rem}.pill{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .85rem;border-radius:999px;background:#0f172a14;font-size:.9rem}.pill-badge{font-size:.8rem;font-weight:600;color:#2563eb}.toast-stack{position:fixed;right:1.25rem;bottom:1.25rem;display:flex;flex-direction:column;gap:.75rem}.toast{min-width:220px;background:#0f172aeb;color:#f8fafc;padding:.85rem 1.25rem;border-radius:18px;box-shadow:0 15px 30px #0f172a59;font-size:.9rem;animation:fade-in .2s ease}.toast-success{background:#10b981f2}.toast-error{background:#ef4444f2}@keyframes fade-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes status-blink{0%{opacity:.4}50%{opacity:1}to{opacity:.4}}@media(max-width:640px){.tool-sidebar,.connection{display:none}.sidebar-section{flex:1 1 auto}.tool-header{flex-direction:column;gap:1rem}.tool-header-actions{width:100%;justify-content:space-between}.panel.span-2{grid-column:span 1}.sidebar-mobile{display:flex}.join-form{flex-direction:column}.file-card{flex-direction:column;align-items:flex-start}.ghost-btn{width:100%}.status-line{flex-direction:column;align-items:flex-start}.status-line-steps,.status-line-events{width:100%}}.panel-accent{background:linear-gradient(135deg,#0f172afa,#1e40aff2);color:#f8fafc;box-shadow:0 45px 80px #0f172a66}.panel-accent .muted{color:#e2e8f0bf}.panel-subsection{margin-top:1rem;padding:.9rem;border-radius:18px;background:#0f172a0f}.panel-subsection h3{margin:0 0 .35rem;font-size:1rem}.panel .muted{color:#475569;margin-top:.25rem}.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:.75rem;color:#94a3b8;margin:0 0 .25rem}.hero{background:#f8fafc14;border-radius:32px;padding:clamp(1.5rem,4vw,3rem);display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;color:#f8fafc;box-shadow:inset 0 0 0 1px #ffffff0d}.hero-text{flex:2;min-width:280px}.brand-mark{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .9rem;border-radius:999px;background:#0f172a59;box-shadow:inset 0 0 0 1px #ffffff1a;color:#f8fafc;font-weight:700;font-size:1.25rem;letter-spacing:.02em}.brand-icon{width:36px;height:36px;border-radius:12px;background:linear-gradient(135deg,#38bdf8,#6366f1);display:inline-flex;align-items:center;justify-content:center;font-size:1.1rem;text-transform:lowercase;font-weight:600;color:#f8fafc}.brand-name{text-transform:none;font-size:1.25rem}.secure-pill{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .75rem;border-radius:999px;background:#10b98126;color:#6ee7b7;font-size:.9rem}.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;align-items:baseline;margin-top:1rem}.hero-create{display:flex;flex-direction:column;gap:.35rem;min-width:240px}.hero-create .secure-toggle{display:inline-flex;align-items:center;gap:.35rem;font-size:.9rem;color:#f8fafcd9}.hero-create .secure-toggle input{width:auto;min-width:0}.hero-create .secure-input{padding:.65rem .85rem;border-radius:16px;border:none;background:#0f172a66;color:#f8fafc}.hero-join{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}.hero-join input{padding:.65rem .85rem;border-radius:16px;border:none;min-width:160px;background:#0f172a66;color:#f8fafc}.hero-upload span{color:#f8fafc}.hero-card{background:#0f172aa6;border-radius:24px;padding:1.25rem;display:flex;gap:1rem}.hero-label{text-transform:uppercase;font-size:.75rem;letter-spacing:.12em;color:#e2e8f0a6}.hero-card strong{display:block;font-size:1.8rem;margin-top:.35rem}.hero-card>div{position:relative}.hero-stat-participants{cursor:default}.participants-popover{position:absolute;top:calc(100% + .5rem);left:0;min-width:220px;background:#0f172af2;border-radius:18px;padding:.75rem 1rem;box-shadow:0 20px 45px #0f172a73;z-index:20;max-height:220px;overflow-y:auto}.participants-popover ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.4rem}.participants-popover li{display:flex;justify-content:space-between;gap:.5rem;color:#f8fafc;font-size:.9rem}.participants-popover small{color:#e2e8f0b3}.main-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.5rem;flex:1;min-height:0;overflow:hidden}.column{display:flex;flex-direction:column;gap:1.5rem;min-height:0}.column .panel{flex:1}.panel.tall-panel{max-height:420px}.primary-column,.secondary-column{min-height:0}.cta-group{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}.upload-primary{justify-content:center;border:1px dashed rgba(248,250,252,.5);padding:1.25rem;border-radius:18px}.progress-track{width:100%;height:10px;border-radius:999px;background:#0f172a1f;overflow:hidden}.progress-fill{height:100%;transition:width .2s ease}