*{box-sizing:border-box}body{-webkit-font-smoothing:antialiased;margin:0}#root{min-height:100vh}:root{--accent:#fff;--bg:#080808;--card:#111;--border:#1e1e1e;--success:#4ade80;--muted:#555;--r:14px;--ease:cubic-bezier(.16,1,.3,1)}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:#f0f0f0;-webkit-font-smoothing:antialiased;min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.shell{flex-direction:column;min-height:100vh;display:flex;position:relative;overflow:hidden}body:after{content:"";pointer-events:none;z-index:9999;opacity:.11;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-repeat:repeat;background-size:160px;position:fixed;inset:0}.page--welcome:before{content:"";pointer-events:none;z-index:0;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.35' numOctaves='6' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23t)'/%3E%3C/svg%3E");background-repeat:repeat;background-size:300px;position:absolute;inset:0}.top-bar{border-bottom:1px solid var(--border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:20;background:#080808d9;justify-content:space-between;align-items:center;padding:16px 32px;display:flex;position:sticky;top:0}.top-brand{letter-spacing:-2px;color:#f73a00;font-size:28px;font-weight:900;line-height:1}.step-track{gap:8px;display:flex}.step-pill{color:#2a2a2a;border:1px solid #0000;border-radius:999px;align-items:center;gap:6px;padding:6px 14px;font-size:13px;font-weight:500;transition:all .2s;display:flex}.step-pill--active{color:#f0f0f0;border-color:var(--border);background:#ffffff0d}.step-pill--done{color:var(--success)}.pill-num{background:var(--border);border-radius:50%;justify-content:center;align-items:center;width:18px;height:18px;font-size:10px;display:flex}.step-pill--active .pill-num{background:#ffffff26}.step-pill--done .pill-num{background:color-mix(in srgb, var(--success) 15%, transparent);color:var(--success)}.brand-mark{color:var(--accent);filter:drop-shadow(0 0 14px #ffffff2e);font-size:28px;line-height:1}.brand-mark.sm{filter:none;color:#444;font-size:16px}.page{animation:page-in .4s var(--ease) both}@keyframes page-in{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}.page-header{flex-direction:column;gap:4px;display:flex}.page-title{letter-spacing:-.5px;color:#f0f0f0;font-size:26px;font-weight:700}.page-sub{color:var(--muted);font-size:14px}.page--welcome{background:#f7f4f0;flex:1;align-items:stretch;min-height:100vh;display:flex;position:relative;overflow:hidden}.welcome-inner{background:#fff;border:2px solid #0d0d0d;border-radius:28px;flex-direction:column;flex:none;justify-content:center;gap:24px;width:fit-content;margin:32px 0 32px 32px;padding:4px 36px 8px;display:flex}.welcome-chad{flex:1;justify-content:flex-end;align-items:flex-end;padding-bottom:0;padding-right:4%;display:flex;overflow:hidden}.chad-img{object-fit:contain;object-position:bottom center;width:auto;height:85vh;margin-bottom:5vh}.welcome-brand{letter-spacing:-4px;color:#f73a00;font-size:clamp(56px,9vw,100px);font-weight:900;line-height:.9}.hero-title{letter-spacing:-1.5px;color:#0d0d0d;font-size:38px;font-weight:800;line-height:1.1}.hero-accent{color:#f73a00}.hero-sub{color:#888;font-size:16px;line-height:1.6}.welcome-form{flex-direction:column;gap:10px;display:flex}.hint{display:none}.w-input{color:#0d0d0d!important;background:#fff!important;border:1.5px solid #c0b8ae!important;border-radius:6px!important}.w-input::placeholder{color:#aaa!important}.w-input:focus{background:#fff!important;border-color:#0d0d0d!important}.btn-welcome{color:#fff;cursor:pointer;background:#f73a00;border:none;border-radius:6px;justify-content:center;align-items:center;gap:8px;width:100%;padding:11px 20px;font-size:15px;font-weight:700;transition:opacity .12s;display:flex}.btn-welcome:hover:not(:disabled){opacity:.85}.btn-welcome:disabled{opacity:.3;cursor:not-allowed}.btn-welcome .arr{transition:transform .12s;display:inline-block}.btn-welcome:hover:not(:disabled) .arr{transform:translate(3px)}.field{flex-direction:column;gap:6px;display:flex}.field-label{text-transform:uppercase;letter-spacing:.1em;color:#888;font-size:11px}.text-input{border:1px solid var(--border);color:#f0f0f0;background:#ffffff0a;border-radius:10px;outline:none;width:100%;padding:12px 14px;font-size:15px;transition:border-color .15s,background .15s}.text-input:focus{background:#ffffff0f;border-color:#333}.text-input::placeholder{color:#222}.text-input--xs{padding:8px 10px;font-size:13px}.btn-primary{background:var(--accent);color:#000;cursor:pointer;border:none;border-radius:10px;justify-content:center;align-items:center;gap:8px;width:100%;padding:13px 20px;font-size:15px;font-weight:600;transition:opacity .15s,transform .15s;display:flex}.btn-primary:hover:not(:disabled){opacity:.85;transform:translateY(-1px)}.btn-primary:active:not(:disabled){transform:none}.btn-primary:disabled{opacity:.18;cursor:not-allowed}.btn-inline{width:auto}.btn-connect{border:1px solid var(--border);color:#f0f0f0;cursor:pointer;white-space:nowrap;background:#ffffff0f;border-radius:8px;flex-shrink:0;padding:8px 16px;font-size:13px;font-weight:500;transition:background .15s,border-color .15s}.btn-connect:hover{background:#ffffff1a;border-color:#444}.btn-save{background:var(--accent);color:#000;cursor:pointer;border:none;border-radius:8px;flex-shrink:0;padding:8px 14px;font-size:12px;font-weight:600;transition:opacity .15s}.btn-save:disabled{opacity:.25;cursor:not-allowed}.btn-ghost-sm{color:#333;cursor:pointer;background:0 0;border:none;padding:8px;font-size:13px;transition:color .15s}.btn-ghost-sm:hover{color:#666}.arr{transition:transform .15s;display:inline-block}.btn-primary:hover:not(:disabled) .arr{transform:translate(3px)}.cat-pills{flex-wrap:wrap;gap:8px;display:flex}.pill{border:1px solid var(--border);color:#555;cursor:pointer;background:#ffffff08;border-radius:999px;padding:6px 14px;font-size:13px;transition:all .15s}.pill:hover{color:#aaa;border-color:#333}.pill--active{color:#f0f0f0;background:#ffffff17;border-color:#555}.page--select{flex-direction:column;flex:1;gap:24px;width:100%;max-width:960px;margin:0 auto;padding:32px;display:flex}.app-grid{flex:1;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));align-content:start;gap:24px 12px;display:grid}.app-tile{background:var(--card);border:1px solid var(--border);border-radius:var(--r);cursor:pointer;text-align:left;aspect-ratio:1;animation:tile-in .3s var(--ease) both;flex-direction:column;gap:8px;padding:18px 16px;transition:border-color .2s,transform .2s,box-shadow .2s;display:flex;position:relative;overflow:hidden}.app-tile:hover{border-color:#333;transform:translateY(-2px);box-shadow:0 8px 32px #00000073}.app-tile--selected{background:#ffffff0a;border-color:var(--accent)!important}.app-tile--selected .tile-glow{opacity:1}@keyframes tile-in{0%{opacity:0;transform:scale(.94)translateY(6px)}to{opacity:1;transform:none}}.tile-glow{opacity:0;background:radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--app-color,#fff) 8%, transparent), transparent 70%);pointer-events:none;transition:opacity .25s;position:absolute;inset:0}.tile-top{justify-content:space-between;align-items:flex-end;height:46px;display:flex}.tile-icon{object-fit:contain;width:34px;height:34px}.tile-icon--lg{width:46px;height:46px}.tile-check{background:var(--accent);color:#000;opacity:0;width:20px;height:20px;transition:opacity .2s var(--ease), transform .2s var(--ease);border-radius:50%;justify-content:center;align-items:center;font-size:11px;font-weight:700;display:flex;transform:scale(.4)}.tile-check--visible{opacity:1;transform:none}.tile-name{color:#f0f0f0;font-size:14px;font-weight:600}.tile-desc{color:var(--muted);font-size:12px;line-height:1.4}.tile-tag{color:#2a2a2a;text-transform:uppercase;letter-spacing:.08em;margin-top:auto;font-size:10px}.sticky-footer{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:var(--r);background:#080808eb;justify-content:space-between;align-items:center;padding:14px 18px;display:flex;position:sticky;bottom:20px}.sel-count{color:var(--muted);font-size:13px}.sel-count strong{color:#f0f0f0}.shell--light{background:#f7f4f0}.shell--light .top-bar{-webkit-backdrop-filter:none;backdrop-filter:none;background:#f7f4f0eb;border-bottom-color:#d6d0c8}.shell--light .step-pill{color:#aaa}.shell--light .step-pill--active{color:#0d0d0d;background:#0000000a;border-color:#c0b8ae}.shell--light .step-pill--done{color:#f73a00}.shell--light .pill-num{background:#e6e0d8}.shell--light .step-pill--active .pill-num{color:#0d0d0d;background:#00000014}.shell--light .step-pill--done .pill-num{color:#f73a00;background:#f73a001a}.shell--light .page-title{color:#0d0d0d}.shell--light .page-sub{color:#888}.shell--light .pill{color:#888;background:#fff;border-color:#d6d0c8}.shell--light .pill:hover{color:#0d0d0d;border-color:#0d0d0d}.shell--light .pill--active{color:#fff;background:#f73a00;border-color:#f73a00}.shell--light .app-tile{box-shadow:none;background:#fff;border-color:#d6d0c8}.shell--light .app-tile:hover{border-color:#0d0d0d;box-shadow:0 6px 20px #00000014}.shell--light .app-tile--selected{background:#f73a0008;border-color:#f73a00!important}.shell--light .tile-name{color:#0d0d0d}.shell--light .tile-desc{color:#888}.shell--light .tile-tag{color:#bbb}.shell--light .tile-check{color:#fff;background:#f73a00}.shell--light .sticky-footer{-webkit-backdrop-filter:none;backdrop-filter:none;background:#f7f4f0f5;border-color:#d6d0c8}.shell--light .sel-count{color:#888}.shell--light .sel-count strong{color:#0d0d0d}.shell--light .btn-primary{color:#fff;background:#f73a00}.shell--light .btn-primary:disabled{opacity:.25}.shell--light .connect-card{background:#fff;border-color:#d6d0c8}.shell--light .connect-card--done{border-color:#4ade8080}.shell--light .cc-label{color:#0d0d0d}.shell--light .cc-apps{color:#888}.shell--light .btn-connect{color:#0d0d0d;background:#fff;border-color:#d6d0c8}.shell--light .btn-connect:hover{background:#f0ece6;border-color:#0d0d0d}.shell--light .webhook-row .text-input{color:#0d0d0d;background:#fff;border-color:#d6d0c8}.shell--light .webhook-row .text-input::placeholder{color:#bbb}.shell--light .btn-save{color:#fff;background:#f73a00}.shell--light .connect-footer{border-top:1px solid #d6d0c8;padding-top:16px}.btn-back{color:#888;cursor:pointer;background:0 0;border:1.5px solid #d6d0c8;border-radius:8px;padding:10px 18px;font-size:14px;font-weight:500;transition:border-color .15s,color .15s}.btn-back:hover{color:#0d0d0d;border-color:#0d0d0d}.page--connect{flex-direction:column;flex:1;gap:24px;width:100%;max-width:620px;margin:0 auto;padding:32px;display:flex}.connect-list{flex-direction:column;gap:10px;display:flex}.connect-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);justify-content:space-between;align-items:center;gap:16px;padding:16px 18px;transition:border-color .2s;display:flex}.connect-card--done{border-color:color-mix(in srgb, var(--success) 30%, transparent)}.cc-left{flex:1;align-items:center;gap:12px;min-width:0;display:flex}.cc-icon{object-fit:contain;flex-shrink:0;width:32px;height:32px}.cc-label{color:#f0f0f0;font-size:14px;font-weight:600}.cc-apps{color:var(--muted);margin-top:2px;font-size:12px}.badge{white-space:nowrap;border-radius:999px;padding:5px 12px;font-size:12px;font-weight:600}.badge--ok{color:var(--success);background:color-mix(in srgb, var(--success) 10%, transparent)}.webhook-row{flex-shrink:0;align-items:center;gap:8px;max-width:280px;display:flex}.connect-card--col{flex-direction:column;align-items:stretch}.connect-card--col .cc-left{width:100%}.cred-form{flex-direction:column;gap:8px;margin-top:4px;display:flex}.cred-form .btn-save{align-self:flex-end}.cred-row{gap:8px;display:flex}.cred-row .text-input{flex:1;min-width:0}.cred-section-label{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-top:2px;font-size:11px}.connect-footer{justify-content:space-between;align-items:center;margin-top:auto;padding-top:8px;display:flex}.page--done{flex:1;justify-content:center;align-items:center;padding:40px 24px;display:flex;position:relative}.done-inner{text-align:center;z-index:2;flex-direction:column;align-items:center;gap:20px;width:100%;max-width:420px;display:flex;position:relative}.done-ring{border:2px solid var(--success);width:80px;height:80px;box-shadow:0 0 40px color-mix(in srgb, var(--success) 15%, transparent);animation:ring-in .5s var(--ease) both;border-radius:50%;justify-content:center;align-items:center;display:flex;position:relative}.done-pulse{border:1px solid var(--success);opacity:0;border-radius:50%;animation:2.5s ease-out .4s infinite ring-pulse;position:absolute;inset:-10px}@keyframes ring-pulse{0%{opacity:.5;transform:scale(.9)}to{opacity:0;transform:scale(1.6)}}@keyframes ring-in{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:none}}.done-check{color:var(--success);font-size:30px}.chip-row{flex-wrap:wrap;justify-content:center;gap:8px;margin-top:4px;display:flex}.chip{background:var(--card);border:1px solid var(--border);color:#ccc;animation:chip-in .35s var(--ease) both;border-radius:999px;align-items:center;gap:7px;padding:7px 14px;font-size:13px;display:flex}@keyframes chip-in{0%{opacity:0;transform:scale(.75)translateY(6px)}to{opacity:1;transform:none}}.chip-icon{object-fit:contain;width:16px;height:16px}.fab{border:1px solid var(--border);color:#444;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:50;background:#ffffff0d;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;font-size:18px;transition:background .15s,color .15s,transform .25s;display:flex;position:fixed;bottom:24px;right:24px}.fab:hover{color:#ccc;background:#ffffff1a;transform:rotate(45deg)}.overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:100;background:#0000008c;justify-content:flex-end;animation:.2s both fade-in;display:flex;position:fixed;inset:0}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.panel{border-left:1px solid var(--border);width:290px;height:100%;animation:slide-in .28s var(--ease) both;background:#090909;flex-direction:column;display:flex;overflow-y:auto}@keyframes slide-in{0%{transform:translate(100%)}to{transform:none}}.panel-head{border-bottom:1px solid var(--border);z-index:1;color:#f0f0f0;background:#090909;justify-content:space-between;align-items:center;padding:18px 18px 14px;font-size:13px;font-weight:600;display:flex;position:sticky;top:0}.panel-body{flex-direction:column;flex:1;display:flex}.panel-group{border-bottom:1px solid var(--border);flex-direction:column;gap:12px;padding:16px 18px;display:flex}.panel-group-label{text-transform:uppercase;letter-spacing:.12em;color:#2e2e2e;font-size:10px}.t-row{flex-direction:column;gap:5px;display:flex}.t-label{color:#3a3a3a;font-size:11px}.color-row{align-items:center;gap:8px;display:flex}.color-swatch{border:1px solid var(--border);cursor:pointer;background:0 0;border-radius:8px;flex-shrink:0;width:34px;height:34px;padding:2px}.color-swatch::-webkit-color-swatch-wrapper{border-radius:6px;padding:0}.color-swatch::-webkit-color-swatch{border:none;border-radius:6px}.icon-btn{color:#3a3a3a;cursor:pointer;background:0 0;border:none;border-radius:6px;padding:4px 8px;font-size:13px;transition:color .15s,background .15s}.icon-btn:hover{color:#f0f0f0;background:#ffffff0f}.btn-reset{border:1px solid var(--border);color:#2e2e2e;cursor:pointer;background:0 0;border-radius:8px;margin:16px;padding:10px;font-size:12px;transition:border-color .15s,color .15s}.btn-reset:hover{color:#aaa;border-color:#444}