:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#172033;background:#f4f7fb;--ink:#172033;--muted:#718096;--line:#dfe7f0;--blue:#2563eb;--blue-dark:#1746ad;--pale:#eef4ff;--green:#157347;--orange:#a65d00;--shadow:0 18px 50px #2c477b14}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:linear-gradient(135deg,#f8fbff,#f3f6fb);color:var(--ink)}button,input,select,textarea{font:inherit}button{cursor:pointer;border:0}button.primary{background:var(--blue);color:#fff;font-weight:750;padding:.75rem 1.05rem;border-radius:9px;box-shadow:0 6px 14px #2563eb2b}button.primary:hover{background:var(--blue-dark)}button.secondary,.icon-button,.back{background:#fff;color:var(--ink);border:1px solid var(--line);padding:.68rem .9rem;border-radius:9px;font-weight:650}.icon-button{padding:.55rem .7rem;color:var(--muted)}button:disabled{opacity:.5;cursor:not-allowed}.app-shell{display:flex;min-height:100vh}.sidebar{width:245px;background:#101d30;color:#fff;padding:25px 17px;display:flex;flex-direction:column;gap:30px}.brand{display:flex;align-items:center;gap:10px}.brand strong{display:block;font-size:.98rem}.brand small{display:block;color:#91a2b7;margin-top:3px;font-size:.72rem}.logo{width:40px;height:40px;border-radius:12px;background:linear-gradient(145deg,#59d8df,#647cff);color:#071729;display:grid;place-items:center;font-size:1.5rem;font-weight:900}.logo.small{width:34px;height:34px;font-size:1.2rem;border-radius:10px}nav{display:grid;gap:7px}nav button{background:transparent;color:#aebed0;text-align:left;border-radius:9px;padding:.75rem .8rem;display:flex;gap:11px;align-items:center;font-weight:650}nav button.selected,nav button:hover{background:#203554;color:#fff}.side-note{margin-top:auto;border-top:1px solid #2b3c53;padding-top:18px;color:#aebed0;line-height:1.6;font-size:.82rem}.side-note small{color:#72869d}.live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#45ce8c;box-shadow:0 0 0 4px #45ce8c20;margin-right:6px}.signout{background:transparent;color:#97a9bd;text-align:left;padding:.7rem 0}.main{width:min(1120px,100%);padding:42px 5%;margin:0 auto}.page-head,.builder-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:28px}.page-head h1,.builder-head h1{font-size:2rem;letter-spacing:-.04em;margin:.25rem 0 .45rem}.kicker{color:var(--blue);font-size:.7rem;letter-spacing:.14em;font-weight:850;margin:0 0 8px}.muted{color:var(--muted);line-height:1.55}.small-text{font-size:.82rem}.welcome{background:#172d49;color:#fff;border-radius:18px;padding:28px 31px;display:flex;justify-content:space-between;align-items:center;gap:30px;box-shadow:var(--shadow);margin-bottom:17px}.welcome .kicker{color:#7bd9e0}.welcome h2{font-size:1.45rem;margin:0 0 7px;letter-spacing:-.02em}.welcome p{color:#b4c7db;margin:0;max-width:520px;line-height:1.55}.flow{display:flex;align-items:center;gap:12px;white-space:nowrap}.flow span{background:#294665;padding:.65rem .8rem;border-radius:8px;font-size:.78rem;font-weight:750}.flow i{font-style:normal;color:#7bd9e0}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:15px 0 33px}.stats>div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px}.stats strong{display:block;font-size:1.55rem}.stats span{color:var(--muted);font-size:.82rem}.list-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.list-head h2{font-size:1.15rem;margin:0}.relay-list{display:grid;gap:11px}.relay-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:17px 18px;display:flex;align-items:center;gap:15px;box-shadow:0 2px 10px #2c477b08}.relay-icon{width:40px;height:40px;border-radius:11px;background:var(--pale);color:var(--blue);display:grid;place-items:center;font-size:1.25rem;font-weight:900}.relay-info{flex:1;min-width:0}.relay-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.relay-title h3{margin:0;font-size:1rem}.relay-info p{margin:4px 0 9px;color:var(--muted);font-size:.78rem}.relay-info code{color:#516a84;font-size:.73rem;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.relay-actions{display:flex;gap:7px;align-items:center}.status{border-radius:999px;font-size:.66rem;padding:.25rem .52rem;font-weight:800}.status.on{background:#e5f7ef;color:var(--green)}.status.off{background:#f1f3f6;color:#6b7280}.status.draft{background:#fff2d6;color:var(--orange)}.empty{text-align:center;background:#fff;border:1px dashed #c8d5e4;border-radius:15px;padding:46px 20px}.empty-icon{font-size:2rem;color:var(--blue)}.empty h3{margin:8px 0 3px}.empty p{color:var(--muted);margin:0 auto 18px}.overlay{position:fixed;inset:0;background:#08142680;display:grid;place-items:center;padding:22px;z-index:10}.modal{background:#fff;border-radius:18px;width:min(640px,100%);max-height:calc(100vh - 44px);overflow:auto;padding:26px;box-shadow:0 30px 90px #10233e40}.modal header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px}.modal h2{margin:0;font-size:1.45rem;letter-spacing:-.03em}.x-button{border:0;background:transparent;font-size:1.6rem;color:#8594a5;padding:0}.modal label,.settings-card label{display:block;color:#42556b;font-size:.78rem;font-weight:750;margin:15px 0}.modal input,.modal select,.modal textarea,.settings-card input{display:block;width:100%;margin-top:7px;border:1px solid #cdd9e6;background:#fbfdff;border-radius:8px;padding:.72rem;color:var(--ink)}.modal textarea{min-height:190px;font:12px ui-monospace,SFMono-Regular,Menlo,monospace;line-height:1.45}.modal details{border:1px solid var(--line);border-radius:9px;padding:10px 12px;margin-top:17px}.modal summary{font-weight:750;color:#52657a;cursor:pointer}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:23px}.success-box,.secret-box{border:1px solid #b8e0cb;background:#f0fbf5;border-radius:10px;padding:13px;margin:12px 0}.secret-box{background:#fff9e9;border-color:#edd392}.success-box b,.secret-box b{display:block;margin-bottom:7px}.success-box code,.secret-box code{display:block;word-break:break-all;background:#fff;border:1px solid #dce8e1;border-radius:6px;padding:9px;font-size:.76rem;margin-bottom:9px}.builder-head{align-items:center;margin-bottom:20px}.builder-head .back{margin-right:auto}.builder-status{margin-left:auto}.stepper{display:flex;align-items:center;gap:10px;margin-bottom:30px}.stepper>i{font-style:normal;color:#a5b2c2}.step{background:transparent;color:#8998aa;padding:0;display:flex;align-items:center;gap:7px;font-weight:700;font-size:.8rem}.step b{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:#e2e9f1;color:#6c7d91;font-size:.72rem}.step.current{color:var(--blue)}.step.current b,.step.done b{background:var(--blue);color:#fff}.builder-intro{margin-bottom:23px}.builder-intro h2{font-size:1.75rem;letter-spacing:-.04em;margin:0 0 7px}.builder-intro p:last-child{max-width:640px;margin:0}.sample-layout,.mapping-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.block-card,.route-block,.settings-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:19px;box-shadow:0 2px 12px #2c477b08}.block-title{display:flex;gap:11px;align-items:center;margin-bottom:15px}.block-title h3{font-size:1rem;margin:0}.block-title p{font-size:.76rem;color:var(--muted);margin:3px 0 0}.block-number{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--pale);color:var(--blue);font-weight:850}.code-input{width:100%;height:230px;resize:vertical;border:1px solid #cdd9e6;border-radius:9px;padding:12px;font:12px ui-monospace,SFMono-Regular,Menlo,monospace;background:#fbfdff}.inline-actions{display:flex;gap:8px;margin-top:12px}.field-cloud{display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start}.field-chip{background:#f1f6ff;border:1px solid #cbdcff;color:#2455a8;border-radius:8px;padding:.5rem .6rem;text-align:left;display:flex;flex-direction:column;cursor:grab}.field-chip small{font-size:.67rem;color:#7990ad;margin-top:3px;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mapping-grid label{display:block;color:#42556b;font-weight:750;font-size:.78rem;margin:14px 0}.field-select{display:block;width:100%;padding:.68rem;margin-top:6px;border:1px solid #cdd9e6;border-radius:8px;background:#fff}.detail-row{display:grid;grid-template-columns:1fr 20px 1.6fr 25px;gap:6px;align-items:center;margin:8px 0}.detail-row input,.detail-row select{width:100%;padding:.57rem;border:1px solid #cdd9e6;border-radius:7px;min-width:0}.detail-row span{color:#a0adba;text-align:center}.remove-detail,.remove-route{background:transparent;color:#a0adba;font-size:1.2rem}.add-link,.add-route{background:transparent;color:var(--blue);font-weight:750;padding:.75rem 0}.preview-strip{background:#172d49;color:#dce9f6;border-radius:12px;padding:14px 17px;margin-top:16px}.preview-strip span{font-size:.68rem;color:#7bd9e0;font-weight:850;letter-spacing:.1em}.preview-strip pre{white-space:pre-wrap;max-height:260px;overflow:auto;margin:10px 0 0;font:12px ui-monospace,SFMono-Regular,Menlo,monospace;color:#c4e7e8}.builder-footer{display:flex;justify-content:space-between;align-items:center;margin-top:25px}.builder-footer>div{display:flex;gap:8px}.route-stack{display:grid;gap:12px}.route-block{display:flex;gap:16px;position:relative}.route-label{font-size:.68rem;color:var(--blue);font-weight:850;letter-spacing:.1em;min-width:60px;padding-top:6px}.route-content{flex:1}.route-content h3{font-size:.95rem;margin:0 0 4px}.route-fields{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.route-fields label{font-size:.75rem;font-weight:750;color:#52657a}.route-fields input{width:100%;padding:.63rem;border:1px solid #cdd9e6;border-radius:8px;margin-top:5px}.default-route{background:#f8fbff;border-color:#c9dafa}.destination-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.destination-card{background:#fff;border:2px solid var(--line);border-radius:14px;padding:22px;text-align:left;display:grid;gap:8px}.destination-card.chosen{border-color:var(--blue);background:#f5f8ff}.destination-card span{font-size:1.35rem;color:var(--blue)}.destination-card b{font-size:1rem}.destination-card small{color:var(--muted);line-height:1.4}.connection-hint{margin-top:17px;padding:15px;background:#f5f8fc;border:1px solid var(--line);border-radius:9px;display:flex;gap:9px}.connection-hint span{color:var(--muted)}.settings-card{margin:15px 0;display:grid;grid-template-columns:auto 1fr;gap:8px 15px;align-items:start}.settings-card form{grid-column:span 2;display:grid;grid-template-columns:1fr 1fr auto;gap:13px;align-items:end}.settings-card form label{margin:0}.connection-mark{width:42px;height:42px;border-radius:12px;background:var(--pale);color:var(--blue);display:grid;place-items:center;font-size:1.5rem}.settings-copy h2,.settings-card h2{font-size:1.05rem;margin:4px 0}.discovery-results{grid-column:span 2;display:grid;gap:7px;margin-top:12px}.inventory-row{background:#f8fbff;border:1px solid var(--line);border-radius:8px;padding:11px 13px;text-align:left;display:flex;justify-content:space-between}.inventory-row small{color:var(--muted)}.toast{position:fixed;right:22px;bottom:22px;background:#172d49;color:#fff;border-radius:10px;padding:13px 17px;box-shadow:var(--shadow);z-index:20;max-width:390px}@media(max-width:850px){.sidebar{width:190px}.welcome{display:block}.flow{margin-top:20px;flex-wrap:wrap}.flow i{display:none}.sample-layout,.mapping-grid{grid-template-columns:1fr}.main{padding:28px 4%}}@media(max-width:620px){.app-shell{display:block}.sidebar{width:auto;min-height:auto;padding:17px;display:block}.sidebar nav{display:flex;margin-top:18px}.sidebar nav button span{display:none}.side-note,.signout{display:none}.main{padding:22px 15px}.page-head,.builder-head{display:block}.page-head button{margin-top:15px}.stats{gap:8px}.stats>div{padding:12px}.stats strong{font-size:1.2rem}.relay-card{align-items:flex-start}.relay-actions{display:block}.relay-actions button{display:block;margin-bottom:6px}.route-fields,.settings-card form,.destination-grid{grid-template-columns:1fr}.settings-card{display:block}.settings-copy{margin-top:10px}.settings-card form{margin-top:15px}.stepper{gap:5px}.stepper>i{display:none}.step{font-size:.68rem}.builder-footer{display:block}.builder-footer button{margin-top:10px}.builder-footer>div{justify-content:flex-end}}