@keyframes pulse-success{0%,to{opacity:1}50%{opacity:.5}}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(360deg)}}.integrations-page{max-width:1200px;margin:0 auto;padding:var(--space-6, 2rem) var(--space-4, 1rem);min-height:calc(100vh - 56px)}.page-header{margin-bottom:var(--space-8, 3rem);text-align:center}.page-header h1{font-size:2.5rem;font-weight:700;color:var(--color-text-primary);margin-bottom:var(--space-2, 0.5rem);background:linear-gradient(135deg,var(--color-text-primary),var(--color-blue-electric));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.page-header p{font-size:var(--font-size-lg, 1.125rem);color:var(--color-text-secondary);max-width:600px;margin:0 auto}.integration-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-lg, 12px);box-shadow:0 2px 8px rgba(0,0,0,.1);margin-bottom:var(--space-6, 2rem);overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1)}.integration-card:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.15);border-color:var(--color-blue-electric)}.integration-card.coming-soon{opacity:.6;filter:grayscale(30%)}.integration-card.coming-soon:hover{transform:none;box-shadow:0 2px 8px rgba(0,0,0,.1);border-color:var(--color-border)}.card-header{display:flex;align-items:center;padding:var(--space-6, 2rem);border-bottom:1px solid var(--color-border);background:var(--color-surface-secondary);gap:var(--space-4, 1.5rem)}.integration-info{flex:1;min-width:0}.header-actions{display:flex;gap:var(--space-3, 0.75rem);align-items:center;margin-left:auto}.integration-icon{width:64px;height:64px;margin-right:1.5rem;flex-shrink:0}.integration-icon svg{width:100%;height:100%;border-radius:8px}.integration-info h2{font-size:var(--font-size-xl, 1.5rem);font-weight:600;margin-bottom:var(--space-1, 0.25rem);color:var(--color-text-primary)}.integration-description{color:var(--color-text-secondary);font-size:var(--font-size-base, 0.9375rem)}.card-body{padding:var(--space-6, 2rem)}.connection-status{display:inline-flex;align-items:center;margin-bottom:var(--space-4, 1.5rem);padding:var(--space-2, 0.5rem) var(--space-3, 0.75rem);background:var(--color-surface-secondary);border:1px solid var(--color-border);border-radius:var(--border-radius-full, 9999px);font-size:var(--font-size-sm, 0.875rem)}.status-indicator{width:8px;height:8px;border-radius:50%;margin-right:var(--space-2, 0.5rem);flex-shrink:0;position:relative}.status-indicator.connected{background:var(--color-success, #10b981);animation:pulse-success 2s cubic-bezier(.4,0,.6,1) infinite}.status-indicator.disconnected{background:var(--color-error, #ef4444)}.features-list h3,.status-text{font-weight:500;color:var(--color-text-primary)}.connected-info{background:var(--color-surface-secondary);border:1px solid var(--color-border);border-radius:var(--border-radius-md, 8px);padding:var(--space-4, 1rem);margin-bottom:var(--space-4, 1.5rem)}.info-row{display:flex;justify-content:space-between;align-items:center;padding:var(--space-2, 0.5rem)0;gap:var(--space-4, 1rem)}.info-row .label{font-weight:500;font-size:var(--font-size-sm, 0.875rem);color:var(--color-text-secondary)}.features-list li,.info-row .value{color:var(--color-text-primary);font-size:var(--font-size-sm, 0.875rem)}.info-row .value{font-weight:600;font-family:"SF Mono","Monaco","Cascadia Code","Roboto Mono",monospace}.features-list,.setup-instructions{margin-bottom:var(--space-4, 1.5rem)}.features-list h3{font-size:var(--font-size-base, 1rem);font-weight:600;margin-bottom:var(--space-3, 0.75rem)}.features-list ul{list-style:none;padding:0;margin:0;display:grid;gap:var(--space-2, 0.5rem)}.features-list li{padding:var(--space-2, 0.5rem);display:flex;align-items:center;gap:var(--space-2, 0.5rem);transition:background .2s ease;border-radius:var(--border-radius-sm, 4px)}.features-list li:hover{background:var(--color-surface-secondary)}.setup-instructions{background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.3);border-radius:var(--border-radius-md, 8px);padding:var(--space-4, 1rem)}.setup-instructions h3{margin-bottom:var(--space-3, 0.75rem);color:var(--color-blue-electric)}.setup-instructions ol{margin:0;padding-left:var(--space-4, 1.5rem);color:var(--color-text-primary)}.setup-instructions li{padding:var(--space-1, 0.25rem)0;font-size:var(--font-size-sm, 0.875rem);line-height:1.5}.card-footer{padding:var(--space-4, 1.5rem) var(--space-6, 2rem);background:var(--color-surface-secondary);border-top:1px solid var(--color-border);display:flex;gap:var(--space-3, 1rem);align-items:center}[data-theme=dark] .integration-card{box-shadow:0 2px 8px rgba(0,0,0,.3)}[data-theme=dark] .integration-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.4)}.btn,.setup-instructions h3{font-size:var(--font-size-base, 1rem);font-weight:600}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2, 0.5rem);padding:var(--space-3, 0.75rem) var(--space-4, 1.5rem);border-radius:var(--border-radius-md, 8px);border:0;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);text-decoration:none;white-space:nowrap}.btn-primary{background:var(--color-blue-electric);color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.1)}.btn-primary:hover{background:#2563eb;transform:translateY(-1px);box-shadow:0 4px 12px rgba(59,130,246,.4)}.btn-primary:active{transform:translateY(0)}.btn-secondary{background:0 0;color:var(--color-error);border:1px solid var(--color-error)}.btn-secondary:hover{background:var(--color-error);color:#fff;transform:translateY(-1px);box-shadow:0 4px 12px rgba(239,68,68,.3)}.btn-disabled{background:var(--color-surface-secondary);color:var(--color-text-muted);cursor:not-allowed;opacity:.6}.btn-disabled:hover{transform:none;box-shadow:none}.btn svg{flex-shrink:0}.loading{display:flex;align-items:center;gap:var(--space-3, 0.75rem);color:var(--color-text-secondary);font-size:var(--font-size-sm, 0.875rem)}.btn svg,.spinner{width:20px;height:20px}.spinner{border:3px solid var(--color-border);border-top:3px solid var(--color-blue-electric);border-radius:50%;animation:spin .8s cubic-bezier(.4,0,.2,1) infinite}.toast-container{position:fixed;top:var(--space-6, 2rem);right:var(--space-6, 2rem);z-index:var(--z-modal, 1000);display:flex;flex-direction:column;gap:var(--space-2, 0.5rem)}.toast{padding:var(--space-3, 1rem) var(--space-4, 1.5rem);border-radius:var(--border-radius-md, 8px);background:var(--color-surface);border:1px solid var(--color-border);box-shadow:0 4px 12px rgba(0,0,0,.15);max-width:400px;min-width:300px;opacity:0;transform:translateX(450px);transition:all .4s cubic-bezier(.4,0,.2,1);font-size:var(--font-size-sm, 0.875rem);color:var(--color-text-primary)}.toast.show{opacity:1;transform:translateX(0)}.toast-success{border-left:4px solid var(--color-success);background:rgba(16,185,129,.1)}.toast-error{border-left:4px solid var(--color-error);background:rgba(239,68,68,.1)}.toast-info{border-left:4px solid var(--color-blue-electric);background:rgba(59,130,246,.1)}@media (max-width:768px){.integrations-page{padding:1rem}.page-header h1{font-size:2rem}.card-header{flex-wrap:wrap;padding:1.5rem}.integration-icon{width:48px;height:48px;margin-right:0}.integration-info{flex:1 1 auto}.header-actions{flex-basis:100%;margin-left:0;margin-top:var(--space-3, 0.75rem)}.card-body,.card-footer{padding:1.5rem}.card-footer{flex-direction:column}.btn{width:100%;justify-content:center}.toast-container{right:1rem;left:1rem}.toast{max-width:100%}}