body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: #f0f2f5;
    color: rgba(0, 0, 0, 0.85);
    margin: 0;
    padding: 0;
    line-height: 1.5;
}

/* Global Styles */
h1, h2, h3, h4, h5, h6 {
    color: rgba(0, 0, 0, 0.85);
    font-weight: 600;
}

a {
    color: #1890ff;
    text-decoration: none;
    transition: color 0.3s;
}

a:hover {
    color: #40a9ff;
}

/* Layout Styles */
.ant-layout-header {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 10;
    position: relative;
}

.ant-menu-item {
    position: relative;
    z-index: 11;
    display: inline-block;
}

.ant-layout-content {
    min-height: calc(100vh - 64px);
}

/* Card Styles */
.ant-card {
    box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 
                0 3px 6px 0 rgba(0, 0, 0, 0.12), 
                0 5px 12px 4px rgba(0, 0, 0, 0.09);
    border-radius: 8px;
    transition: all 0.3s;
}

.ant-card:hover {
    box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.16), 
                0 6px 16px 0 rgba(0, 0, 0, 0.12), 
                0 9px 28px 8px rgba(0, 0, 0, 0.09);
}

.ant-card-head {
    border-bottom: 1px solid #f0f0f0;
    padding: 16px 24px;
    border-radius: 8px 8px 0 0;
    background: linear-gradient(to right, #fafafa, #f5f5f5);
}

.ant-card-body {
    padding: 24px;
}

/* Button Styles */
.ant-btn {
    border-radius: 4px;
    transition: all 0.3s;
    font-weight: 500;
}

.ant-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.ant-btn-primary {
    background: linear-gradient(to right, #1890ff, #096dd9);
    border: none;
}

.ant-btn-primary:hover {
    background: linear-gradient(to right, #40a9ff, #1890ff);
}

/* Table Styles */
.ant-table {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.ant-table-thead > tr > th {
    background-color: #fafafa;
    color: rgba(0, 0, 0, 0.85);
    font-weight: 600;
    border-bottom: 2px solid #f0f0f0;
}

.ant-table-tbody > tr:hover > td {
    background-color: #e6f7ff;
}

.action-buttons .ant-btn {
    margin-right: 8px;
}

/* Editor Styles */
.editor-container {
    height: calc(100vh - 200px);
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 24px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

.workflow-canvas {
    width: 100%;
    height: 100%;
    background-color: #fafafa;
    background-image: radial-gradient(#e6e6e6 1px, transparent 1px);
    background-size: 20px 20px;
}

.node {
    padding: 16px;
    border-radius: 8px;
    background-color: white;
    border: 1px solid #d9d9d9;
    width: 220px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.3s;
}

.node:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

.node-header {
    font-weight: 600;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
    color: rgba(0, 0, 0, 0.85);
}

.node-step {
    background: linear-gradient(to bottom right, #e6f7ff, #ffffff);
    border-color: #91d5ff;
}

.node-task {
    background: linear-gradient(to bottom right, #f6ffed, #ffffff);
    border-color: #b7eb8f;
}

.node-condition {
    background: linear-gradient(to bottom right, #fffbe6, #ffffff);
    border-color: #ffe58f;
}

.connection {
    stroke: #8c8c8c;
    stroke-width: 2px;
    stroke-dasharray: 5, 5;
    animation: flowAnimation 30s linear infinite;
}

@keyframes flowAnimation {
    to {
        stroke-dashoffset: 100;
    }
}

.connection-label {
    background-color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    border: 1px solid #d9d9d9;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.properties-panel {
    padding: 16px;
    border-left: 1px solid #f0f0f0;
    height: 100%;
    overflow-y: auto;
    background-color: #fafafa;
}

.properties-panel h4 {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
    color: rgba(0, 0, 0, 0.85);
    font-weight: 600;
}

/* Form Styles */
.ant-form-item-label > label {
    color: rgba(0, 0, 0, 0.85);
    font-weight: 500;
}

.ant-input, .ant-select {
    border-radius: 4px;
    border: 1px solid #d9d9d9;
    padding: 8px 12px;
    transition: all 0.3s;
}

.ant-input:hover, .ant-select:hover {
    border-color: #40a9ff;
}

.ant-input:focus, .ant-select:focus {
    border-color: #40a9ff;
    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

/* Execution Status Styles */
.execution-status {
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s;
}

.status-running {
    background: linear-gradient(to right, #e6f7ff, #f0f5ff);
    border: 1px solid #91d5ff;
}

.status-success {
    background: linear-gradient(to right, #f6ffed, #efffef);
    border: 1px solid #b7eb8f;
}

.status-error {
    background: linear-gradient(to right, #fff1f0, #fff2f0);
    border: 1px solid #ffa39e;
}

.step-status {
    margin-bottom: 12px;
    padding: 16px;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.3s;
}

.step-running {
    background: linear-gradient(to right, #e6f7ff, #f0f5ff);
}

.step-success {
    background: linear-gradient(to right, #f6ffed, #efffef);
}

.step-error {
    background: linear-gradient(to right, #fff1f0, #fff2f0);
}

/* Animation for Spinner */
.ant-spin-dot {
    animation: antRotate 1.2s infinite linear;
}

.ant-spin-dot-item {
    background-color: #1890ff;
    animation: antSpinMove 1s infinite linear alternate;
}

@keyframes antRotate {
    to {
        transform: rotate(360deg);
    }
}

@keyframes antSpinMove {
    to {
        opacity: 1;
    }
}

/* Modal Styles */
.ant-modal-content {
    border-radius: 8px;
    box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 
                0 6px 16px 0 rgba(0, 0, 0, 0.08), 
                0 9px 28px 8px rgba(0, 0, 0, 0.05);
}

.ant-modal-header {
    border-radius: 8px 8px 0 0;
    background: linear-gradient(to right, #fafafa, #f5f5f5);
}

.ant-modal-footer {
    border-radius: 0 0 8px 8px;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .editor-container {
        height: 500px;
    }

    .properties-panel {
        border-left: none;
        border-top: 1px solid #f0f0f0;
        margin-top: 16px;
    }

    .ant-card {
        margin-bottom: 16px;
    }
}
