*{margin:0;padding:0;box-sizing:border-box}:root{--pink: #d62e6e;--green: #3dd598;--blue: #1e90ff;--purple: #9c27b0;--orange: #ff6b4a;--beige: #f5f3f0;--dark: #1a1a2e;--light: #f8f9fa;--white: #fff}html,body,#root{width:100%;min-height:100vh}body{font-family:Segoe UI,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--beige);color:#333}.header{background:var(--white);padding:0 30px;height:65px;display:flex;justify-content:space-between;align-items:center;position:fixed;top:0;left:0;right:0;z-index:1000;border-bottom:3px solid var(--pink)}.header-left{display:flex;align-items:center;gap:15px}.header h1{font-size:1.25rem;font-weight:600;color:var(--dark)}.header h1 span{color:var(--pink)}.header-nav{display:flex;align-items:center;gap:5px}.nav-item{padding:8px 16px;border-radius:8px;text-decoration:none;color:#000;font-size:13px;font-weight:500;transition:all .2s;border:none;background:transparent;cursor:pointer}.nav-item:hover{background:var(--light)}.nav-item.active{background:var(--pink);color:var(--white)}.main-content{margin-top:65px;padding:30px;min-height:calc(100vh - 65px)}.page-header{margin-bottom:30px}.page-header h2{font-size:1.75rem;color:var(--dark);margin-bottom:8px}.page-header p{color:#666;font-size:14px}.card{background:var(--white);border-radius:12px;padding:24px;box-shadow:0 2px 8px #0000000d}.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:15px;border-bottom:1px solid #eee}.card-header h3{font-size:1.1rem;color:var(--dark);display:flex;align-items:center;gap:10px}.card-header h3 i{color:var(--pink)}.grid{display:grid;gap:20px}.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}@media(max-width:1200px){.grid-4,.grid-3{grid-template-columns:repeat(2,1fr)}}@media(max-width:768px){.grid-4,.grid-3,.grid-2{grid-template-columns:1fr}}.connector-card{background:var(--white);border-radius:12px;padding:24px;box-shadow:0 2px 8px #0000000d;transition:all .2s;cursor:pointer;border:2px solid transparent}.connector-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a;border-color:var(--pink)}.connector-card.active{border-color:var(--green)}.connector-card .icon{width:50px;height:50px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:15px}.connector-card .icon.fasteditor{background:linear-gradient(135deg,#ff6b4a,#d62e6e);color:#fff}.connector-card .icon.n8n{background:linear-gradient(135deg,#ea4b71,#ff6d5a);color:#fff}.connector-card .icon.medusa{background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff}.connector-card .icon.pim{background:linear-gradient(135deg,#3dd598,#10b981);color:#fff}.connector-card h4{font-size:1rem;margin-bottom:8px;color:var(--dark)}.connector-card p{font-size:13px;color:#666;margin-bottom:15px}.connector-card .status{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:4px 10px;border-radius:20px}.connector-card .status.connected{background:#3dd5981a;color:var(--green)}.connector-card .status.disconnected{background:#d62e6e1a;color:var(--pink)}.connector-card .status.pending{background:#ff6b4a1a;color:var(--orange)}.btn{padding:10px 20px;border-radius:8px;font-size:13px;font-weight:500;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:all .2s}.btn-primary{background:var(--pink);color:#fff}.btn-primary:hover{background:#c02862}.btn-secondary{background:var(--light);color:#333}.btn-secondary:hover{background:#e9ecef}.btn-success{background:var(--green);color:#fff}.btn-success:hover{background:#2bc889}.form-group{margin-bottom:20px}.form-group label{display:block;font-size:13px;font-weight:500;color:#333;margin-bottom:8px}.form-group input,.form-group select,.form-group textarea{width:100%;padding:12px 15px;border:1px solid #ddd;border-radius:8px;font-size:14px;transition:border-color .2s}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--pink)}.form-group .help-text{font-size:12px;color:#888;margin-top:5px}.table-container{overflow-x:auto}table{width:100%;border-collapse:collapse}table th,table td{padding:12px 15px;text-align:left;border-bottom:1px solid #eee}table th{background:var(--light);font-weight:600;font-size:13px;color:#555}table td{font-size:14px}table tr:hover{background:var(--light)}.badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:20px;font-size:11px;font-weight:500}.badge-success{background:#3dd59826;color:var(--green)}.badge-danger{background:#d62e6e26;color:var(--pink)}.badge-warning{background:#ff6b4a26;color:var(--orange)}.badge-info{background:#1e90ff26;color:var(--blue)}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:2000}.modal{background:var(--white);border-radius:16px;width:100%;max-width:600px;max-height:90vh;overflow-y:auto}.modal-header{padding:20px 25px;border-bottom:1px solid #eee;display:flex;justify-content:space-between;align-items:center}.modal-header h3{font-size:1.2rem;color:var(--dark)}.modal-close{background:none;border:none;font-size:20px;color:#999;cursor:pointer}.modal-close:hover{color:#333}.modal-body{padding:25px}.modal-footer{padding:15px 25px;border-top:1px solid #eee;display:flex;justify-content:flex-end;gap:10px}.log-container{background:var(--dark);border-radius:8px;padding:15px;max-height:300px;overflow-y:auto;font-family:Monaco,Menlo,monospace;font-size:12px}.log-entry{padding:4px 0;color:#ccc}.log-entry.success{color:var(--green)}.log-entry.error{color:var(--pink)}.log-entry.warning{color:var(--orange)}.log-entry .timestamp{color:#666;margin-right:10px}.tabs{display:flex;gap:5px;border-bottom:1px solid #ddd;margin-bottom:20px}.tab{padding:12px 20px;border:none;background:none;font-size:14px;color:#666;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .2s}.tab:hover{color:var(--pink)}.tab.active{color:var(--pink);border-bottom-color:var(--pink)}
